Difference between revisions of "Hide Next button in n seconds"

From Catglobe Wiki
Jump to: navigation, search
(New page: == 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:Questi...)
 
 
(12 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
== Challenge  ==
 
== 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

Latest revision as of 05: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

HideNextButton1.jpg
HideNextButton2.jpg

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.

HideNextButton Code.jpg

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

Retrieved from "http://wiki.catglobe.com/index.php?title=Hide_Next_button_in_n_seconds&oldid=23779"