Surveys and Outreach

Get Involved. Join the Conversation.

Topic

    Michael Locurcio
    Conditional Questions - Revisited Again
    Topic posted March 29, 2019 by Michael LocurcioSilver Trophy: 7,500+ Points 
    169 Views, 7 Comments
    Title:
    Conditional Questions - Revisited Again
    Summary:
    Help with understanding Conditional Question Code
    Content:

    I have begun exploring if Surveys can takeover our external provider. I have read a bunch of articles on how to make conditional questions work, but I can't follow the code. I have a question setup that is in the form of radio buttons. Depending on the selection will dictate the next question we show. 

    I have been using this example code: 

    <p>
      <rn:question disabled="disabled" onclick="if(this.value == 37) {_main.q_11_11.disabled=false}" split="False" question_id="11">Q1</rn:question>
    </p>
    <p>
      <rn:question split="False" question_id="11" disabled="true">Q2</rn:question></p>

    When I use the code, both questions 1 and 2 show, selecting the first option doesn't hide anything. Can someone explain how this code works? Where does the 37 come into play? I think its the choice ID and I got this value from the db.

    My end result should be a user answers the first question, choice the first radio button, question_id 11 should show. I would then expect to repeat the process for the next few couple radio buttons.

    Version:
    19A

    Comment

     

    • Ajay Yadav

      why don't you make this by Advance mode, it's easy.

      • Michael Locurcio

        Hi Ajay, 

        That's actually how my first version of the survey was built, but since we are trying to replicate an existing survey, my business colleagues are pretty insistent the survey has to all be on the same page.

         

    • Lakshay Bhalla
      Hi Michael,
      

      You can do so by using jQuery.

      for ex:

      $( document ).ready(function() {
              jQuery("#2").hide();  //All the questions you wanna hide and they should be in <div> or <tr> or                                                          //anything to which you can give an id. Leave the first question u want to be visible
              jQuery("#3").hide();
              jQuery("#4").hide();
              jQuery("#5").hide();      
      });
      jQuery("input[name='q_1']").click(function(){
          var radioVal = jQuery(this).val();
           if(radioVal == 37)
          { jQuery("#4").show();
            }

      else{

      jQuery("#3").show();

      jQuery("#5").show();

      }

      jQuery("#

      }
          
        });

       

    • Lakshay Bhalla
      Hi Michael,
      

      You can do so by using jQuery.

      for ex:

      $( document ).ready(function() {
              jQuery("#2").hide();  //All the questions you wanna hide and they should be in <div> or <tr> or                                                          //anything to which you can give an id. Leave the first question u want to be visible
              jQuery("#3").hide();
              jQuery("#4").hide();
              jQuery("#5").hide();      
      });
      jQuery("input[name='q_1']").click(function(){
          var radioVal = jQuery(this).val();
           if(radioVal == 37)
          { jQuery("#4").show();
            }

      else{

      jQuery("#3").show();

      jQuery("#5").show();

      }

      jQuery("#

      }
          
        });

       

    • Sebastiaan Draaisma

      Even pure javascript would not be to difficult. You place the questions you want to hide in a div and toggle div visibility (style attribute) with a function.
      Button function example below

      <button onclick="togglediv('div1')">+</button>
       <div id="div1" style='display:none'>Div 1</div>

      <script type="text/javascript">
                      function togglediv(id) {
                      var div = document.getElementById(id);
                      div.style.display = div.style.display == "none" ? "block" : "none";
                      }
        </script>

    • Jess Campbell

      Sebastiaan is correct. Below is an example of a conditional survey I wrote using vanilla js. One thing you should be mindful of is that you cannot have any required questions after the first branch. Requirement is set on the question, and cannot be dynamically toggled using code. (Yet... I made this request directly to the product owner recently.)

      <span style="FONT-SIZE: 18pt; FONT-FAMILY: Arial" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><span>Welcome to the Service Center Survey</span></span>
      <p xmlns:xsd="http://www.w3.org/2001/XMLSchema"></p>
      <script language="JavaScript" type="text/javascript" xml:space="preserve">
      //<![CDATA[
      function ShowContent(e)
      {
      if(e == "335") {document.getElementById('q138').style.display = "none" ;
      document.getElementById('ASC').style.display = "block" ; return true;}
      if (e == "336") {document.getElementById('q138').style.display = "block" ;
      document.getElementById('ASC').style.display = "none" ; return true;}
      if(e == "72") {document.getElementById('q43').style.display = "none" ;return true;}
      if (e == "73") {document.getElementById('q43').style.display = "block" ;return true;}
      if(e == "74") {document.getElementById('q44').style.display = "none" ;return true;}
      if (e == "75") {document.getElementById('q44').style.display = "block" ;return true;}
      if(e == "78") {document.getElementById('q46').style.display = "none" ;return true;}
      if (e == "79") {document.getElementById('q46').style.display = "block" ;return true;}
      if(e == "84") {document.getElementById('q142').style.display = "none" ;return true;}
      if (e == "85") {document.getElementById('q142').style.display = "block" ;return true;}
      if(e == "86") {document.getElementById('q143').style.display = "none" ;return true;}
      if (e == "87") {document.getElementById('q143').style.display = "block" ;return true;}
      if(e == "88") {document.getElementById('q144').style.display = "none" ;return true;}
      if (e == "89") {document.getElementById('q144').style.display = "block" ;return true;}
      }
      //]]>
      </script>
      <rn:question onchange="ShowContent(this.value)" version="3" split="False" question_id="137">Taken</rn:question>
      <div id="q138" style="DISPLAY: none">
      <rn:question version="3" split="False" question_id="138">Taken Explain</rn:question>
      </div>
      <div id="ASC" style="DISPLAY: none">
      <rn:question version="3" split="False" question_id="139">ASC NPS</rn:question>
      <rn:question version="3" split="False" question_id="141">ASC NPS Explain</rn:question>
      <rn:question onchange="ShowContent(this.value)" version="3" split="False" question_id="24">Easily Found</rn:question>
      <div id="q43" style="DISPLAY: none">
      <rn:question version="3" split="False" question_id="43">Easily Found reason</rn:question>
      </div>
      <rn:question onchange="ShowContent(this.value)" version="3" split="False" question_id="25">Maintained</rn:question>
      <div id="q44" style="DISPLAY: none">
      <rn:question version="3" split="False" question_id="44">Maintained Reason</rn:question>
      </div>
      <rn:question onchange="ShowContent(this.value)" version="3" split="False" question_id="27">Knowledgable</rn:question>
      <div id="q46" style="DISPLAY: none">
      <rn:question version="3" split="False" question_id="46">Knowledgeable Reason</rn:question>
      </div>
      <rn:question version="3" split="False" question_id="29">Solution</rn:question>
      <rn:question onchange="ShowContent(this.value)" version="3" split="False" question_id="30">Time frame</rn:question>
      <div id="q142" style="DISPLAY: none">
      <rn:question version="3" split="False" question_id="142">Time frame Explain</rn:question>
      </div>
      <rn:question onchange="ShowContent(this.value)" version="3" split="False" question_id="31">On time</rn:question>
      <div id="q143" style="DISPLAY: none">
      <rn:question version="3" split="False" question_id="143">On time explain</rn:question>
      </div>
      <rn:question onchange="ShowContent(this.value)" version="3" split="False" question_id="32">Working</rn:question>
      <div id="q144" style="DISPLAY: none">
      <rn:question version="3" split="False" question_id="144">Working explain</rn:question>
      </div>
      <rn:question version="3" split="False" question_id="33">Charged</rn:question>
      </div>