Quadratics: Replace Keyboard stroke for Mouse clicks - javascript

I am not advanced with Javascript. i was hoping for someone to simply explain the process to edit the following code.
this.hideNextButton();
this.hidePreviousButton();
var that = this;
Event.observe(document, 'keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 74: // 'j' was pressed
choiceID = 1;
break;
case 75: // 'k' was pressed
choiceID = 2;
break;
}
if (choiceID) {
Event.stopObserving(document, 'keydown', keydownCallback);
that.setChoiceValue(choiceID, true);
that.clickNextButton();
}
});
If a user wants to replace the click of a mouse with clicking a letter on the Keyboard, eg. Click J for the next question or to select yes, click A. I think that is what this code is doing but I'd like to pull it apart a bit to add or remove letters to complete additional tasks, such as next question etc.
Any help or pointing in the right direction is a help!

In the code you provided pressing 'j' or 'k' answers the current question by setting the choice value and goes to the next page. To add other keyboard presses you would additional cases to the switch using the appropriate keycode. For example, if you wanted 'j' to just go to the next page and 'a' to answer 'Yes', it would be something like this (remove the if(choiceID) section):
Event.observe(document, 'keydown', function keydownCallback(e) {
switch (e.keyCode) {
case 65: // 'a' was pressed
that.setChoiceValue(1, true);
break;
case 74: // 'j' was pressed
Event.stopObserving(document, 'keydown', keydownCallback);
that.clickNextButton();
}
});

You need to track pointed pointed element and call click event of pointed element when the key j is pressed.
var pointedElement;
document.onmousemove = function(e) {
pointedElement = e.srcElement;
}
document.onkeydown = function(e) {
switch (e.keyCode) {
case 74: // 'j' was pressed
pointedElement.click()
break;
}
}
Edit: My answer was just about the idea to change a click element in the whole window with another key but in your case you it is different. I can not help you by just looking this snippet but you need to change switch case block with the same functionality of buttons. What exactly those buttons are doing? You need to call the same functionality of next and previous keys are handling.

Related

Possibility to see participants' response when using workaround that does not involve embedded data in qualtrics

I've implemented the scripts mentioned by user1113568 (i.e., 'It used to be possible to setChoiceValue in Qualtrics. Is there a workaround that does not involve embedded data?'; Jan 20 18) and D. Sam (i.e., In Qualtrics, how to save a key response into an embedded data?; Feb 14-17) in qualtrics in order to register responses by key presses in qualtrics. Unfortunately the responses are not saved in my spss data file. Are both scripts not valid anymore due to changes by qualtrics, and are people familiar with an update?
Any help is much appreciated.
Best, Koen
script D. Sam In Qualtrics, how to save a key response into an embedded data?
`Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
this.hidePreviousButton();
var that = this;
Event.observe(document, 'keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 74: // 'j' was pressed
choiceID = 1;
break;
case 75: // 'k' was pressed
choiceID = 2;
break;
}
if (choiceID) {
Qualtrics.SurveyEngine.setEmbeddedData("choiceID",choiceID);
Event.stopObserving(document, 'keydown', keydownCallback);
that.setChoiceValue(choiceID, true);
that.clickNextButton();
}
});
});
`
script user1113568 It used to be possible to setChoiceValue in Qualtrics. Is there a workaround that does not involve embedded data?
`Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
this.hidePreviousButton();
var that = this;
Event.observe(document, 'keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 74: // 'j' was pressed
choiceID = 1;
break;
case 75: // 'k' was pressed
choiceID = 2;
break;
}
if (choiceID) {
Event.stopObserving(document, 'keydown', keydownCallback);
that.setChoiceValue(choiceID, true);
that.clickNextButton();
}
});
});
`

Qualtrics: using space bar to continue, study autoadvancing on next item if item left unanswered before space bar press

