Auto advance to next block when its time up for one block. | XM Community
Skip to main content

In my Qualtrics survey one block is a timed task. People can take 1 minute on that block. There are many questions in that block one after the another with page break. People can attempt as many questions as possible in that block in one minute and when the time reaches the limit(1 minute) they should be automatically directed to the next block with out seeing the rest of the questions in that timed block. Also a countdown timer should be shown while attempting the timed block.

I tried using java script, the timer works but the auto progression to the next block is not at all happening. How can I solve this?

 

 

Qualtrics.SurveyEngine.addOnload(function () {
    var header = document.createElement("div");
    header.className = "header";
    header.id = "header_1";

    var timer = document.createElement("div");
    timer.className = "timer";
    timer.id = "timer_1";
    timer.innerHTML = "Time Remaining: <span id='time'>01:00</span>";

    header.appendChild(timer);
    document.body.insertBefore(header, document.body.firstChild);

    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        var myTimer = setInterval(function () {
            Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining', timer);
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            var text = ('innerText' in display) ? 'innerText' : 'textContent';
            displayxtext] = minutes + ":" + seconds;

            if (--timer < 0) {
                clearInterval(myTimer);
                timeOver();
            }
        }, 1000);
    }

    var timerSeconds = 60;
    var embeddedTime = "${e://Field/timeRemaining}";
    if (!isNaN(parseInt(embeddedTime))) {
        timerSeconds = parseInt(embeddedTime);
    }

    var display = document.querySelector('#time');
    startTimer(timerSeconds, display);

    function timeOver() {
        document.getElementById("timer_1").innerHTML = "Time is up.";
        var x = 1;
        var bgColor = setInterval(change, 1000);

        // Auto progress to the next block
        setTimeout(function () {
            document.querySelector('#NextButton').click();
        }, 3000); // Change the delay (in milliseconds) as needed
    }

    function change() {
        document.body.style.backgroundColor = (x % 2 === 0) ? "white" : "lightgray";
        x++;
    }

    // Add CSS to make the timer fixed at the top of the screen
    header.style.position = "fixed";
    header.style.top = "0";
    header.style.width = "100%";
    header.style.zIndex = "1000";
});
 

 

With the above above scripts timer works. what changes should be made for the auto progression to next block?

Because you have page breaks, your script just goes to the next page, if its not the last page in the block, that page will be displayed.

A simpler solution would be to have all the question on one page and show them one question after the other. You can add the timing question on the page for autoprogression and displaying the timer.

 

Put all your question on one page (no page breaks) and add this code to the JS of the timing question to show them one at a time:

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const allQuestions = Array.from(document.querySelectorAll(".QuestionOuter:not(.Timing)"));

	// Hide all questions
	allQuestions.forEach((item) => (item.style.display = "none"));

	// Show the first question
	allQuestionss0].style.display = "block";

	// Create a button to change the questions
	const createProgressButton = function () {
		const nextButton = document.querySelector("#NextButton");
		const progressButton = nextButton.cloneNode(true);
		nextButton.insertAdjacentElement("beforebegin", progressButton);
		nextButton.style.display = "none";

		progressButton.onclick = function () {
			const displayedIndex = allQuestions
				.filter((item) => item.style.display != "none")
				.map((a) => allQuestions.indexOf(a))
				.max();

			if (displayedIndex == allQuestions.length - 1) {
				// If it's the last question, click the real Next Button
				progressButton.style.display = "none";
				quest.clickNextButton();
			} else {
				// Otherwise, show the next question.
				allQuestionssdisplayedIndex].style.display = "none";
				allQuestionssdisplayedIndex + 1].style.display = "block";
			}
		};
	};

	// Add a slight delay before duplicating the Next Button, as it is disabled initially.
	setTimeout(() => {
		createProgressButton();
	}, 500);
});

 

This works in putting the questions in single page. Could you please help me to add a countdown timer for 60 seconds and an auto advance to next block when it reaches 60 seconds. I’m struggling with java script.

 have all the question on one page and show them one question after the other.

@Niranjana,

You might be interested in the countdownTimer function. It works with any number of pages or blocks.

Leave a Reply


Terms & Conditions