Qualtrics show question based on previous answer using JavaScript

Question

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 1

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');
        }}
});