Mandatory MCQ with timer | XM Community
Skip to main content
Question

Mandatory MCQ with timer


Forum|alt.badge.img+2

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.

 

 

 

8 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5804 replies
  • August 28, 2024

Post the code you used.

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


Forum|alt.badge.img+2
  • Author
  • Level 2 ●●
  • 10 replies
  • September 2, 2024

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 + " input[type='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.");
    });
});


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5804 replies
  • September 3, 2024

Try changing this line:

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

to:

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

 


Forum|alt.badge.img+2
  • Author
  • Level 2 ●●
  • 10 replies
  • September 23, 2024

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;
        }
        label[for="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 + " input[type='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}.`);
    });
});


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5804 replies
  • September 23, 2024

@supadhyay,

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


Forum|alt.badge.img+2
  • Author
  • Level 2 ●●
  • 10 replies
  • September 23, 2024

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

 

thanks 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5804 replies
  • September 23, 2024
supadhyay wrote:

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();

 


Forum|alt.badge.img+2
  • Author
  • Level 2 ●●
  • 10 replies
  • September 23, 2024

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;
        }
        label[for="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 + " input[type='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