0

Tenho um questionário onde o usuário vai responder x questões e irá receber uma resposta no final, quando der o clique no botão "resposta".

Fiz a primeira versão onde está tudo funcionando, só que nessa versão as questões estão todas em uma unica pagina HTML, está dessa forma.

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>

Agora quero acrescentar um botão de "Próximo", para deixar de três a duas perguntas por página, só que não consigo pensar em como fazer o Javascript funcionar quando colocar dessa forma.

Alguém tem alguma dica, ou coisa do tipo? Grata.

2
  • 3
    veja se isso te ajuda: jquery-steps.com/Examples
    – Eloa
    Commented 7/11/2018 às 16:10
  • @aa_sp, dei uma olhada e não é bem isso, na realidade, a junção de todas as respostas de todas as paginas vai ser um único resultado, sabe. Commented 7/11/2018 às 16:29

1 Resposta 1

3

Como você pretende "distribuir" essas páginas? Para ir para a próxima página, você vai ter que:

  1. Fazer uma requisição HTTP da nova página (passando de "http://exemplo.com/questionario?p=1" para "http://exemplo.com/questionario?p=2")?
  2. Utilizar Ajax para trocar a página do questionário sem necessariamente sair da página atual?
  3. Usar algum tipo de "tabs" com divs escondidas que vão aparecendo e desaparecendo conforme a página seja trocada?

No caso do ponto 1, você pode utilizar Cookies ou Local Storage para armazenar as respostas, utilizando a lógica que você já tem, mas buscando os resultados através dos elementos dentro da div que representa a página atual. Depois, é só juntar as respostas das páginas em um único elemento ou objeto e calcular o resultado (também usando a lógica que você já tem).

No caso dos pontos 2 e 3, você vai fazer a mesma coisa, mas não precisa utilizar Local Storage, você pode armazenar em um objeto JavaScript mesmo, veja um exemplo:

let respostas = []

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

Dessa forma, utilizando a função calcResposta (onde pergunta é um id único para cada pergunta), você sempre terá todas as respostas em respostas[].

Depois é só utilizar para enviar a um servidor ou avaliar localmente mesmo. Se ficou alguma dúvida, é só falar que eu explico melhor.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .