How Other Modules Can Contribute New Question Types To ujQuiz

  • This part of the documentation is for developers. You will already have a functional module, here we look at the things you need to add to your module in order to contribute an additional question type to ujQuiz.

    ujQuiz (currently) has five question types: truefalse, multiplechoice, multipleanswer, fill in the blanks and drag into lists.

    ujCodePlay contributes an additional question type to ujQuiz: codeplayquiz

    How it adds that question type is what we are going to look at here, but note that ujCodePlay also contributes an "ordinary" section to ujQuiz (no submission and no results), but we will look at that in another doc (it is simpler than adding a question type).
  • The Idea Of "Sectional" Modules and "Contributing" Modules

    ujQuiz is a sectional module, similar to jrDocs.

    It works differently as it fires a trigger function at various points to allow other modules to contribute a section. In the case of ujQuiz the section will probably (but not necessarily) be a question type.

    ujCodePlay is a complete module in its own right, allowing creation and use of codeplay items. It also contributes a codeplay section to the ujQuiz module, and also a question type, another section which additionally allows submission and an answer response as part of a quiz.
  • Register The Contribution

    Register an event_listener with the sectional module.

    This is from the ujCodePlay_init function:
        // Add this to ujQuiz as a question
    
        jrCore_register_event_listener('ujQuiz', 'section_contribution', 'ujCodePlay_quiz_section_contribution_listener');
  • The Listener Function

    Once registered the listener function can be configured to add to the $_data array like this:
    // Contribute a section to ujQuiz
    
    function ujCodePlay_quiz_section_contribution_listener($_data, $_user, $_conf, $_args, $event)
    {
        if (isset($_user['quota_ujCodePlay_allowed']) && $_user['quota_ujCodePlay_allowed'] == 'on') {
            $_data['codeplayquiz'] = array(
                'module' 		=> 'ujCodePlay',
                'name' 			=> 'ujCodePlay quiz section',
                'section_func' 	=> 'ujCodePlay_section_codeplayquiz',
                'process_func' 	=> 'ujCodePlay_process_section_codeplayquiz',
                'template_location' => 'ujCodePlay',
                'template_tpl' 	=> 'quiz_section_codeplayquiz.tpl',
                'answer_func' 	=> 'ujCodePlay_answer_codeplayquiz'
            );
        }
        return $_data;
    }
  • Other Functions In include.php

    For a ujQuiz question type the following functions are then required:

    ujCodePlay_section_codeplayquiz (required)
    ujCodePlay_section_codeplayquiz_save (required)
    ujCodePlay_process_section_codeplayquiz (required)
    ujCodePlay_answer_codeplayquiz

    ujCodePlay_answer_codeplayquiz is specific to this module, most modules will only need the first 3 functions.
  • The Section Template

    Templates required in the ujCodePlay templates directory:
    quiz_section_codeplay.tpl
  • CSS and JS

    Add any necessary css and js in your modules css and js files. CodePlay doesn’t use these as the js and css for the section is added in its custom field function.
  • Javascript results function

    function ujQuizResults_get_results(item_id, module, profile_url) needs a contributed js function
    The function must be named 'ujQuiz_' + answer.question_type + '_result'
    Requires (answer, index, icon_correct, icon_incorrect) params, returns nothing.

    The following code is from ujQuizResults.js which will use the function. See similar in the inline submit and quiz submit js in ujQuiz (the quiz submit js will probably be moved to ujQuizResults).
    	var quiz_func = 'ujQuiz_' + answer.question_type + '_result';
    	// run the contributing function (this js function will be part of the contributing module, but it MUST be prefixed with "ujQuiz_")
    
    	// check that this function exists
    
    	if (typeof window[quiz_func] === "function") { 
    		window[quiz_func](answer, index, icon_correct, icon_incorrect);
    	}
  • The actual results are returned by your php answer function (ujCodePlay_answer_codeplayquiz). This js function needs to change the quiz page to reflect the results which are loaded by ajax (upon submission and upon subsequent revisits to the quiz page).

    The results function will work something like this (the multiplechoice js function from ujQuiz):
    /* 
     * Result js function - if the question has been answered this function runs when the answer is loaded into the page
     */
    function ujQuiz_multiplechoice_result(answer, index, icon_correct, icon_incorrect)
    {
    	var icon = icon_incorrect;
    	var resultclass = 'error';
    	if (answer.correct) {
    		resultclass = 'success';
    		icon = icon_correct;
    	}
    	$("#c" + index + " input[value='" + answer.answer_id  + "']").attr("checked","checked").parent().addClass(resultclass).append(icon).siblings().removeClass("error success");
    	return true;
    }

Tags