Use keyboard for answering Multiple Choice question | XM Community
Solved

Use keyboard for answering Multiple Choice question

PaulSchreuder72
Hi all! I'm wondering if it is possible to have participants answer a multiple choice question (2 answers) with the keyboard (for example the 'F' for answer 'no' and the 'J' for answer 'yes')? I'm not (very) familiar with Javascript, so if there's an existing script for it that would be even better than great! Happy to hear from you! Best regards, Paul
icon

Best answer by TomG 9 April 2020, 15:08

View original

24 replies

TomG
Rank
Userlevel 7
Badge +27
Yes, use a keypress event:
```
jQuery(document).keypress(function() {
//keypress code goes here
});
```
PaulSchreuder72
Hi Tom, thank you! I'm sure it's a proper solution. I will try to figure out where to fill in the 'yes' and 'no' and where to fill in the 'F' and 'J'. Should I fill in anything for 'document'?
TomG
Rank
Userlevel 7
Badge +27
> @PaulSchreuder72 said:
> Hi Tom, thank you! I'm sure it's a proper solution. I will try to figure out where to fill in the 'yes' and 'no' and where to fill in the 'F' and 'J'. Should I fill in anything for 'document'?

No, it is 'document' just as shown.
PaulSchreuder72
Super, thanks!
PaulSchreuder72
Hi Tom, or someone else who knows how to help me of course 🙂

I've tried to come up with the right script for allowing participants to respond to a 2-answer multiple choice question by using the keyboard. I would like to have participants use the keyboard 'J' for answer 'No' and the keyboard 'F' for answer 'Yes'. I've recoded the values of the answers to the question as Yes = 1 and No = 2 (also see attachment image:
!

However it still doesn't work. This is what the script looks like now:

Qualtrics.SurveyEngine.addOnload(function()
{
console.log("test");
jQuery(document).keypress(function(event) {
if(event.which==74){Qualtrics.SurveyEngine.setChoiceValueByRecodeValue(2,true)
}
if(event.which==70){Qualtrics.SurveyEngine.setChoiceValueByRecodeValue(1,true)
}
});
});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});

Is this script correct? It seems as if the script is not getting 'started'. Would be really happy to find a solution! Thank you, Paul
TomG
Rank
Userlevel 7
Badge +27
@PaulSchreuder72,

For starters, Qualtrics.SurveyEngine.setChoiceValueByRecodeValue(1,true) is wrong. It should be qobj.setChoiceValueByRecodeValue(1,true) where qobj is the question object (i.e., "this" in the addOnload function).

Also, "which" is deprecated so you should use "key" instead. It is a little easier anyway since you don't have to look up codes, just convert it to a consistent case (e.g., `var key = evt.key.toUpperCase();`)
PaulSchreuder72
Hi Tom, thanks for your continuous effort!

With regards to the first part of your comment:
I replaced
Qualtrics.SurveyEngine.setChoiceValueByRecodeValue(1,true)
by
qobj.setChoiceValueByRecodeValue(1,true)

So this part should be fine I think.

I'm not sure how to deal with the second part of your comment:

If I replace
(event.which==70) and (event.which==74)
by
var key = evt.key.toUpperCase();)

so therefor:

Qualtrics.SurveyEngine.addOnload(function()
{
console.log("test");
jQuery(document).keypress(function(event) {
if(event. var key = evt.key.toUpperCase();){qobj.setChoiceValueByRecodeValue(2,true)
}
if(event. var key = evt.key.toUpperCase();){qobj.setChoiceValueByRecodeValue(1,true)
}
});
});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});

I get an invalid code: "Invalid JavaScript! You cannot save until you fix all errors: Unexpected identifier" (and I'm feeling that both 'F' and 'J' are missing, but as you can tell bby now I'm a JavaScript ignorant). It doesn't necessarily have to be 'F' and 'J' that correspond with respectively 'Yes' and 'No'; it's just that these feel 'natural' when your hands are on the keyboard. Here's what the multiple choice question looks like: !
As mentioned before I applied recoded values to the answers (also see above), but if this should be different let me know.

It would be great if you could show me how to apply the second part of your comment. I really appreciate your help! Thanks, Paul
TomG
Rank
Userlevel 7
Badge +27
@PaulSchreuder72,

