enter code here
<script>
let questions = [
{ id: "q1", terminal: false, yes: "q2",       no: "q4"       },
{ id: "q2", terminal: false, yes: "q3",       no: "q4"       },
{ id: "q3", terminal: false,  yes: "q4", no: "q4" , boh:"q4" }
 ];
 // Runs the processResult function when the user clicks on the page
 document.addEventListener("click", processResponse);
 function processResponse(event) { // `event` is the click that
 triggered the function
 // Makes sure a box was clicked before proceeding
 if(event.target.classList.contains("box")){
 // Identifies HTML elements (and the 'response' data attribute)
 const
  box = event.target,
  question = box.parentElement,
  response = box.dataset.response,
  boxAndSibling = question.querySelectorAll(".box"),
  sibling = response == "no" ? boxAndSibling[0] : boxAndSibling[1],
  resultDisplay = document.getElementById("result");
 // Makes sure the other box is not already checked before proceeding
 if(!sibling.classList.contains("check-box")){
  box.classList.toggle("check-box");
      // Finds the question in the array
  for(let quest of questions){
    if(quest.id == question.id){
     // Shows the result for terminal questions
     if(quest.terminal){
        result = quest[response];
        resultDisplay.innerHTML = "";
      }
      // Or otherwise shows the next question
      else{
        const next = document.getElementById(quest[response]);
        next.classList.toggle("active");
       }
      }
     }
     }
    }
    }
      </script>
     <style>
      ul { list-style-type: none; }
      #myUL { margin: 0; padding: 0; }
       .box {
           cursor: pointer; -webkit-user-select: none; -moz-user-
         select: none;
       -ms-user-select: none;  user-select: none;
            }
        .box::before { content: "2610"; color: black; display: inline-                         block; margin-right: 6px; }
        .check-box::before { content: "2611"; color: dodgerblue; }
        .nested { display: none; }
        .active { display: block; }
         #result{ font-size: 2em; }
          </style>
         <div id="q1">
          are you a man?</span><br />
            <span class="box" data-response="yes">Yes</span>
           <span class="box" data-response="no">No</span><br />
             </div>
             <div id="q2" class="nested">
            <span>you are tall?</span><br />
            <span class="box" data-response="yes">Yes</span>
               <span class="box" data-response="no">No</span><br />
              </div>
              <div id="q3" class="nested">
               <span>how tall are you?</span><br />
               <span class="box" data-response="yes">1.50 m?</span><br />
                    <span class="box" data-response="no">1.80 m?</span><br />
                    <span class="box" data-response="boh">2 m?</span><br />
                </div>
                 <div id="q4" class="nested">
                  <span>ok</span><br />
                      </div>