How to code a key press to incorporate display logic? | XM Community
Question

How to code a key press to incorporate display logic?

  • 30 July 2020
  • 1 reply
  • 34 views

Hi everyone!
I'm trying to incorporate a key press with some display logic and am struggling a bit (I am new to Javascript).
Basically, I have a question, and if a participant presses a spacebar in response to this question, they get directed to one question, and if they don't, they get directed to another.
So far I have:
Qualtrics.SurveyEngine.addOnload(function() {
var qid = this.questionId;

document.onkeydown = function(event) {
console.log('keydown',event);
if (event.which == 32) {
event.preventDefault();
jQuery('#NextButton').click()

}
}

})

I have no idea how to incorporate the display logic I desire...can anyone help? Thank you!


1 reply

Userlevel 7
Badge +27

Hi there, if you still need, this can be put in place by adding Display Logic based off an Embedded Data field that gets updated when the spacebar is pressed.
First, go to the Survey Flow and create an Embedded Data field called "spacebar" and set its value to "no". Put this at the top of the Survey Flow.
Next, head over to the builder and create 2 questions. The 1st question will be what captures the spacebar press. In the JavaScript for this question, add the below:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

var qid = this.questionId;

document.onkeydown = function(event) {

console.log('keydown',event);

if (event.which == 32) {

event.preventDefault();
Qualtrics.SurveyEngine.setEmbeddedData("spacebar", "yes");
jQuery('#NextButton').click()

}

}

});
Then, for the 2nd question, add Display Logic and set it to display this question if the Embedded Data field of "spacebar" is Equal to "yes".

Leave a Reply