Hide next button until In-page display logic question is shown | Experience Community
Skip to main content
Solved

Hide next button until In-page display logic question is shown

  • April 30, 2024
  • 4 replies
  • 384 views
A
Forum|alt.badge.img+1

I have a questions that uses in-page display logic. I want to hide the next button until one of the questions shows. I can hide the button but can’t get it to show based on the conditional question loading.

Best answer by nitish08

Hi @ASkog ,

I found the below workaround, hope this works for your project. Also, don’t forget to change the QID with the one that is having display logic.

jQuery("#NextButton").hide();
jQuery(".JFE").on("mouseover change click", function(){
    jQuery("#NextButton").hide();
    if (jQuery("#QID2").is(":visible")){
        jQuery("#NextButton").show();
    }else{
        jQuery("#NextButton").hide();
    }
})

 

    4 replies

    RickB
    Level 4 ●●●●
    Forum|alt.badge.img+22
    • RickB
    • Level 4 ●●●●
    • May 1, 2024

    Hi @ASkog 

    In Qualtrics, you can use display logic to show or hide elements based on certain conditions. To hide the next button until a specific question is answered, you can follow these steps:

    1. Identify the Trigger Question: Determine the question whose answer will trigger the next button to appear.

    2. Set Up Display Logic for Next Button:

      • Click on the next button element in the question editor.
      • In the properties panel on the right, find the "Display Logic" section.
      • Add a display logic condition that specifies when the next button should be shown. This condition should depend on the answer to the trigger question.

    3. Configure Display Logic Condition:

      • When setting up the display logic, select the trigger question from the dropdown menu.
      • Choose the appropriate operator and value that indicate when the next button should be shown. For example, if the trigger question is multiple choice, you might set the condition to show the next button when a specific answer option is selected.

    4. Test Your Survey: Preview your survey to ensure that the next button behaves as expected based on your display logic conditions. Make sure to test different scenarios to verify that the button appears and disappears as intended.

    If you've followed these steps and are still encountering issues, double-check the logic conditions you've set up and ensure they accurately reflect the conditions under which the next button should be displayed.

    N
    Level 1 ●
    Forum|alt.badge.img+4
    • nitish08
    • Level 1 ●
    • Answer
    • May 1, 2024

    Hi @ASkog ,

    I found the below workaround, hope this works for your project. Also, don’t forget to change the QID with the one that is having display logic.

    jQuery("#NextButton").hide();
    jQuery(".JFE").on("mouseover change click", function(){
        jQuery("#NextButton").hide();
        if (jQuery("#QID2").is(":visible")){
            jQuery("#NextButton").show();
        }else{
            jQuery("#NextButton").hide();
        }
    })

     

    A
    Forum|alt.badge.img+1
    • ASkog
    • Author
    • May 1, 2024

    Hi @RickB, Do you have a screenshot of the “next button element in the question editor”? I am not seeing it on my end.

    A
    Forum|alt.badge.img+1
    • ASkog
    • Author
    • May 1, 2024

    @nitish08 Thank you! I was able to get the code to work. I had two questions that might show so I added an or and got it working. I put this on the question that came last in the block.
     

    Qualtrics.SurveyEngine.addOnReady(function()
    {
    jQuery("#NextButton").hide();
    jQuery(".JFE").on("mouseover change click", function(){
        jQuery("#NextButton").hide();
        if (jQuery("#QID2").is(":visible") || jQuery("#QID3").is(":visible")){
            jQuery("#NextButton").show();
        }else{
            jQuery("#NextButton").hide();
        }
    })

    });

     

      Terms & ConditionsAccessibility statement