Guest User

Untitled

a guest
Aug 19th, 2019
70
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