Difference between revisions of "Questionnaire - Javascript Fun Tips"

@@ Line 1: / Line 1: @@
-<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>
+'''[[Basic Hints|Basic Hints]]'''
-[[Category:Guidelines]]
-==  ==
+'''[[Show more than one questions in the same page]]'''
-== Basic Hints  ==
+'''[[Add answer options of the close questions to the open questions]]'''
-Questionnaire viewer is implemented in a way that you can add javascript to manipulate the way your questions are displayed.
+'''[[Validate the questions by using the questioncheck() function]]'''
-jQuery is already included in the viewer, thanks to&nbsp;what&nbsp;javascript has even more powerful effect! (read more about jquery here:&nbsp;[http://jquery.com/ http://jquery.com/])
+'''[[Show a text grid and a single question in the same page|Show a text grid question and a single question in the same page]]'''
-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.
+'''[[Show more than one singe grid in the same page|Show more than one single grid in the same page]]'''
-The most important features are:
+'''[[Show more than one singe question in the same page|Show more than one single question in the same page]]'''
-*quest: the current question's object
+'''[[Show single questions as dropdown lists in their own pages]]'''
-*questioncheck: the function called before going Next
-=== quest  ===
+'''[[Insert a TextGrid question into a SingleGrid Question]]'''
-Some important properties of quest object:
+'''[[Some special questions on COOP Site]]'''
-*quest.questions:&nbsp;array of sub questions
+----
-*quest.options: array of answer options
-Methods of quest object:
+<br/>[[Showing Answer Option in tab]]
-*quest.setQuestions(Array subQuestions): assign an array of question objects to the sub question list of the current question
+[[Rotate answer options/sub questions]]
-*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):&nbsp;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):&nbsp;randomize answer options in a range specified by startIndex and endIndex, the order&nbsp;is unique&nbsp;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()  ===
+[[Randomize answer options/sub questions]]
-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.
+[[Drag and drop answer option values]]
-There is an object which should be used to display errors: ErrorMessages.
+[[Change Impsys mages]]
-*ErrorMessages.getInstance().clearErrorMessages(): clear all existing error messages
+[[Add an extra row before a sub question in a grid]]
-*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:
+[[Hide sub question text column in a grid question]]
-<source lang="javascript">// Store a reference to the default question check
+[[Change stylesheet of an answer option column in a single grid question]]
-var defaultQuestionCheck = questioncheck;
-// Implement your own question check routine
+[[Add an extra column before an answer option column in single grid question]]
-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
+[[Both horizontal and vertical single grid]]
-      // valid to false if the question is answered incorrectly
-      if (!valid)
+[[Disable sub questions in text grids]]
-      {
-         // You might want to clear default error messages given
-         ErrorMessages.getInstance().clearErrorMessages();
-         // Add your own error message
+[[Number grid]]
-         ErrorMessages.getInstance().showErrorMessage("An error message");
-         // Terminate the question check by returning false
+[[Close to URL]]
-         return false;
-      }
-   }
-   catch(e)
-   {
-      // Inform about the reason for the exception
-      alert(e.message);
-      // And return false
+[[Double columns in text grids]]
-      return false;
-   }
-   // Everything is OK
+[[Count down with invisible counter]]
-   return true;
-}</source>
-== Technical tips ==
+[[Fold in/out texts in question text]]
-=== Include an external script library ===
+[[Force email address]]
-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">
+[[Force number of characters]]
-$.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.
+[[Change text box size]]
-=== Edit stylesheet ===
+[[Set focus on question text in the top]]
-The easiest way is to use Firefox with Web Developer Add-on (http://chrispederick.com/work/web-developer)<br>
+[[Maximum text length]]
-[[Image:Web developer.png]]
+[[Next button count down]]
-== Examples  ==
+[[Mark answer option with keyboard]]
-[[Show more than one questions in the same page]]
+[[Show flash movies on questionnaire viewer|Play a list of movies in questionnaire]] <!--[[Play a commercial and automatically go next when it is over in questionnaire]] : doesnt not work -->[[Show a single question as a dropdown list inside another text grid question]]
-[[Showing Answer Option in tab]]
+[[Hide Next button in n seconds]]
-[[Rotate answer options/sub questions]]
+[[Show datepicker in text/text grid questions]]
-[[Randomize answer options/sub questions]]
+[[Show column header in text grid question]]
-[[Drag and drop answer option values]]
+[[Prioritize sub questions in a text grid question]]
-[[Change Impsys mages]]
+[[Align min/max texts in scale grid questions]]
-[[Add an extra row before a sub question in a grid]]
+[[Add text before answer option of single question]]
-[[Hide sub question text column in a grid question]]
+[[Show language selector page]]
-[[Show a text grid and a single question in the same page|Show a text grid question and a single question in the same page]]
+[[Reverse single grid between sub questions and answer options]]
-[[Change stylesheet of an answer option column in a single grid question]]
+[[Script for making a text grid numerical summing to a specific value]]
-[[Add an extra column before an answer option column in single grid question]]
+[[Convert closed question TextBox into TextArea]]
-[[Both horizontal and vertical single grid]]
+[[Validate email specified as an open text of a single question]]
-[[Disable sub questions in text grids]]
+[[Require only one check for grid question]]
-[[Number grid]]
+[[Change non-multi option in Multi question to Radio button]]
-[[Close to URL]]
+[[Make whole cell clickable in single and multi grids]]
-[[Double columns in text grids]]
+[[AutoSum numerical text grid]]
-[[Count down with invisible counter]]
+[[Show open textbox in a grid question]]
-[[Fold in/out texts in question text]]
+[[Change progress bar images of questionnaire]]
-[[Force email address]]
+[[Add CKEditor to an Open question]]
-[[Force number of characters]]
+[[Upload images in questionnaire]]
-[[Change text box size]]
-[[Set focus on question text in the top]]
-[[Maximum text length]]
-[[Next button count down]]
-[[Mark answer option with keyboard]]
-[[Show flash movies on questionnaire viewer|Play a list of movies in questionnaire]]
-[[Play a commercial and automatically go next when it is over in questionnaire]]
-[[Show a single question as a dropdown list inside another text grid question]]
-[[Hide Next button in n seconds]]
-[[Show datepicker in text/text grid questions]]
-[[Show column header in text grid question]]
-[[Prioritize sub questions in a text grid question]]
-[[Align min/max texts in scale grid questions]]
-[[Add text before answer option of single question]]
-[[Show single questions as dropdown lists in their own pages]]
-[[Show language selector page]]
-[[Reverse single grid between sub questions and answer options]]
-[[Insert a TextGrid question into a SingleGrid Question]]
-[[Script for making a text grid numerical summing to a specific value]]
-[[Convert closed question TextBox into TextArea]]
-[[Validate email specified as an open text of a single question]]
-[[Show more than one singe grid in the same page|Show more than one single grid in the same page]]
-[[Show more than one singe question in the same page|Show more than one single question in the same page]]
-[[Require only one check for grid question]]
+[[Check whether values of open parts of a close question are positive numbers or not]]
-[[Change non-multi option in Multi question to Radio button]]
+[[Reverse the position of the subquestion texts with their textboxes in the text-grid question]]
-[[Make whole cell clickable in single and multi grids]]
+[[Show multi, single question in new style]]
-[[AutoSum numerical text grid]]<br> [[Show open textbox in a grid question]]
+[[Get parameters from answer sheet link]]
-[[Change progress bar images of questionnaire]]
-[[Add CKEditor to an Open question]]
-[[Upload images in questionnaire]]