How to select answer options using arrow keys?

pyrotechnicarus
Can you provide a visual/screenshot of what you are looking for ? also let me know the layout you are using currently.

Deepak
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?

pyrotechnicarus
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!

Deepak
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!)

https://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!

Deepak
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.

pyrotechnicarus
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!

pyrotechnicarus
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!

This works! You're such a star, thank you for bearing with me! This will make my survey so much more user friendly. Thank you!!