|
|
| Line 1: |
Line 1: |
| − | [[Category:Miscellaneous]]
| + | == Examples list== |
| − | | |
| − | == == | |
| − | | |
| − | == Basic Hints ==
| |
| − | | |
| − | Questionnaire viewer is implemented in a way that you can add javascript to manipulate the way your questions are displayed.
| |
| − | | |
| − | jQuery is already included in the viewer, thanks to what javascript has even more powerful effect! (read more about jquery here: [http://jquery.com/ http://jquery.com/])
| |
| − | | |
| − | Javascript is a property on both question and questionnaire levels, which means that you can add javascript for each question or for the whole questionnaire.
| |
| − | | |
| − | The most important features are:
| |
| − | | |
| − | *quest: the current question's object
| |
| − | *questioncheck: the function called before going Next
| |
| − | | |
| − | === quest ===
| |
| − | | |
| − | Some important properties of quest object:
| |
| | | | |
| − | *quest.questions: array of sub questions
| + | [[Basic_Hints|Basic Hints]] |
| − | *quest.options: array of answer options
| |
| − | | |
| − | Methods of quest object:
| |
| − | | |
| − | *quest.setQuestions(Array subQuestions): assign an array of question objects to the sub question list of the current question
| |
| − | *quest.setOptions(Array options): assign an array of options to the answer option list of the current question
| |
| − | *quest.setAnswer(string value): assign a value to the question
| |
| − | *quest.getHTML(): returns the HTML which will be rendered to display the question
| |
| − | *quest.onInit(): called right after loading the question
| |
| − | *quest.rotateAnswerOptions(startIndex, endIndex, rotateIndex): rotate answer options in a range specified by startIndex and endIndex, the first item in the range will be rotateIndex
| |
| − | *quest.rotateSubQuestions(startIndex, endIndex, rotateIndex): rotate sub questions in a range specified by startIndex and endIndex, the first item in the range will be rotateIndex
| |
| − | *quest.randomizeAnswerOptions(randomSeed, startIndex, endIndex): randomize answer options in a range specified by startIndex and endIndex, the order is unique for each randomSeed
| |
| − | *quest.randomizeSubQuestions(randomSeed, startIndex, endIndex):randomize sub questions in a range specified by startIndex and endIndex, the order is unique for each randomSeed<br>
| |
| − | | |
| − | === questioncheck() ===
| |
| − | | |
| − | We need to override this function to get rid of the default question check supported by the questionnaire viewer, it is a must when showing more than one questions in the same page. The function returns true when there is nothing wrong and false otherwise.
| |
| − | | |
| − | There is an object which should be used to display errors: ErrorMessages.
| |
| − | | |
| − | *ErrorMessages.getInstance().clearErrorMessages(): clear all existing error messages
| |
| − | *ErrorMessages.getInstance().showErrorMessage(msg): show an error message
| |
| − | | |
| − | If you want to extend the questioncheck function with special cases then you should re-create the questioncheck function carefully, because else you will create an endless loop. If you get a stack overflow error from the browser, then your problem should be solved by the following script pattern:
| |
| − | | |
| − | <source lang="javascript">// Store a reference to the default question check
| |
| − | var defaultQuestionCheck = questioncheck;
| |
| − | | |
| − | // Implement your own question check routine
| |
| − | var questioncheck = function()
| |
| − | {
| |
| − | // Call the default question check
| |
| − | // If it fails
| |
| − | if (!defaultQuestionCheck())
| |
| − | // Then return at once with false
| |
| − | return false;
| |
| − |
| |
| − | // Catch exceptions, this is just for precaution
| |
| − | try
| |
| − | {
| |
| − | // Optimistic assumption that everything is OK
| |
| − | var valid = true;
| |
| − | | |
| − | // Do your customized question checks here set variable
| |
| − | // valid to false if the question is answered incorrectly
| |
| − | | |
| − | if (!valid)
| |
| − | {
| |
| − | // You might want to clear default error messages given
| |
| − | ErrorMessages.getInstance().clearErrorMessages();
| |
| − | | |
| − | // Add your own error message
| |
| − | ErrorMessages.getInstance().showErrorMessage("An error message");
| |
| − | | |
| − | // Terminate the question check by returning false
| |
| − | return false;
| |
| − | }
| |
| − | }
| |
| − | catch(e)
| |
| − | {
| |
| − | // Inform about the reason for the exception
| |
| − | alert(e.message);
| |
| − | | |
| − | // And return false
| |
| − | return false;
| |
| − | }
| |
| − | | |
| − | // Everything is OK
| |
| − | return true;
| |
| − | }</source>
| |
| − | | |
| − | == Technical tips ==
| |
| − | | |
| − | === Include an external script library ===
| |
| − | | |
| − | In case we want to use external javascript libraries hosted on external servers (like google), we need to include the library link to quest.onInit.<br> A simple method of doing so is using jquery's getScript method (http://docs.jquery.com/Ajax/jQuery.getScript#urlcallback)<br> '''Example:'''<br> <source lang="javascript">
| |
| − | $.getScript("http://ui.jquery.com/testing/ui/ui.datepicker.js", function()
| |
| − | {
| |
| − | //the library is now ready to use
| |
| − | }
| |
| − | );
| |
| − | </source>
| |
| − | | |
| − | Do not include a js library as an attachment in a question's script, otherwise you will have a problem with resource access when respondents view the questionnaire.<br> Solution for this: if the script is short, copy it and put directly into the question/questionnaire's script, if it is big, find an external host (ex: google host).<br> If you still wants to go with attachment, then create a new group with observer access to the attachments, add a dummy question in the questionnaire to add the current user to the group automatically, also add anonymous user to the group.
| |
| − | | |
| − | === Edit stylesheet ===
| |
| − | | |
| − | The easiest way is to use Firefox with Web Developer Add-on (http://chrispederick.com/work/web-developer)<br>
| |
| − | | |
| − | [[Image:Web developer.png]] | |
| − | | |
| − | == Examples ==
| |
| | | | |
| | [[Show more than one questions in the same page]] | | [[Show more than one questions in the same page]] |
| Line 213: |
Line 102: |
| | | | |
| | [[Upload images in questionnaire]] | | [[Upload images in questionnaire]] |
| | + | |
| | + | [[Category:Miscellaneous]] |
