Javascript como montar um site de quiz dinâmico com html e js.

M.tech · 28 de janeiro de 2021

Olá, recentemente estudando javascript criei uma pequena pagina com html, js e css, com perguntas que vão chegar a determinados resultados, porém ficou muito simples. Minha ideia é fazer as perguntas nesse estilo :https://pt.quizur.com/quiz/que-personagem-da-netflix-voce-seria-ExFP

vejam que a cada pergunta respondida, o site apresenta uma nova, armazenando as respostas para chegar ao resultado.

porém não sei como fazer isso...vou colocar um trecho do meu código para verem o que fiz até agora:

   <u>Em outros jogos, qual seu estilo de personagem/jogada favorito?</u><br>
           <input type="radio" name="estilo" id="selectn4">
           <label for="selectn4">Muito dano, porém lento, e resistente</label><br>
           <input type="radio" name="estilo" id="selectn5">
           <label for="selectn5">Ágil, pouco dano porém muito combo e energia</label><br>
           <input type="radio" name="estilo" id="selectn6">
           <label for="selectn6">Faz uso de magia, muito dano porém frágil</label><br>
        </P>

       <div id="button">
           <input type="button" value="✔" onclick="conferir()">
           <input type="button" value="" onclick="window.location.reload()">
       </div>
         <div id="res">
            <img src="image.jpg" alt="preencha e descubra!">
         </div>

function conferir(){
    var comportamento = document.getElementsByName('comporta')
    var style = document.getElementsByName('estilo')
    var persona = document.getEunctlementsByName('champ')
    var res = document.querySelector('div#res')
    var img = document.createElement('img')
    img.setAttribute('id' , 'foto')

  if (comportamento[0].checked && style[0].checked && persona[1 || 3]){
     
     img.setAttribute('src' , 'Top_icon.png')
     res.innerHTML = 'testes' 
     res.appendChild(img)
  }

todas minhas perguntas ficam em uma página só...

Rui Guilherme · 28 de janeiro de 2021

Eu faria isso usando steppers, no NPM você vai ter vários códigos prontos.

Acredito que você esteja começando agora então de uma forma simples eu recomendo que você faça 3 formulários HTML e coloque cada um deles dentro de uma div com sua própria ID.

Ficando algo assim:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      #segundo_passo {
        display: none;
      }

      #terceiro_passo {
        display: none;
      }
    </style>
    <script>
      var passos = 1;
    </script>
  </head>

  <body>
    <div id="primeiro_passo">
      <p>aqui vai a primeira pergunta</p>
    </div>
    <div id="segundo_passo">
      <p>aqui vai a segunda pergunta</p>
    </div>
    <div id="terceiro_passo">
      <p>aqui vai a terceira pergunta</p>
    </div>
    <input type="button" value="✔" onclick="conferir(passos)" />
    <script>
      function conferir() {
        if (passos === 1) {
          // passos sempre vai mostrar em qual questão ele vai estar, considerando que ele começa na primeira questão, quando ele pular para a segunda você precisa ocultar a primeira, e mostrar a segunda, isso acontece nas duas linhas abaixo.
          document.querySelector("#primeiro_passo").style.display = "none";
          document.querySelector("#segundo_passo").style.display = "flex";
          passos++;
        } else if (passos === 2) {
        	//aqui acontece a mesma coisa, o primeiro passo já está oculto, então você precisa ocultar o segundo e mostrar o terceiro.  
          document.querySelector("#segundo_passo").style.display = "none";
          document.querySelector("#terceiro_passo").style.display = "flex";
          passos++;
        } else {
          alert("parabéns você finalizou o quiz");
          //Essa parte ele apenas reinicia o quiz, ocultado o segundo e o terceiro, mostrando apenas o primeiro
          document.querySelector("#primeiro_passo").style.display = "flex";
          document.querySelector("#segundo_passo").style.display = "none";
          document.querySelector("#terceiro_passo").style.display = "none";
          passos = 1;
        }
      }
    </script>
  </body>
</html>

Caso queia ver em funcionamento, apenas clique aqui.

Agora você só precisa adicionar o código JS para pegar os dados do form, salvar esses dados separadamente e no final processar os dados para gerar um resultado.

Você também pode adicionar um paginador de questões, alguns sttepers dentro do NPM já tem contador, segue: https://www.npmjs.com/package/bs-stepper/v/1.7.0

A MUITO MUITOOOOOOOOO tempo atrás eu fiz algo assim, segue o código: https://github.com/RuiGuilherme/Quiz-Deuses-Gregos se eu não me engano esse código n usa multiplos form's, eu apenas troquei os dados de um único form de acordo com a questão.

M.tech · 29 de janeiro de 2021

@Rui Guilherme muito obrigado mesmo! me ajudou muito, usei esse como base para entender a ideia do que era preciso ser feito e estou fazendo as alterações, e achei muito massa seu código do github, mais uma vez obrigado!