Difference between revisions of "Questionnaire - Javascript Fun Tips"

@@ Line 1: / Line 1: @@
-== Basic Hints  ==
+'''[[Basic Hints|Basic Hints]]'''
-Questionnaire viewer is implemented in a way that you can add javascript to manipulate the way your questions are displayed.
+'''[[Show more than one questions in the same page]]'''
-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/])
+'''[[Add answer options of the close questions to the open questions]]'''
-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.
+'''[[Validate the questions by using the questioncheck() function]]'''
-The most important features are:
+'''[[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]]'''
-*quest: the current question's object
+'''[[Show more than one singe grid in the same page|Show more than one single grid in the same page]]'''
-*questioncheck: the function called before going Next
-=== quest  ===
+'''[[Show more than one singe question in the same page|Show more than one single question in the same page]]'''
-There are&nbsp;several important&nbsp;properties&nbsp;in quest object:
+'''[[Show single questions as dropdown lists in their own pages]]'''
-*quest.questions:&nbsp;array of sub questions
+'''[[Insert a TextGrid question into a SingleGrid Question]]'''
-*quest.options: array of answer options
-*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):&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()  ===
+'''[[Some special questions on COOP Site]]'''
-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.
+<br/>[[Showing Answer Option in tab]]
-*ErrorMessages.getInstance().clearErrorMessages(): clear all existing error messages
+[[Rotate answer options/sub questions]]
-*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:
+[[Randomize answer options/sub questions]]
-<source lang="javascript">// Store a reference to the default question check
+[[Drag and drop answer option values]]
-var defaultQuestionCheck = questioncheck;
-// Implement your own question check routine
+[[Change Impsys mages]]
-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
+[[Add an extra row before a sub question in a grid]]
-      // valid to false if the question is answered incorrectly
-      if (!valid)
+[[Hide sub question text column in a grid question]]
-      {
-         // You might want to clear default error messages given
-         ErrorMessages.getInstance().clearErrorMessages();
-         // Add your own error message
+[[Change stylesheet of an answer option column in a single grid question]]
-         ErrorMessages.getInstance().showErrorMessage("An error message");
-         // Terminate the question check by returning false
+[[Add an extra column before an answer option column in single grid question]]
-         return false;
-      }
-   }
-   catch(e)
-   {
-      // Inform about the reason for the exception
-      alert(e.message);
-      // And return false
+[[Both horizontal and vertical single grid]]
-      return false;
-   }
-   // Everything is OK
+[[Disable sub questions in text grids]]
-   return true;
-}</source>
-==Technical tips==
+[[Number grid]]
-===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/>
-<b>Example:</b><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/>
+[[Close to URL]]
-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===
+[[Double columns in text grids]]
-The easiest way is to use Firefox with Web Developer Add-on (http://chrispederick.com/work/web-developer)<br/>
-[[Image:Web_developer.png]]
+[[Count down with invisible counter]]
-== Examples  ==
-[[Show more than one questions in the same page]]
-[[Showing Answer Option in tab]]
-[[Rotate answer options/sub questions]]
-[[Randomize answer options/sub questions]]
-[[Drag and drop answer option values]]
-[[Change Impsys mages]]
-[[Add an extra row before a sub question in a grid]]
-[[Hide sub question text column in a grid question]]
-[[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]]
-[[Change stylesheet of an answer option column in a single grid question]]
-[[Add an extra column before an answer option column in single grid question]]
-[[Both horizontal and vertical single grid]]
-[[Disable sub questions in text grids]]
-[[Number grid]]
-[[Close to URL]]
-[[Double columns in text grids]]
-[[Count down with invisible counter]]
 [[Fold in/out texts in question text]]
 [[Force email address]]
-[[Force number of characters]]
-[[Change text box size]]
-[[Set focus on question text in the top]]
+[[Force number of characters]]
-[[Maximum text length]]
+[[Change text box size]]
-[[Next button count down]]
+[[Set focus on question text in the top]]
-[[Mark answer option with keyboard]]
+[[Maximum text length]]
-[[Show flash movies on questionnaire viewer|Play a list of movies in questionnaire]]
+[[Next button count down]]
-[[Play a commercial and automatically go next when it is over in questionnaire]]
+[[Mark answer option with keyboard]]
-[[Show a single question as a dropdown list inside another text grid question]]
+[[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]]
 [[Hide Next button in n seconds]]
@@ Line 175: / Line 80: @@
 [[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]]
@@ Line 189: / Line 90: @@
 [[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]]
@@ Line 201: / Line 98: @@
 [[AutoSum numerical text grid]]
+[[Show open textbox in a grid question]]
+[[Change progress bar images of questionnaire]]
+[[Add CKEditor to an Open question]]
+[[Upload images in questionnaire]]
+[[Check whether values of open parts of a close question are positive numbers or not]]
+[[Reverse the position of the subquestion texts with their textboxes in the text-grid question]]
+[[Show multi, single question in new style]]
+[[Get parameters from answer sheet link]]