Mark answer option with keyboard - Revision history

Nguyentrantri at 03:16, 17 October 2013

2013-10-17T03:16:13Z

← Older revision		Revision as of 03:16, 17 October 2013
Line 1:		Line 1:
	== Challenge ==		== Challenge ==

	In order to allow the respondent to be able to answer a question by hitting a button on his keyboard.		In order to allow the respondent to be able to answer a question by hitting a button on his keyboard.

	As a questionnaire creator		As a questionnaire creator

	I want to specify both which key on the keyboard that should be used, and which answer option that should be answered		I want to specify both which key on the keyboard that should be used, and which answer option that should be answered

			== Example ==

	~~== Example ==~~		[[File:MakeAnswerOptionWithKeyboard.jpg]]
	[[~~Image~~:MakeAnswerOptionWithKeyboard.jpg]]

	== Solution ==		== Solution ==

	*Add a Single question to Questionnaire editor like below		*Add a Single question to Questionnaire editor like below
	*Go to menu Properties -> Question scripts -> Java script tab -> Input script		*Go to menu Properties -> Question scripts -> Java script tab -> Input script

	[[~~Image~~:MakeAnswerOptionWithKeyboard Code.jpg]]		[[File:MakeAnswerOptionWithKeyboard Code.jpg]]

			== Code ==

	~~== Code ==~~		<source lang="javascript">
	<source lang="javascript~~" line="1~~">
	//which key on the keyboard that should mark the answer option. The code 32 refers to the space key		//which key on the keyboard that should mark the answer option. The code 32 refers to the space key
	var keyCodetoReactOn = 32;		var keyCodetoReactOn = 32;
Line 43:		Line 47:
	function myHandler(e)		function myHandler(e)
	{		{
	if (displayKeyCode)		if (displayKeyCode)
	alert(e.keyCode);		alert(e.keyCode);
	if (e.keyCode == keyCodetoReactOn)		if (e.keyCode == keyCodetoReactOn)
	recognize();		recognize();
	}		}
	function recognize()		function recognize()
	{		{
	quest.options[answerOptionIndexToCheck].checked = true;		quest.options[answerOptionIndexToCheck].checked = true;
	document["query"]["QUESTION." + qLabel][answerOptionIndexToCheck].checked = true;		document["query"]["QUESTION." + qLabel][answerOptionIndexToCheck].checked = true;
	moveForward();		moveForward();
	}		}
	function moveForward()		function moveForward()
	{		{
	document["query"]["dir"].value = "next";		document["query"]["dir"].value = "next";
	document["query"].submit();		document["query"].submit();
	}		}
	question.prototype.getNavigationPanel = function()		question.prototype.getNavigationPanel = function()
	{		{
	var sres = "";		var sres = "";

	if (this.backvisible) sres += "<input type=\"button\" name=\"back\" value=\"" + this.backtext + "\" tabindex=1000 onclick=\"" + this.reference + ".back();\">";		if (this.backvisible) sres += "<input type=\"button\" name=\"back\" value=\"" + this.backtext + "\" tabindex=1000 onclick=\"" + this.reference + ".back();\">";
	if (this.resetvisible) sres += "<input type=\"button\" name=\"reset\" value=\"" + this.resettext + "\" tabindex=1001 onclick=\"" + this.reference + ".reset();\">";		if (this.resetvisible) sres += "<input type=\"button\" name=\"reset\" value=\"" + this.resettext + "\" tabindex=1001 onclick=\"" + this.reference + ".reset();\">";
	if (this.closevisible) sres += "<input type=\"button\" name=\"close\" value=\"" + this.closetext + "\" tabindex=1002 onclick=\"" + this.reference + ".close();\">";		if (this.closevisible) sres += "<input type=\"button\" name=\"close\" value=\"" + this.closetext + "\" tabindex=1002 onclick=\"" + this.reference + ".close();\">";
	sres += "<input type=\"button\" name=\"spaceHandler\" onclick=\"recognize();\" onkeydown=\"return myHandler(event)\" value=\"" + buttonText + "\" tabindex=0>";		sres += "<input type=\"button\" name=\"spaceHandler\" onclick=\"recognize();\" onkeydown=\"return myHandler(event)\" value=\"" + buttonText + "\" tabindex=0>";
	if (this.nextvisible) sres += "<input type=\"submit\" name=\"next\" onkeydown=\"return myHandler(event)\" value=\"" + this.nexttext + "\" tabindex=0>";		if (this.nextvisible) sres += "<input type=\"submit\" name=\"next\" onkeydown=\"return myHandler(event)\" value=\"" + this.nexttext + "\" tabindex=0>";
	return sres;		return sres;
	}		}
	question.prototype.onInit = function()		question.prototype.onInit = function()
	{		{
	document["query"]["spaceHandler"].focus();		document["query"]["spaceHandler"].focus();
	}		}
	</source>		</source>

Cg van: /* Code */

2012-02-02T03:53:28Z

Code

← Older revision		Revision as of 03:53, 2 February 2012
Line 32:		Line 32:

	//the question label of the question where you run the script.		//the question label of the question where you run the script.
	var qLabel = "Q1";		var qLabel = "Q_Single_MakeAOWithKeyboard";

	//the text that should be on the Next button.		//the text that should be on the Next button.

Cg van: /* Solution */

2012-02-02T03:47:33Z

Solution

← Older revision		Revision as of 03:47, 2 February 2012
Line 13:		Line 13:
	*Go to menu Properties -> Question scripts -> Java script tab -> Input script		*Go to menu Properties -> Question scripts -> Java script tab -> Input script

	[[~~IMG~~:MakeAnswerOptionWithKeyboard Code.jpg]]		[[Image:MakeAnswerOptionWithKeyboard Code.jpg]]

	== Code ==		== Code ==

