Creating Button to redirect to a specific question and retry this question

Thank you for the comment, but one small issue, I need to have all three questions in the same page, would that be possible? 

But I wanted to say for each question, it worked really well!!! Thank you soooooooooo much!!!!!!!!!!!

I am trying to learn JavaScript more. Is there any resources I can refer to, so that I can learn to customize such things?

Also, sorry for multiple comments. I am not sure why I am unable to delete my previous comments. 

I want them to have the option of having the button only if they make a mistake. Not if they do not make a mistake. Is that possible to code? Please let me know. 

1. Having all three questions on the same page - Yes, you can do that. Just ensure, that the intro question is that the top, followed by all the three questions, and that you set up the appropriate validations.
2. Having the button only show up if they answer incorrectly - Yes, that’s also possible. However, the JS is either too complex or a little hacky and therefore wouldn’t recommend it. Though, I’ve added it at the end.
3. This seems like an academic study where you plan to ensure that the respondents have understood the study or not. If that’s the case, I wouldn’t go this route. Instead, I would let them asnwer whatever they want and screen them out, if they fail. The reasoning is that, if they are not paying attention at this point, how can you expect them to do so later. 

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qc = quest.getQuestionContainer();

	qc.style.display = "none";

	const toggleButton = document.createElement("button");
	toggleButton.textContent = "Show Instructions";
	toggleButton.style.display = "none";

	toggleButton.onclick = function () {
		if (qc.style.display == "none") {
			qc.style.display = "";
			toggleButton.textContent = "Hide Instructions";
		} else {
			qc.style.display = "none";
			toggleButton.textContent = "Show Instructions";
		}
	};

	qc.insertAdjacentElement("afterend", toggleButton);

	setTimeout(() => {
		document.querySelectorAll(".Skin .ValidationError").forEach((el) => {
			const isDisplayed = getComputedStyle(el).display == "block";
			if (isDisplayed) {
				toggleButton.style.display = "";
			}
		});
	}, 500);
});

Got it. Thanks a ton for your insights and answers. Is there any way I can become more proficient in writing custom code in JavaScript? Would you suggest some materials that I may learn to start coding well?

You can start here: https://developer.mozilla.org/en-US/docs/Web/JavaScript

If you are interested in learning JS just for Qualtrics, then you’re better off searching for answers as and when you encounter any issue, the problem is that the resources available online are too deep. 

I conduct courses for researchers to learn the basics of online experiments, however, they are usually done in association with a university, so they only happen if there are enough people at the place that feel the need for such a course.

If you’re, drop me an email with your details at ahmed[at]survey-awesome.com, and I’ll let you know when I conduct the next course.   

Perfect! Thanks a ton. 

I just wanted to say, your answer on having the button show up when the answer is incorrect has been super helpful! One additional thing I wanted to ask: is there anyway to change the color, text color and font etc. of the button? I was trying to customize the button was could not do it. Please let me know. 

Hello Buddy,

I just found this interesting to try and decided to do it my way, and fortunately, it’s working as per your requirement.

I have created three blocks:

• Block 1 consists of the welcome message.
• Block 2 is the introduction block.
• Block 3 contains the three questions.

You can apply the validation directly using the custom validation option. For the custom button, you will need a JavaScript code. I’m providing the JS code below, which you can simply add to all three questions and save. This should allow you to navigate back to the introduction block if any of the three questions are answered incorrectly.
 

Qualtrics.SurveyEngine.addOnload(function()
{
    var that = this;

    // Create the "Go to Introduction Page" button
    var backButton = document.createElement("button");
    backButton.innerText = "Go to Introduction Page";
    backButton.style.marginTop = "10px";
    backButton.style.padding = "8px 12px";
    backButton.style.fontSize = "14px";
    backButton.style.backgroundColor = "#007bff";
    backButton.style.color = "#fff";
    backButton.style.border = "none";
    backButton.style.cursor = "pointer";
    backButton.style.display = "none"; // Initially hidden

    // Append the button below the question container
    var questionContainer = document.querySelector(".QuestionOuter");
    if (questionContainer) {
        questionContainer.appendChild(backButton);
    }

    // Function to check if validation error appears
    function checkValidationErrors() {
        var errorMessages = document.querySelectorAll(".ValidationError");
        if (errorMessages.length > 0) {
            backButton.style.display = "block"; // Show button if there is an error
        } else {
            backButton.style.display = "none";  // Hide button if error is gone
        }
    }

    // Observe changes in the validation errors dynamically
    var observer = new MutationObserver(checkValidationErrors);
    observer.observe(document.body, { childList: true, subtree: true });

    // Click event to go back to the Introduction Block
    backButton.onclick = function() {
        Qualtrics.SurveyEngine.setEmbeddedData("GoBackToIntro", "Yes"); 
        location.reload(); // Reloads the page to trigger branch logic
    };
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

Let me know how it goes. 

Hi ​@gPandey_715 I tried your code. The button color is changing.

The problem is, the button is showing up on loading the page and not when the selected option is incorrect.