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
-==Technical tips==
+[[Randomize answer options/sub questions]]
-===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 the question script.<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>
-===Edit stylesheet===
+[[Drag and drop answer option values]]
-The easiest way is to use Firefox with Web Developer Add-on (http://chrispederick.com/work/web-developer)<br/>
-[[Image:Web_developer.png]]
+[[Change Impsys mages]]
-== Examples  ==
+[[Add an extra row before a sub question in a grid]]
-[[Rotate answer options/sub questions]]
+[[Hide sub question text column in a grid question]]
-[[Randomize answer options/sub questions]]
+[[Change stylesheet of an answer option column in a single grid question]]
-[[Drag and drop answer option values]]
+[[Add an extra column before an answer option column in single grid question]]
-[[Change Impsys mages]]
+[[Both horizontal and vertical single grid]]
-[[Add an extra row before a sub question in a grid]]
+[[Disable sub questions in text grids]]
-[[Hide sub question text column in a grid question]]
+[[Number grid]]
-[[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]]
+[[Close to URL]]
-[[Change stylesheet of an answer option column in a single grid question]]
+[[Double columns in text grids]]
-[[Add an extra column before an answer option column in single grid question]]
+[[Count down with invisible counter]]
-[[Both horizontal and vertical single grid]]
+[[Fold in/out texts in question text]]
-[[Disable sub questions in text grids]]
+[[Force email address]]
-[[Number grid]]
+[[Force number of characters]]
-[[Close to URL]]
+[[Change text box size]]
-[[Double columns in text grids]]
+[[Set focus on question text in the top]]
-[[Count down with invisible counter]]
+[[Maximum text length]]
-[[Force email address]]
+[[Next button count down]]
-[[Force number of characters]]
+[[Mark answer option with keyboard]]
-[[Change text box size]]
+[[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]]
-[[Set focus on question text in the top]]
+[[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 language selector page]]
+[[Reverse single grid between sub questions and answer options]]
+[[Script for making a text grid numerical summing to a specific value]]
+[[Convert closed question TextBox into TextArea]]
-[[Maximum text length]]
+[[Validate email specified as an open text of a single question]]
-[[Next button count down]]
+[[Require only one check for grid question]]
-[[Mark answer option with keyboard]]
+[[Change non-multi option in Multi question to Radio button]]
-[[Show flash movies on questionnaire viewer|Play a list of movies in questionnaire]]
+[[Make whole cell clickable in single and multi grids]]
-[[Play a commercial and automatically go next when it is over in questionnaire]]
+[[AutoSum numerical text grid]]
-[[Show a single question as a dropdown list inside another text grid question]]
+[[Show open textbox in a grid question]]
-[[Hide Next button in n seconds]]
+[[Change progress bar images of questionnaire]]
+[[Add CKEditor to an Open question]]
-[[Show datepicker in text/text grid questions]]
+[[Upload images in questionnaire]]
-[[Show column header in text grid question]]
+[[Check whether values of open parts of a close question are positive numbers or not]]
-[[Prioritize sub questions in a text grid question]]
+[[Reverse the position of the subquestion texts with their textboxes in the text-grid question]]
-[[Align min/max texts in scale grid questions]]
+[[Show multi, single question in new style]]
-[[Add text before answer option of single question]]
+[[Get parameters from answer sheet link]]

Difference between revisions of "Questionnaire - Javascript Fun Tips"

Latest revision as of 13:55, 26 May 2015

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Categories

Tools