Hide Next button in n seconds: Difference between revisions

VisualWikitext

Latest revision as of 04:58, 2 February 2012

Challenge

In order to not allow respondent click on the Next button in a period of time

As a questionnaire creator

I want to hide the Next button in some seconds

Example

Solution

In questionnaire template editor, choose the question I want to hide the Next button and then go to the Properties - Edit question properties - Language dependent - Select javascript property
Override quest.onInit function.
In that function, check if the Next button exists.
If it doesn't exist, do nothing, else disable the Next button, set the time out to number of seconds I want to hide the button, then show the button again.

Code

quest.onInit = function()
{
	var secsTimeout = 10;
	if ( !document.getElementsByName('next') || document.getElementsByName('next').length == 0 ) 
		// next button not available
		return;
	document.getElementsByName('next')[0].style.display='none';
	setTimeout("document.getElementsByName('next')[0].style.display='';", secsTimeout*1000);
}

Source

Questionnaire Resource Id on cg site: 159730

@@ Line 1: / Line 1: @@
 == Challenge  ==
-In order to restrict the value entered in a text grid question <br>As a questionnaire creator<br>I want to show a dropdown list inside the text grid<br><br>[[Image:QuestionnaireTips SingleQuestionAsDropdownList.png]]
+In order to not allow respondent click on the Next button in a period of time
-== Solution  ==
+As a questionnaire creator
-*Create a text grid question (Q3)
+I want to hide the Next button in some seconds&nbsp;
-*Create a dummy single question with the same answer options as we want to show inside the text grid question (Q3x)
-*Add javascript code to the text grid question to include the single question inside
-== Code ==
+== Example ==
+[[Image:HideNextButton1.jpg]]
+<br>
+[[Image:HideNextButton2.jpg]]
-&lt;source lang="javascript"&gt; var SingleQuestion = { onInit: function(_label, _text, _answerOptionValues, _answerOptionTexts, _selectedValue) { this.label = "QUESTION." + _label; this.text = _text; this.aoValues = _answerOptionValues; this.aoTexts = _answerOptionTexts; this.selectedValue = _selectedValue; }, getHTML: function() { var n = this.aoValues.length; var list = $("&lt;select&gt;").width("400px"); var selected=""; for(var i=0; i&lt;n; i++) { if (this.aoValues[i] == this.selectedValue) selected = "true"; else selected = ""; list.append($("&lt;option&gt;") .val(this.aoValues[i]) .text(this.aoTexts[i]) .attr("selected", selected) ); }
+== Solution  ==
-                //handle change event to change the value of the single question
-list.change( function() { $("input:hidden").each( function(i) { if ($(this).attr("name") == SingleQuestion.label) $(this).val(list.val());
-} );
-} ); var row = $("&lt;tr&gt;"); row.append($("&lt;td&gt;").text(this.text).addClass("grid_subquestion_text grid_subquestion_odd")); row.append( $("&lt;td&gt;").addClass("grid_subquestion_odd") .append(list) ) row.append($("&lt;input type = \"hidden\"&gt;").attr("name", this.label).val(""));
-return row; } }
-quest.onInit = function() { var n = 8; var aoValues = new Array(n); var aoTexts = new Array(n); for (var i=0; i&lt;n; i++) { aoValues[i] = i+1; }
-        //answer option texts
-aoTexts[0] = "Ejer"; aoTexts[1] = "Adm. direktør"; aoTexts[2] = "Økonomichef"; aoTexts[3] = "Personalechef"; aoTexts[4] = "Bogholder / økonomimedarbejder"; aoTexts[5] = "Medhjælpende ægtefælle"; aoTexts[6] = "Andet, notér på næste side"; aoTexts[7] = "Ved ikke";
-        //get the previous selected value
-var single_selectedValue = "{{Q3x.Value}}"; SingleQuestion.onInit("Q3x","Titel", aoValues, aoTexts, single_selectedValue);
-        //append the single question inside the grid
+*In questionnaire template editor, choose the question I want to hide the Next button and then go to the Properties - Edit question properties - Language dependent - Select javascript property
+*Override quest.onInit function.
+*In that function, check if the Next button exists.
+*If it doesn't exist, do nothing, else disable the Next button, set the time out to number of seconds I want to hide the button, then show the button again.
-$(".grid_inner").append(SingleQuestion.getHTML());
+[[Image:HideNextButton Code.jpg]]
+== Code  ==
+<source lang="javascript">
+quest.onInit = function()
+{
+	var secsTimeout = 10;
+	if ( !document.getElementsByName('next') || document.getElementsByName('next').length == 0 )
+		// next button not available
+		return;
+	document.getElementsByName('next')[0].style.display='none';
+	setTimeout("document.getElementsByName('next')[0].style.display='';", secsTimeout*1000);
+}
+</source>
-$("input:text").width("400px"); } &lt;/source&gt;
+== Source ==
+Questionnaire Resource Id on cg site: 159730