Integrar Javascript

Question

I have a questionnaire where the user will answer x questions and will receive a reply at the end, when you click the button "answer".

I made the first version where everything is working, except that in this version the questions are all in a single HTML page, is this way.

window.onload = function(){
  var btn = document.getElementById("resposta");
  btn.addEventListener("click",function(){
     var nomeCL = parseFloat(document.getElementById("nmCliente").value)
     calcular(nomeCL);
  },false);
  
  function calcular(a){
    var teste = document.getElementById("nmCliente").value
    var idade = document.getElementById("vlIdade").value

    if(teste == "Joll" && idade == "a"){
      document.getElementById("resultado").innerHTML="<p>a</p>"
    }else{
      document.getElementById("resultado").innerHTML="<p>b</p>"
    }
  }
}

<p>Nome do Cliente:</p>
<input id="nmCliente" type='text'></input>
<p>Qual sua idade?</p>
<select>
   <option value="a" id="vlIdade">15</option>
   <option value="b" id="vlIdade">16</option>
   <option value="c" id="vlIdade">17</option>
</select>
<div>
   <input type="button" id="resposta" value="Calcular" /></br>
   Resultado: <span id="resultado"> </span> 
</div>

Now I want to add a "Next" button, to make it three to two questions per page, only I can’t think of how to make Javascript work when I put it that way.

Does anyone have any tips, or anything like that? Thank you.

Answer 1

How do you plan to "distribute" these pages? To go to the next page, you will have to:

1. Make an HTTP request from the new page (going from "http://exemplo.com/questionario?p=1" for "http://exemplo.com/questionario?p=2")?
2. Use Ajax to change the survey page without necessarily leaving the current page?
3. Use some sort of "tabs" with hidden Divs that will appear and disappear as the page changes?

In the case of point 1, you can use Cookies or Local Storage to store the answers, using the logic you already have, but searching the results through the elements within the div that represents the current page. Then, just join the answers of the pages into a single element or object and calculate the result (also using the logic you already have).

In the case of points 2 and 3, you will do the same thing, but do not need to use Local Storage, you can store in a Javascript object even, see an example:

let respostas = []

function calcResposta(pergunta, elemento){
    let value = elemento.value
    respostas[pergunta] = value
}

Thus, using the function calcResposta (where pergunta is a unique id for every question), you will always have all the answers in respostas[].

Then just use it to send it to a server or evaluate it locally. If you have any questions, just say the word and I’ll explain it better.