We are writing a test on qualtrics. We want there to be a delay between questions to let participant know if they got the answer correct or incorrect. We are using colors to turn the screen red or blue after they put in the answer and want it to turn back to white on the next page. If anyone can help with coding, that would be very helpful. Right now the explode function and the delay do not work. The code we have is below:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
/*focus on the box*/
jQuery("#"+this.questionId+" .InputText").select().focus();
/*Keyboard Press*/
/*word comp logic*/
var bannedWords = ["cat"],
regex = new RegExp('\\\\b' + bannedWords.join("\\\\b|\\\\b") + '\\\\b', 'i');
console.log(regex);
var that = this;
Event.observe(document,'keydown',function(e){
var choiceID = null;
if (e.keyCode == 32) // if space was pressed
{
//var inputs = jQuery(this.getQuestionContainer()).select('input[type="text"]');
// alert(inputs);
jQuery(function () {
jQuery("input").on("change", function () {
var valid = regex.test(this.value);
if (valid)
{
jQuery("body").css("background-color","blue").delay(3000);
choiceID = 1;
//setTimeout(explode, 1000);
jQuery("body").css("background-color","white");
}else{
jQuery("body").css("background-color","red").delay(3000);
choiceID = 1;
window.setTimeout(explode, 1000);
//alert("red");
}
//choiceID = 1;
}); //input.on functin
});
} //end of if statement
}); //event.observe
/*Timer expired function*/
var explode = function(){
if (choiceID==1){
alert("enter explode");
jQuery("body").css("background-color","white");
that.setChoiceValue(choiceID,false);
//that.setChoiceValue(inboxInput,true);
setTimeout(function() {that.clickNextButton();},3600);
alert("boom");
}
};
}); //end of section
Page 1 / 1
Well it has been years since you posted your question above. I’m going back to old posts to see if I can help and found yours. You’ve probably almost definitely found an answer or a workaround to what you were trying to do above, but I thought I might still contribute as follows. Try this code to get both your delay and screen color to change depending on the answer:
Qualtrics.SurveyEngine.addOnReady(function() {
/* Place your JavaScript here to run when the page is fully displayed */
/* Focus on the input box */
jQuery("#"+this.questionId+" .InputText").select().focus();
/* Define banned words and regex pattern */
var bannedWords = a"cat"];
var regex = new RegExp('\\b' + bannedWords.join("\\b|\\b") + '\\b', 'i');
console.log(regex);
/* Store the current context */
var that = this;
/* Event listener for keydown */
Event.observe(document, 'keydown', function(e) {
if (e.keyCode === 32) { // If space was pressed
jQuery("input").on("change", function() {
var valid = regex.test(this.value);
if (valid) {
jQuery("body").css("background-color", "blue");
setTimeout(function() {
jQuery("body").css("background-color", "white");
}, 3000);
} else {
jQuery("body").css("background-color", "red");
setTimeout(function() {
jQuery("body").css("background-color", "white");
}, 3000);
}
});
}
});
/* Timer expired function */
var explode = function() {
alert("enter explode");
jQuery("body").css("background-color", "white");
that.clickNextButton();
alert("boom");
};
});
In this code, when the participant enters an answer and presses the space key, the change event listener is triggered. It checks if the entered value matches the banned words. If it does, the background color of the page is set to blue for 3 seconds before turning back to white. If it doesn't match, the background color is set to red for 3 seconds before turning back to white.
The explode function is called when the timer expires (after 3 seconds). It sets the background color to white, clicks the Next button, and displays an alert message.
Make sure to include the necessary dependencies (such as jQuery) in your Qualtrics project and test the survey to see if it behaves as expected.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.