Why is the answer not in demand? : I need your help, I would like the question: "how tall are you?"
the answer goes down under each question, example:
"how tall are you?"
question1: 1.50m?
answer1: ok
question2: 1.80m?
answer2: ok
question3: 2m?
answer3: ok

instead now it works like this:

question1: 1.5m?
question2: 1.8m?
question3: 2?
answer1: ok

    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>










