I have a survey of multiple choice questions in which participants can select two answer options using the left and right arrow keys, which then submits the page. Currently the code I'm using is this excellent example (also copied below for clarity).
It's working well, but what I want it to do is to visibly select (i.e. make the usual choice selection circle appear next to the answer) the participants' choice before it submits the page, so they can see which one they chose. Currently, while the choice is recorded on the back end, the question advances without a visual indication of the choice.
Is this possible? I'm a Javascript newbie, so I've been playing around with focus etc without much success
Qualtrics.SurveyEngine.addOnload(function() { var qid = this.questionId;
document.onkeydown = function(event) { console.log('keydown',event);
if (event.which == 37) { event.preventDefault();
Qualtrics.SurveyEngine.registry[qid].setChoiceValue(1, true);
jQuery('#NextButton').click();
} else if (event.which == 39) { event.preventDefault();
Qualtrics.SurveyEngine.registry[qid].setChoiceValue(2, true);
jQuery('#NextButton').click(); } }
});
How to select answer options using arrow keys?
+1
+46pyrotechnicarus
Can you provide a visual/screenshot of what you are looking for ? also let me know the layout you are using currently.
+1Deepak
Certainly! Each question layout looks like this: 
Practically, this is one 'block', with a question with the participant image and a multiple choice question with two (horizontal) options. I'd like participants to be able to select either of the options with the left or right arrow keys, and for it to look like this for a second or so (in this example, after pressing the right arrow key): 
Before the page is submitted automatically.
In terms of where the code is, it's in the Javascript section of each question.
Is that possible?
+46pyrotechnicarus
You can use the below code:
Qualtrics.SurveyEngine.addOnload(function() { var qid = this.questionId;
document.onkeydown = function(event) { console.log('keydown',event);
if (event.which == 37) { event.preventDefault();
Qualtrics.SurveyEngine.registry[qid].setChoiceValue(1, true);
setTimeout(function() { jQuery('#NextButton').click();
}, 3000);
} else if (event.which == 39) { event.preventDefault();
Qualtrics.SurveyEngine.registry[qid].setChoiceValue(2, true);
setTimeout(function() { jQuery('#NextButton').click();
}, 3000); } }
});
I have delayed to go to next page by 3 seconds. You can change it.
Hope it helps!
+1Deepak
Thank you for the example! However, it doesn't quite solve the problem- with this new code, while the submission of the page is delayed after the key press, there is no visual change to the question after it is pressed but before the page is submitted. In the example above, it looks like the first screenshot until the page submits 3 seconds later, without the answer indicator appearing. Instead, I'd like it to look like the second screenshot during those 3 seconds, an appearance which at the moment I've only been able to achieve by physically clicking.
Is there any way to visually show which answer the ChoiceValue is changed to in the code?
(Also, noting that I'm testing these through the Preview Block function on a Google Chrome browser- if it's working on another browser, please let me know!)
+46https://community.qualtrics.com/XMcommunity/discussion/comment/51665#Comment_51665pyrotechnicarus You can use the below code, its working on all browsers.
Qualtrics.SurveyEngine.addOnload(function() { var qid = this.questionId;
document.onkeydown = function(event) { console.log('keydown',event);
if (event.which == 37) { event.preventDefault();
jQuery("#"+qid+"").find('label')['0'].attributes.class.nodeValue="SingleAnswer LabelPositionBELOW ChoiceTextPositionLeft q-checked";
setTimeout(function() { jQuery('#NextButton').click();
}, 3000);
}
else {
jQuery("#"+qid+"").find('label')['0'].attributes.class.nodeValue="SingleAnswer LabelPositionBELOW ChoiceTextPositionLeft";
}
if (event.which == 39) {event.preventDefault();
jQuery("#"+qid+"").find('label')['2'].attributes.class.nodeValue="SingleAnswer LabelPositionBELOW ChoiceTextPositionLeft q-checked";
setTimeout(function() { jQuery('#NextButton').click();
}, 3000); }
else {
jQuery("#"+qid+"").find('label')['2'].attributes.class.nodeValue="SingleAnswer LabelPositionBELOW ChoiceTextPositionLeft";
}
}
});
Hope it helps!
+1Deepak
Thank you again for all your help! Unfortunately, this one doesn't work, either- it seems to do the same thing, with just a delay without a visible change after the button press.
If it would help, I've made a minimal reproducible example here- it has the code from your last answer implemented in the question.
+46pyrotechnicarus
You can check the below link it's working.
Preview - Online Survey Software | Qualtrics Survey Solutions
I have used the classic layout if that's what is missing here.
Hope it helps!
+46pyrotechnicarus
You have used the flat layout I just saw in your image. You can check the below code.
Qualtrics.SurveyEngine.addOnload(function() { var qid = this.questionId;
document.onkeydown = function(event) { console.log('keydown',event);
if (event.which == 37) { event.preventDefault();
jQuery("#"+qid+"").find('label')[1].attributes[1].nodeValue="q-radio q-checked";
setTimeout(function() { jQuery('#NextButton').click();
}, 3000);
}
else {
jQuery("#"+qid+"").find('label')[1].attributes[1].nodeValue="q-radio";
}
if (event.which == 39) {event.preventDefault();
jQuery("#"+qid+"").find('label')[3].attributes[1].nodeValue="q-radio q-checked";
setTimeout(function() { jQuery('#NextButton').click();
}, 3000); }
else {
jQuery("#"+qid+"").find('label')[3].attributes[1].nodeValue="q-radio"
}
}
});
Hope it helps!
+1This works! You're such a star, thank you for bearing with me! This will make my survey so much more user friendly. Thank you!!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.