Cg van: /* Solution */

2012-02-02T03:46:09Z

Solution

← Older revision		Revision as of 03:46, 2 February 2012
Line 11:		Line 11:
	== Solution ==		== Solution ==
	*Add a Single question to Questionnaire editor like below		*Add a Single question to Questionnaire editor like below
	*Go to menu Properties -> Question scripts -> Java script tab -> Input script		*Go to menu Properties -> Question scripts -> Java script tab -> Input script

			[[IMG:MakeAnswerOptionWithKeyboard Code.jpg]]

	== Code ==		== Code ==
	<source lang="javascript" line="1">		<source lang="javascript" line="1">

Cg van: /* Example */

2012-02-02T03:45:31Z

Example

← Older revision		Revision as of 03:45, 2 February 2012
Line 7:		Line 7:

	== Example ==		== Example ==
	[[Image:~~MapKey_Before~~.~~JPG‎~~ ]]		[[Image:MakeAnswerOptionWithKeyboard.jpg]]

	== Solution ==		== Solution ==

Cg van at 03:10, 2 February 2012

2012-02-02T03:10:27Z

← Older revision		Revision as of 03:10, 2 February 2012
Line 1:		Line 1:
	== Challenge ==		== Challenge ==
	~~You want~~ the respondent to be able to answer a question by hitting a button on his keyboard. ~~You can~~ specify both which key on the keyboard that should be used, and which answer option that should be answered.		In order to allow the respondent to be able to answer a question by hitting a button on his keyboard.

			As a questionnaire creator

			I want to specify both which key on the keyboard that should be used, and which answer option that should be answered

	== Example ==		== Example ==
	[[Image:MapKey_Before.JPG‎ ]]		[[Image:MapKey_Before.JPG‎ ]]

			== Solution ==
			*Add a Single question to Questionnaire editor like below
			*Go to menu Properties -> Question scripts -> Java script tab -> Input script
	== Code ==		== Code ==
	<source lang="javascript" line="1">		<source lang="javascript" line="1">
Line 63:		Line 72:
	}		}
	</source>		</source>

			== Source ==

			Questionnaire Resource Id on cg site: 159730

Catglobe: New page: == Challenge == You want the respondent to be able to answer a question by hitting a button on his keyboard. You can specify both which key on the keyboard that should be used, and which ...

2009-03-02T10:54:15Z

New page: == Challenge == You want the respondent to be able to answer a question by hitting a button on his keyboard. You can specify both which key on the keyboard that should be used, and which ...

New page

== Challenge ==
You want the respondent to be able to answer a question by hitting a button on his keyboard. You can specify both which key on the keyboard that should be used, and which answer option that should be answered.
== Example ==
[[Image:MapKey_Before.JPG‎ ]]
== Code ==
<source lang="javascript" line="1">
//which key on the keyboard that should mark the answer option. The code 32 refers to the space key
var keyCodetoReactOn = 32;

//enabels you to find out which numerical codes that belongs to which keys on the keyboard.
//Change false into true, and you will have a dialog that shows you the key code each time you hit a key.
//When you have found out which code that should mark the answer option, you change true back to false (mostly use for debugging)
var displayKeyCode = false;

//information on which answer option that should be marked when the respondent uses his keyboard.
//The answer option list has an index starting with zero when you are referring to answer options with this script.
//The number 0 therefore refers to the answer option with the value 1.
//If you want to refer to an answer option with the value 99, you write 98 in the script.
var answerOptionIndexToCheck = 0;

//the question label of the question where you run the script.
var qLabel = "Q1";

//the text that should be on the Next button.
//Note that this text will be the same for all languages if your questionnaire is programmed in multiple languages.
var buttonText = "Recognize";

//It is advisable that you hide the Next button on questions where you use this script.
// Otherwise the respondent will have two buttons, which can be confusing

function myHandler(e)
{
if (displayKeyCode)
alert(e.keyCode);
if (e.keyCode == keyCodetoReactOn)
recognize();
}
function recognize()
{
quest.options[answerOptionIndexToCheck].checked = true;
document["query"]["QUESTION." + qLabel][answerOptionIndexToCheck].checked = true;
moveForward();
}
function moveForward()
{
document["query"]["dir"].value = "next";
document["query"].submit();
}
question.prototype.getNavigationPanel = function()
{
var sres = "";

if (this.backvisible) sres += "<input type=\"button\" name=\"back\" value=\"" + this.backtext + "\" tabindex=1000 onclick=\"" + this.reference + ".back();\">";
if (this.resetvisible) sres += "<input type=\"button\" name=\"reset\" value=\"" + this.resettext + "\" tabindex=1001 onclick=\"" + this.reference + ".reset();\">";
if (this.closevisible) sres += "<input type=\"button\" name=\"close\" value=\"" + this.closetext + "\" tabindex=1002 onclick=\"" + this.reference + ".close();\">";
sres += "<input type=\"button\" name=\"spaceHandler\" onclick=\"recognize();\" onkeydown=\"return myHandler(event)\" value=\"" + buttonText + "\" tabindex=0>";
if (this.nextvisible) sres += "<input type=\"submit\" name=\"next\" onkeydown=\"return myHandler(event)\" value=\"" + this.nexttext + "\" tabindex=0>";
return sres;
}
question.prototype.onInit = function()
{
document["query"]["spaceHandler"].focus();
}
</source>