I'm very new to JavaScript, and I'm currently trying to add a custom code to my Qualtrics survey that makes it so pressing the spacebar continues the survey in the "Text/Graphic" question type. I have a code that should be working; however, I'm getting an "Unexpected token (" error.
Here is the code:
Qualtrics.SurveyEngine.addOnload(function()
{
document.addEventListener("keydown", function(e) {
if (e.keyCode === 32) {
function(){
that.clickNextButton();
}
}
}
});`
I also found this answer to a similar question from a couple of years back:
Here is a simplified version that works (updated to hide NextButton):
Qualtrics.SurveyEngine.addOnload(function() {
$('NextButton').hide();
document.on("keydown", function(e) {
if (e.keyCode === 13) $('NextButton').click();
});
});
This code, however, doesn't work at all in my survey (as if it wasn't even there).
Any help is much appreciated, thanks in advance!
____ Edit _____
The code I have now used is the following:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
Qualtrics.SurveyEngine.addOnReady(function() {
$('NextButton').hide();
document.on("keydown", function(e) {
if (e.keyCode === 32) $('NextButton').click();
});
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
The problem I have now is that the study autoadvances the next question whenever I press spacebar before ansewring a previous question.
Example
Question 1: Is the sentence you just saw a sensible continuation for the preceding sentence?
* participant presses space bar before answering the question with F for no and J for yes
* The study reminds the participant that they need to answer the question before proceeding to the next question
* Participant answers the question and the study automatically proceeds to the next question, because answering validates the question
--> the study only lets the participant see the next item for a second, and then autoadvances to the next item without the participant pressing any key.
The code I use for the F + J keys is the following:
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
this.hidePreviousButton();
var that = this;
Event.observe(document, 'keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 74: // 'f' was pressed
choiceID = 2;
break;
case 70: // 'j' was pressed
choiceID = 1;
break;
}
if (choiceID) {
Event.stopObserving(document, 'keydown', keydownCallback);
that.setChoiceValue(choiceID, true);
that.clickNextButton();
}
});
});
I think it doesn't work due to a timing issue. Use addOnReady instead:
Qualtrics.SurveyEngine.addOnReady(function() {
$('NextButton').hide();
document.on("keydown", function(e) {
if (e.keyCode === 32) $('NextButton').click();
});
});
Note: with split screen preview mode you have to click in the window first or it won't recognize the key press.
EDIT:
I couldn't recreate your problem (your code worked as is for me when I tried it). However, try the following. It is cleaner and consistent. If it works be sure to accept the answer.
Space bar question:
Qualtrics.SurveyEngine.addOnReady(function() {
$('NextButton').hide();
if($('PreviousButton')) $('PreviousButton').hide();
var evt = document.on('keydown', function(e) {
if (e.which == 32) { //space bar pressed
evt.stop();
$('NextButton').click();
}
});
});
Yes/No question:
Qualtrics.SurveyEngine.addOnReady(function() {
$('NextButton').hide();
if($('PreviousButton')) $('PreviousButton').hide();
var that = this;
var evt = document.on('keydown', function(e) {
var choiceID = null;
if(e.which == 70) choiceID = 1; //'f' was pressed
else if(e.which == 74) choiceID = 2; //'j' was pressed
if (choiceID) {
evt.stop();
that.setChoiceValue(choiceID, true);
$('NextButton').click();
}
});
});
You need to remove the function() around that.clicknextbutton(), and change that to this. that doesn't make sense unless it is a variable set to the this keyword. The function(){} syntax is used to define an expression in a parameter.
Qualtrics.SurveyEngine.addOnload(function(){
document.addEventListener("keydown", function(e) {
if (e.keyCode === 32) {
this.clickNextButton();
}
});
});

Qualtrics Javascript keyboard presses

I've been given some javascript code for recording keyboard presses in Qualtrics. Seems to work fine when I preview the survey, but as soon as I use the distribute survey link, it does not work at all.
I'm using this code for before the event I want to record 'x' keyboard presses for:
Qualtrics.SurveyEngine.addOnload(function()
{
Event.observe(document, 'keydown', function (e) {
switch (e.keyCode) {
case 88: // 'x' was pressed
var totalpresses = Qualtrics.SurveyEngine.getEmbeddedData("xhits");
if (totalpresses == "NaN"){totalpresses=1;}
totalpresses = parseInt(totalpresses);
totalpresses = totalpresses + 1;
Qualtrics.SurveyEngine.setEmbeddedData("xhits",totalpresses);
}
});
});
and i'm using this code for following the event:
Qualtrics.SurveyEngine.addOnload(function()
{
var totalpresses = Qualtrics.SurveyEngine.getEmbeddedData("xhits");
Qualtrics.SurveyEngine.setEmbeddedData("finalxhits", totalpresses);
which gives me 'xhits' for the section I need it for, but only when I preview the survey.
I am using embedded data in the survey flow to create 'xhits' and 'finalxhits', yet finalxhits doesn't seem to show a value either (not that this is the problem).
I am very new to javascript so would appreciate any help.
I'm not sure what is causing your issue (I haven't tried to recreate it), but try this:
Qualtrics.SurveyEngine.addOnload(function()
{
var totalpresses = parseInt("${e://Field/xhits}");
if (isNaN(totalpresses)) totalpresses = 0;
Event.observe(document, 'keydown', function (e) {
switch (e.keyCode) {
case 88: // 'x' was pressed
totalpresses = totalpresses + 1;
Qualtrics.SurveyEngine.setEmbeddedData("xhits",totalpresses);
}
});
});
Is that second piece of code attached to a subsequent question? I'm not sure what purpose it serves, but you can just do that assignment in the survey flow:
finalxhits = ${e://Field/xhits}

Javascript/jQuery prevent double event triggers

I have an html form.
It uses keyboard navigation (with arrow keys) to move between fields including the enter key.
It periodically needs to prompt the user for acceptance of information.
The enter key is picked up on both the button and in the form field.
Problem: When the user hits ENTER on the accept button it is triggering double events in my form. Shifting the focus 2 fields instead of 1.
I have code that demonstrates exactly what I'm talking about here:
Original Post http://jsfiddle.net/mcraig_brs/UgUUr/1/
Modified Post http://jsfiddle.net/mcraig_brs/UgUUr/2/
Here is the sample HTML:
<button id="myButton">Press Enter On Me</button><br>
<input type="text" id="text1" class="tInput" data-index="0"><br>
<input type="text" id="text2" class="tInput" data-index="1"><br>
<input type="text" id="text3" class="tInput" data-index="2"><br>
<div id="log"></div>
Here is the sample JS:
function log ( data ) {
$('#log').append(data + "<br>");
}
function focusOn(index) {
log("focusOn(index): " + index);
$('input.tInput').eq(index).focus();
}
function focusNext( currentIndex ) {
log("focusNext(currentIndex):" + currentIndex);
focusOn(currentIndex + 1);
}
function focusPrevious (currentIndex) {
log('focusPrevious(currentIndex):' + currentIndex);
focusOn(currentIndex - 1);
}
$('#myButton').on('click', function(e) {
log("event:click #myButton");
focusOn(0);
});
$('input.tInput').on('keyup', function(e) {
switch (e.which) {
case 13:
log("event:ENTER key in input.tInput");
focusNext($(this).data('index'));
break;
case 38:
log("event:UP ARROW key in input.tInput");
focusPrevious($(this).data('index'));
break;
case 40:
log('event:DOWN ARROW key in input.tInput');
focusNext($(this).data('index'));
break;
}
});
When I press "ENTER" while the focus is on the button in the current code I get the following output in the log div:
event:click #myButton
focusOn(index): 0
event:ENTER key in input.tInput
focusNext(currentIndex):0
focusOn(index): 1
(At the moment in jsFiddle the only way I can get to the button is to focus on the first text field and shift+tab back to it so it has focus, so that I can press ENTER on it. But in the live code it is automatically focused for the user.)
Question: How can I prevent this type of double event from triggering? I have tried e.stopPropagation() but that did not yield the results I was looking for. When the user pressed ENTER I want the focus to advance only one field.
I have been wrestling with this for a few days so any help would be greatly appreciated. Please note that if a user clicks on the button with the mouse it works properly, it is only the ENTER key that triggers the double event.
Note: I had to modify my question slightly to better convey the constraints.
keyup is triggering the issue, change it to keypress
$('input.tInput').on('keypress', function(e) {
switch (e.which) {
case 13:
log("event:ENTER key in input.tInput");
focusNext($(this).data('index'));
break;
}
});
from http://www.quirksmode.org/dom/events/keys.html
keypress
Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.
keyup
Fires when the user releases a key, after the default action of that key has been performed.
---- edit ---
To catch key press and keyup both, I would suggest to define it separately, http://jsfiddle.net/UgUUr/3/
$('input.tInput').on('keypress', function(e) {
switch (e.which) {
case 13:
log("event:ENTER key in input.tInput");
focusNext($(this).data('index'));
break;
}
});
$('input.tInput').on('keyup', function(e) {
switch (e.which) {
case 38:
log("event:UP ARROW key in input.tInput");
focusPrevious($(this).data('index'));
break;
case 40:
log('event:DOWN ARROW key in input.tInput');
focusNext($(this).data('index'));
break;
}
});
Use keypress event instead:
$('input.tInput').on('keypress', function(e) {
switch (e.which) {
case 13:
log("event:ENTER key in input.tInput");
focusNext($(this).data('index'));
break;
}
});
DEMO

jquery-autocomplete

when I hit "enter" to choose an item from the jquery-autocomplete results, the form submits. Why this happens....
i should get the data in the text field and on second enter the form should submit...
please suggest where to change in autocomplete.js
Thanks in advance
try this:
Find the keydown event on the li, in the autocomplete.js file and then place this line at the end of the keydown`s event handler (it may have some switch statement, you are interested about the 13[ enter key code]),:
return false;
ex:
.keydown(function(e) {
// track last key pressed
lastKeyPressCode = e.keyCode;
switch(e.keyCode) {
case 38: // up
e.preventDefault();
moveSelect(-1);
break;
case 40: // down
e.preventDefault();
moveSelect(1);
break;
case 9: // tab
case 13: // return
if( selectCurrent() ){
// make sure to blur off the current field
$input.get(0).blur();
e.preventDefault();
return false; // ADD THIS !
}
break;
default:
active = -1;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function(){onChange();}, options.delay);
break;
}
})
this will stop the event to further propagate and submit the form.

Categories

Resources