SHARE
TWEET

Untitled

a guest Aug 19th, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. enter code here
  2. <script>
  3. let questions = [
  4. { id: "q1", terminal: false, yes: "q2",       no: "q4"       },
  5. { id: "q2", terminal: false, yes: "q3",       no: "q4"       },
  6. { id: "q3", terminal: false,  yes: "q4", no: "q4" , boh:"q4" }
  7.  ];
  8.  // Runs the processResult function when the user clicks on the page
  9.  document.addEventListener("click", processResponse);
  10.  function processResponse(event) { // `event` is the click that  
  11.  triggered the function
  12.  // Makes sure a box was clicked before proceeding
  13.  if(event.target.classList.contains("box")){
  14.  // Identifies HTML elements (and the 'response' data attribute)
  15.  const
  16.   box = event.target,
  17.   question = box.parentElement,
  18.   response = box.dataset.response,
  19.   boxAndSibling = question.querySelectorAll(".box"),
  20.   sibling = response == "no" ? boxAndSibling[0] : boxAndSibling[1],
  21.   resultDisplay = document.getElementById("result");
  22.  // Makes sure the other box is not already checked before proceeding        
  23.  if(!sibling.classList.contains("check-box")){
  24.   box.classList.toggle("check-box");
  25.       // Finds the question in the array
  26.   for(let quest of questions){
  27.     if(quest.id == question.id){    
  28.      // Shows the result for terminal questions
  29.      if(quest.terminal){
  30.         result = quest[response];
  31.         resultDisplay.innerHTML = "";
  32.       }
  33.       // Or otherwise shows the next question
  34.       else{
  35.         const next = document.getElementById(quest[response]);
  36.         next.classList.toggle("active");
  37.        }
  38.       }
  39.      }
  40.      }
  41.     }
  42.     }
  43.       </script>
  44.      <style>
  45.       ul { list-style-type: none; }
  46.       #myUL { margin: 0; padding: 0; }
  47.        .box {
  48.            cursor: pointer; -webkit-user-select: none; -moz-user-
  49.          select: none;
  50.        -ms-user-select: none;  user-select: none;
  51.             }
  52.         .box::before { content: "2610"; color: black; display: inline-                         block; margin-right: 6px; }
  53.         .check-box::before { content: "2611"; color: dodgerblue; }
  54.         .nested { display: none; }
  55.         .active { display: block; }
  56.          #result{ font-size: 2em; }
  57.           </style>
  58.          <div id="q1">
  59.           are you a man?</span><br />
  60.             <span class="box" data-response="yes">Yes</span>
  61.            <span class="box" data-response="no">No</span><br />
  62.              </div>
  63.              <div id="q2" class="nested">
  64.             <span>you are tall?</span><br />
  65.             <span class="box" data-response="yes">Yes</span>
  66.                <span class="box" data-response="no">No</span><br />
  67.               </div>
  68.               <div id="q3" class="nested">
  69.                <span>how tall are you?</span><br />
  70.                <span class="box" data-response="yes">1.50 m?</span><br />              
  71.                     <span class="box" data-response="no">1.80 m?</span><br />
  72.                     <span class="box" data-response="boh">2 m?</span><br />
  73.                 </div>
  74.                  <div id="q4" class="nested">
  75.                   <span>ok</span><br />
  76.                       </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top