Hide Next button in n seconds: Difference between revisions

Revision as of 03:58, 12 February 2009

Challenge

In order to not allow respondent click on the Next button in a period of t
As a questionnaire creator
I want to hide the Next button in some seconds

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
Create a onInit() function.
In that function, check if the Next button existed.
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

<file>quest.onInit = function() {

var secsTimeout = 10;

if ( !document.getElementsByName('next') || document.getElementsByName('next').length == 0 ) 
{
// next button not available
return;
}
else
{
document.getElementsByName('next')[0].style.display='none';
}

var timeout = setTimeout("document.getElementsByName('next')[0].style.display=;", secsTimeout*1000);

}</file>

@@ Line 10: / Line 10: @@
 *If it doesn't exist, do nothing, else disable the Next button, set the time&nbsp;out to number of seconds&nbsp;I want to hide the&nbsp;button, then show the button again.&nbsp;&nbsp;
-== Code ==
+== Code  ==
-&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) ); }
+<file>quest.onInit = function()
+{
+ var secsTimeout = 10;
-                //handle change event to change the value of the single question
+ if ( !document.getElementsByName('next') || document.getElementsByName('next').length == 0 )
+ {
+ // next button not available
+ return;
+ }
+ else
+ {
+ document.getElementsByName('next')[0].style.display='none';
+ }
-list.change( function() { $("input:hidden").each( function(i) { if ($(this).attr("name") == SingleQuestion.label) $(this).val(list.val());
+ var timeout = setTimeout("document.getElementsByName('next')[0].style.display='';", secsTimeout*1000);
-} );
+}</file>
-} ); 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
-$(".grid_inner").append(SingleQuestion.getHTML());
-$("input:text").width("400px"); } &lt;/source&gt;