I didn't expect you to take me so literally. This is off the top of my head and untested, but should get you a lot closer:
```
Qualtrics.SurveyEngine.addOnload(function() {
var qobj = this;
jQuery(document).keypress(function(event) {
var key = event.key.toUpperCase();
if(key == "J") qobj.setChoiceValueByRecodeValue(1,true);
else if(key == "F") qobj.setChoiceValueByRecodeValue(2,true);
});
});
```
PaulSchreuder72
Hi Tom, thanks for your continuous effort!

With regards to the first part of your comment: I replaced Qualtrics.SurveyEngine.setChoiceValueByRecodeValue(1,true) by qobj.setChoiceValueByRecodeValue(1,true)

That would make this part okay, right?

I'm not sure how to deal with the second part of your comment: if I replace
(event.which==74)
for
var key = evt.key.toUpperCase();)

so therefor:

Qualtrics.SurveyEngine.addOnload(function()
{
console.log("test");
jQuery(document).keypress(function(event) {
if(event. var key = evt.key.toUpperCase();){qobj.setChoiceValueByRecodeValue(2,true)
}
if(event. var key = evt.key.toUpperCase();){qobj.setChoiceValueByRecodeValue(1,true)
}
});
});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});


I get an invalid code (and I'm feeling like the 'F' and 'J' are missing out, but as you can tell by now I'm a JavaScript ignorant).

Here's what the multiple choice question looks like: !

It doesn't necessarily have to be the letters 'F' and 'J' that correspond with respectively 'Yes' and 'No'; it's just that these feel 'natural' when your hands are on the keyboard.

Hopefully you can show me how to implement the second part of your comment. It's really appreciated! Thanks, Paul
PaulSchreuder72
Hi Tom, it works! However, I now find myself in the position that the 'timing question' that I added to the question to measure the amount of time it takes a respondent to click on the 'yes' or 'no' is not registered anymore. Apparently Qualtrics does not recognize/identify a keyboard command as a click. Would you know of any way to include this as well (perhaps by including JavaScript in the corresponding 'timing question')?

I'm thinking of having the 2-answer multiple choice questions auto advance to the next one after (for example) 5 seconds. I've been able to find this:

Qualtrics.SurveyEngine.addOnload(function()
{
var that = this;
this.questionclick = function(event,element){
if (element.type == 'radio') {
that.clickNextButton();
}
}

});

But I'm not sure how to combine this with the JavaScript you just created for me?

I can't tell how happy I would be if we were able to get both auto advance and the registration of the yes/no clicks by the keyboard! So I'm hoping you want to help me once more. Thank you, Paul
PaulSchreuder72

Hi Tom, would you think it is possible to have Qualtrics recognize/identify a keyboard command as a click? Best, Paul

TomG
Rank
Userlevel 7
Badge +27

Hi Tom, would you think it is possible to have Qualtrics recognize/identify a keyboard command as a click? Best, Paul

Not tested, but instead of setValueByRecodeValue you could do something like:
if(key == "J") jQuery("#"+qobj.questionId+" input:first").trigger("click");

PaulSchreuder72

Hi Tom, it's not working yet. Could this have something to do with the fact that there is no
(1,true)
in the JavaScript anymore? Could it help if this would be included somewhere and if so where?

TomG
Rank
Userlevel 7
Badge +27

As I said, it was untested. It turns out that the Timing Question works off a mouseup event instead of a click event. Other than that, triggering a click on the input elements has the same effect as setValueByRecodeValue.
So, a modification to the script I posted previously that registers a timing question 'click':
Qualtrics.SurveyEngine.addOnload(function() {
    var qobj = this;
    jQuery(document).keypress(function(event) {
        var key = event.key.toUpperCase();
        if(key == "J" || key == "F") {
            jQuery(this).trigger("mouseup");
            if(key == "J") qobj.setChoiceValueByRecodeValue(1,true);
            else qobj.setChoiceValueByRecodeValue(2,true);
        }
    });
});

PaulSchreuder72

Hi Tom, the word 'Wizard' next to your name is exactly right! This does exactly what I wanted it to do. Thank you so much, it's really appreciated! Paul

J

Hello both, sorry for "stealing" this thread. Is it possible to select by the choice text (e.g. set choice to be true when pressed "Yes" or "No")? I am setting up an experiment but with choices randomized (and also using a loop). Doing 

