Difference between revisions of "Questionnaire - Javascript Fun Tips"

From Catglobe Wiki
Jump to: navigation, search
m (→‎Examples)
 
(56 intermediate revisions by 11 users not shown)
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 what javascript has even more powerful effect! (read more about jquery here: [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 several important properties in quest object:
+
'''[[Show single questions as dropdown lists in their own pages]]'''
  
−
*quest.questions: 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): 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()  ====
+
'''[[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
 
  
−
== Examples  ==
+
[[Randomize answer options/sub questions]]
  
−
[[Rotate answer options/sub questions]]  
+
[[Drag and drop answer option values]]
  
−
[[Randomize answer options/sub questions]]  
+
[[Change Impsys mages]]
  
−
[[Drag and drop answer option values]]  
+
[[Add an extra row before a sub question in a grid]]
  
−
[[Change Impsys mages]]  
+
[[Hide sub question text column in a grid question]]
  
−
[[Add an extra row before a sub question in a grid]]  
+
[[Change stylesheet of an answer option column in a single grid question]]
  
−
[[Hide sub question text column in a grid question]]  
+
[[Add an extra column before an answer option column in single 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]]  
+
[[Both horizontal and vertical single grid]]
  
−
[[Change stylesheet of an answer option column in a single grid question]]  
+
[[Disable sub questions in text grids]]
  
−
[[Add an extra column before an answer option column in single grid question]]  
+
[[Number grid]]
  
−
[[Both horizontal and vertical single grid]]  
+
[[Close to URL]]
  
−
[[Disable sub questions in text grids]]  
+
[[Double columns in text grids]]
  
−
[[Number grid]]  
+
[[Count down with invisible counter]]
  
−
[[Close to URL]]  
+
[[Fold in/out texts in question text]]
  
−
[[Double columns in text grids]]  
+
[[Force email address]]
  
−
[[Count down with invisible counter]]  
+
[[Force number of characters]]
  
−
[[Force email address]]  
+
[[Change text box size]]
  
−
[[Force number of characters]]  
+
[[Set focus on question text in the top]]
  
−
[[Change text box size]]  
+
[[Maximum text length]]
  
−
[[Maximum text length]]  
+
[[Next button count down]]
  
−
[[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]] : doesnt not work -->[[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 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]]
 +
 
 +
[[Validate email specified as an open text of a single question]]
 +
 
 +
[[Require only one check for grid question]]
 +
 
 +
[[Change non-multi option in Multi question to Radio button]]
  
−
[[Mark answer option with keyboard]]
+
[[Make whole cell clickable in single and multi grids]]
 +
 
 +
[[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]]
  
−
[[Show flash movies on questionnaire viewer|Play a list of movies in questionnaire]]
+
[[Reverse the position of the subquestion texts with their textboxes in the text-grid question]]
  
−
[[Play a commercial and automatically go next when it is over in questionnaire]]
+
[[Show multi, single question in new style]]
  
−
[[Show a single question as a dropdown list inside another text grid question]]
+
[[Get parameters from answer sheet link]]

Latest revision as of 13:55, 26 May 2015

Basic Hints

Show more than one questions in the same page

Add answer options of the close questions to the open questions

Validate the questions by using the questioncheck() function

Show a text grid question and a single question in the same page

Show more than one single grid in the same page

Show more than one single question in the same page

Show single questions as dropdown lists in their own pages

Insert a TextGrid question into a SingleGrid Question

Some special questions on COOP Site


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

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

Maximum text length

Next button count down

Mark answer option with keyboard

Play a list of movies 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 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

Validate email specified as an open text of a single question

Require only one check for grid question

Change non-multi option in Multi question to Radio button

Make whole cell clickable in single and multi grids

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

Retrieved from "http://wiki.catglobe.com/index.php?title=Questionnaire_-_Javascript_Fun_Tips&oldid=25095"