Integrate JavaScript

Question

Integrate JavaScript

Navigation

#1 by (3 votes)

0

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

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

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 leave three to two questions per page, but I can not think of how to make Javascript work when I put it that way.

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

javascript html css

asked by anonymous 07.11.2018 / 16:56

1 answer

Error writing date converted to phpMyAdmin database Using React in backend and small projects

score 3 · Accepted Answer

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

Make an HTTP request for the new page (going from " link " to " link ")?

Use Ajax to change the quiz page without necessarily leaving the current page?

Use some tabs with hidden divs that appear and disappear as the page is changed?

In the case of point 1 , you can use Cookies or Local Storage to store the responses, using the logic you already have, but fetching the results through the elements within the div representing the page current. Then, just join the page responses 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 you do not need to use Local Storage, you can store in a same JavaScript object,

let respostas = []

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

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

Then just use it to send to a server or evaluate it locally. If you have any questions, just let me explain.