qobj.setChoiceValue(subid=1, true)
doesn't quite do the trick.

TomG
Rank
Userlevel 7
Badge +27

jmed7 - randomizing the choices doesn't change their choice ids. So, you can still set the choice value by id.

Dominik_G

Hello!
I am facing exactly the same issue as @PaulSchreuder72 so I found this thread very helpful. JavaScript is totally new for me and I am trying to incorporate some cognitive tasks into Qualtrics.
I followed your conversation and I managed to assign answers to keyboard buttons, however I am still not sure how to make Qualtrics recognize a pressed button as a click so the response time is measured.
If I interpreted your exchange correctly, this is the command I should use to do so :
Qualtrics.SurveyEngine.addOnload(function() {
  var qobj = this;
  jQuery(document).keypress(function(event) {
    var key = event.key.toUpperCase();
    if(key == "C") jQuery("#"+qobj.questionId+" input:first").trigger("click");
    else if(key == "N") jQuery("#"+qobj.questionId+" input:first").trigger("click");
  });N
});
Nevertheless, it doesn't work. Would that be possible to advise me on how to create this command in a way that it assigns keyword buttons to answers and identifies pressing a button as a click?
Best Regards, Dominik.

TomG
Rank
Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/36691#Comment_36691Read the accepted answer. You need to trigger a 'mouseup' event instead of a 'click' event.

J
Rank
Userlevel 2
Badge +1

Hi there! I have the following question in my survey. 

 

 

I added the following javascript to this question. 

Qualtrics.SurveyEngine.addOnload(function() {
    var qobj = this;
    jQuery(document).keypress(function(event) {
        var key = event.key.toUpperCase();
        if(key == "J" || key == "F") {
            jQuery(this).trigger("mouseup");
            if(key == "J") qobj.setChoiceValueByRecodeValue(1,true);
            else qobj.setChoiceValueByRecodeValue(2,true);
        }
    });
});

Based on the comments in this forum I thought this code would work for my purposes, however, it only works when I press the J key (option on the right is selected). When I press the F key nothing happens. Also, I would like that when they press one of these keys the page is submitted, so they move on to the next screen without having to click the next button at the bottom.

 

Thanks in advance!


 

 

J
Rank
Userlevel 2
Badge +1

I tested the survey a few more times (did not change the javascript or anything) and noticed that when I press the J key, sometimes the left option is selected, and sometimes the right option is. Again, the F key does nothing. I would like the J key to correspond to the option on the right, and the F key to correspond to the option on the left. Just thought I would provide this information for more context.

Nam Nguyen
Rank
Userlevel 7
Badge +20

Hi there! I have the following question in my survey. 

I added the following javascript to this question. 

Qualtrics.SurveyEngine.addOnload(function() {
    var qobj = this;
    jQuery(document).keypress(function(event) {
        var key = event.key.toUpperCase();
        if(key == "J" || key == "F") {
            jQuery(this).trigger("mouseup");
            if(key == "J") qobj.setChoiceValueByRecodeValue(1,true);
            else qobj.setChoiceValueByRecodeValue(2,true);
        }
    });
});

Based on the comments in this forum I thought this code would work for my purposes, however, it only works when I press the J key (option on the right is selected). When I press the F key nothing happens. Also, I would like that when they press one of these keys the page is submitted, so they move on to the next screen without having to click the next button at the bottom.

 

Thanks in advance!

The code set-up answer base on recode value so set recode value of your answer to 1&2 accordingly. 
Add clicknext button code to the event listener

Qualtrics.SurveyEngine.addOnload(function() {
    var qobj = this;
    jQuery(document).keypress(function(event) {
        var key = event.key.toUpperCase();
        if(key == "J" || key == "F") {
            jQuery(this).trigger("mouseup");
            if(key == "J") qobj.setChoiceValueByRecodeValue(1,true);
            else qobj.setChoiceValueByRecodeValue(2,true);
			qobj.clickNextButton();
        }
    });
});

 

-Nam Nguyen-
J
Rank
Userlevel 2
Badge +1

Thanks Nam Nguyen! Problem solved!

Nam Nguyen
Rank
Userlevel 7
Badge +20

Thanks Nam Nguyen! Problem solved!

Happy to help 👍

-Nam Nguyen-

Leave a Reply


Terms & Conditions