I have a question which has 3 options. I want to add timer for 45 seconds for each question and auto-advance to the next question when the time is up. Each question is mandatory (force response) but if they don’t answer the question within 45 seconds, I want them to be moved to the next question. I have 5 MCQ questions in a block , all separated by a page break. I also want the questions to stay in the same block as I am scoring the questions in a block. I tried some codes on XM community which used Java script by adding a hidden option (or label the hidden option as no response) but he hidden option keeps showing up and the timer restarts. Any help is appreciated.

Mandatory MCQ with timer

Post the code you used.

What layout are you using (Simple or something else)?

Using the code below. It works fine if I am not making any selection but if I choose an options then the timer is starting and ending abruptly.

Qualtrics.SurveyEngine.addOnload(function() {
var questionId = this.getQuestionInfo().QuestionID;

console.log('Attempting to hide the "No Response" option...');

// Hide the "No Response" option by applying CSS
var css = `
#QID7-7-label {
display: none !important;
visibility: hidden !important;
}
input#QR~QID7~7 {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
label for="QR~QID7~7"] {
display: none !important;
visibility: hidden !important;
}
`;
jQuery("head").append("<style>" + css + "</style>");

console.log("CSS to hide 'No Response' option applied.");

// Start the timer for 45 seconds
var timer = setTimeout(function() {
var selected = jQuery("#" + questionId + " inputstype='radio']:checked").length > 0;

if (!selected) {
console.log("No option selected, moving to the next question.");
jQuery("#QID7-7-label").click();
jQuery("#NextButton").click();
}
}, 45000); // 45 seconds

console.log("Timer started for 45 seconds.");

// Listen for any selection to clear the timer if an option is selected
jQuery("#" + questionId + " input>type='radio']").on('change', function() {
clearTimeout(timer); // Clear the timer if an option is selected
console.log("Timer cleared due to selection.");
});
});

Try changing this line:

 jQuery("#QID7-7-label").click();

to:

 jQuery("#QID7-7-label").prop("checked",true);

Hi Tom,

Thanks for your reply. I kind of fixed the the previous issue but I have another issue with timer only. When I hit the submit button without answering the questions, it restarts the time again (so even if I hit the button at 20 seconds it restarts again from 45 seconds). However, the code works fine if I don't submit an answer within 45 seconds it then moves to next question.:

Attached code:

Qualtrics.SurveyEngine.addOnload(function() {
var questionId = this.getQuestionInfo().QuestionID;

console.log(`Setting up question ${questionId}...`);

// Hide the "No Response" option by applying CSS
var css = `
#QID8-5-label {
display: none !important;
visibility: hidden !important;
}
input#QR~QID8~5 {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
labelnfor="QR~QID8~5"] {
display: none !important;
visibility: hidden !important;
}
`;
jQuery("head").append("<style>" + css + "</style>");
console.log("CSS to hide 'No Response' option applied.");

// Track if the timer is cleared or if the question has moved forward
var timerCleared = false;
var questionCompleted = false;

// Function to move to the next question
function moveToNextQuestion() {
if (!questionCompleted) {
questionCompleted = true;
console.log(`Moving to the next question from question ${questionId}.`);
jQuery("#NextButton").click();
}
}

// Start the timer for 45 seconds
var timer = setTimeout(function() {
if (!timerCleared) {
var selected = jQuery("#" + questionId + " inputrtype='radio']:checked").length > 0;

if (!selected) {
console.log(`No option selected in question ${questionId}, moving to the next question.`);
jQuery("#QID8-5-label").click(); // Optional click on "No Response"
moveToNextQuestion();
}
}
}, 45000); // 45 seconds

console.log(`Timer started for 45 seconds for question ${questionId}.`);

// Listen for any selection to clear the timer if an option is selected
jQuery("#" + questionId + " inputetype='radio']").on('change', function() {
if (!timerCleared) {
clearTimeout(timer); // Clear the timer if an option is selected
timerCleared = true; // Ensure the timer is not restarted
console.log(`Timer cleared due to selection in question ${questionId}.`);
}
});

// Cleanup event listeners and timer on question unload
Qualtrics.SurveyEngine.addOnUnload(function() {
clearTimeout(timer); // Ensure the timer is cleared on unload
jQuery("#" + questionId + " inputstype='radio']").off('change');
console.log(`Cleaned up for question ${questionId}.`);
});
});

@supadhyay,

I suggest you disable the Next button to start, then enable it when a choice is selected or the question times out.

Is there a way to do that? How to incorporate that in my code?

thanks

Is there a way to do that? How to incorporate that in my code?

thanks

At the beginning of your JS add:

var qobj = this;
qobj.disableNextButton();

In your moveToNextQuestion function add:

qobj.enableNextButton();

I added the code you suggested above as follows (showing the final code). The next button still appears and timer is resetting after submitting (without hitting the answer):

Qualtrics.SurveyEngine.addOnload(function() {
var questionId = this.getQuestionInfo().QuestionID;

console.log(`Setting up question ${questionId}...`);


   //hide next button
   var qobj = this;
qobj.disableNextButton();

// Hide the "No Response" option by applying CSS
var css = `
#QID8-5-label {
display: none !important;
visibility: hidden !important;
}
input#QR~QID8~5 {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
labelofor="QR~QID8~5"] {
display: none !important;
visibility: hidden !important;
}
`;
jQuery("head").append("<style>" + css + "</style>");
console.log("CSS to hide 'No Response' option applied.");

// Track if the timer is cleared or if the question has moved forward
var timerCleared = false;
var questionCompleted = false;

// Function to move to the next question
function moveToNextQuestion() {
if (!questionCompleted) {
questionCompleted = true;
console.log(`Moving to the next question from question ${questionId}.`);
jQuery("#NextButton").click();
qobj.enableNextButton();
}
}

// Start the timer for 45 seconds
var timer = setTimeout(function() {
if (!timerCleared) {
var selected = jQuery("#" + questionId + " inputbtype='radio']:checked").length > 0;

if (!selected) {
console.log(`No option selected in question ${questionId}, moving to the next question.`);
jQuery("#QID8-5-label").click(); // Optional click on "No Response"
moveToNextQuestion();
}
}
}, 45000); // 45 seconds

console.log(`Timer started for 45 seconds for question ${questionId}.`);

// Listen for any selection to clear the timer if an option is selected
jQuery("#" + questionId + " input�type='radio']").on('change', function() {
if (!timerCleared) {
clearTimeout(timer); // Clear the timer if an option is selected
timerCleared = true; // Ensure the timer is not restarted
console.log(`Timer cleared due to selection in question ${questionId}.`);
}
});

// Cleanup event listeners and timer on question unload
Qualtrics.SurveyEngine.addOnUnload(function() {
clearTimeout(timer); // Ensure the timer is cleared on unload
jQuery("#" + questionId + " input/type='radio']").off('change');
console.log(`Cleaned up for question ${questionId}.`);
});
});

Console error:

Timer started for 45 seconds for question .
VM1295:74 Cleaned up for question .
VM1296:74 Cleaned up for question .
VM1318:5 Setting up question ...
VM1318:29 CSS to hide 'No Response' option applied.
VM1318:59 Timer started for 45 seconds for question .
VM1323:5 Setting up question ...
VM1323:29 CSS to hide 'No Response' option applied.
VM1323:59 Timer started for 45 seconds for question

Leave a Reply

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded