Qualtrics show question based on previous answer using JavaScript

I’m fairly new to JavaScript and have tried to find a solution to my problem but without success.

I have a question (Q4) that should only be displayed if the answer to Q3 is “yes”. If I use display logic, Qualtrics will put Q4 on a separate page since it is a “slide” question (the In Page option is unavailable). Since I want Q4 to pop up on the same page as Q3 I figured I need to use a JavaScript option instead.

How can I condition Q4 on the answer of Q3? See example of the (unsuccessful) attempt I have made below. By using .hide() and .show() I can hide and show the question but the if(“${QID3” == 1) part is not working.

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    
    // Hide Q as soon as page loads

    $(this.questionId).hide();
    
        // Show Q if condition is met
    if("${QID3" == 1)
        this.questionID().show();    

});

Update 1: So I’ve looked up event handlers and came up with this, still doesn’t work though:

("$[id='QR~QID4]").hide();
    this.questionclick = function(event, element) {
        var selectedChoice = this.getSelectedChoices()
        console.log(selectedChoice) 
        if (selectedChoice == "1") {
            ("$[id='QR~QID4]").show();
        }

Update 2:

I’ve almost solved it now. I had the wrong question ID (but right-clicked on browser and clicked “Inspect Elements” to find it) and searched around for a correct way to refer to another question.

Managed to solve it! I had the wrong question ID (fixed by right-clicking in browser and selecting “inspect elements”) and googled around to find a correct call for a question based on its ID.

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/
    // hide next question from start
    jQuery("#QID10").hide();
    
    // when current question is clicked
    this.questionclick = function(event, element) {
        
        // create variabe with clicked answer and check
        var selectedChoice = this.getSelectedChoices()
        console.log(selectedChoice) 
        
        // show next question if condition is met
        if (selectedChoice == "1") {
            jQuery("#QID10").show();}
        
        // in case answer is switched, hide again
            else{
                jQuery("#QID10").hide();
        }}
    
});

This solution works as intended to hide and show the question – however, it messes up the slider so it is no longer possible to answer the question (see image below, the slider can’t be dragged and the “bar” has disappeared). Even stranger, if I zoom in/out on the page the slider re-appears, and stays visible/clickable even if I zoom back to default – so I guess something is happening with how the slider is displayed but I have no idea how to solve it.

screenshot of how it looks

Anyone know why this is happening and how to solve it?

Answer

Managed to solve it! Added the class of question which kept the slider in place.

   Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/
    // hide next question from start
    jQuery("#QID10").hide('.slider');
    // when current question is clicked
    this.questionclick = function(event, element) { 
        // create variabe with clicked answer and check
        var selectedChoice = this.getSelectedChoices()
        console.log(selectedChoice) 
        // show next question if condition is met
        if (selectedChoice == "1") {
            jQuery("#QID10").show('.slider');
        }   
        // in case answer is switched, hide again
            else {
                jQuery("#QID10").hide('.slider');
        }}
});

Advertisement

Answer