How can I present the result of the hits on another page?

Asked

Viewed 53 times

-1

function checar() {
  

  var questao1 = document.quiz.questao1.value;
  var questao2 = document.quiz.questao2.value;
  var questao3 = document.quiz.questao3.value;
  var questao4 = document.quiz.questao4.value;
  var questao5 = document.quiz.questao5.value;
  var questao6 = document.quiz.questao6.value;
  var questao7 = document.quiz.questao7.value;
  var questao8 = document.quiz.questao8.value;
  var questao9 = document.quiz.questao9.value;
  var questao10 = document.quiz.questao10.value;

  var correto = 0;


  if (questao1 == "Luigi") {
    correto++;
  }
  if (questao2 == "Nintendo") {
    correto++;
  }
  if (questao3 == "Bowser") {
    correto++;
  }
  if (questao4 == "Encanador") {
    correto++;
  }
  if (questao5 == "Verdadeira") {
    correto++;
  }
  if (questao6 == "Pular") {
    correto++;
  }
  if (questao7 == "Peach") {
    correto++;
  }
  if (questao8 == "Cogumelo") {
    correto++;
  }
  if (questao9 == "TDragão") {
    correto++;
  }
  if (questao10 == "Bowser Jr") {
    correto++;
  }


  var imagens = ["img/ganhar.gif", "img/maisoumenos.gif", "img/perdeu.gif"];
  var mensagens = ["Mandou bem!", "É...melhor tentar de novo!", "Tente novamente!"];
  var pontos;

  if (correto == 0) {
    pontos = 2;
  }

  if (correto > 0 && correto < 10) {
    pontos = 1;
  }

  if (correto == 10) {
    pontos = 0;
  }

  document.getElementById("enviar").style.visibility = "visible";

  document.getElementById("mensagem").innerHTML = mensagens[pontos];

  document.getElementById("num_correto").innerHTML = "Você tem " + correto + " correto.";

  document.getElementById("imagem").src = imagens[pontos];
}
body {
  font-weight: bold;
  font-family: 'Lato', sans-serif;
}

#quiz {
  margin-left: 10px;
  background: rgb(189, 118, 118);
  padding: 10px 20px 10px 20px;
  width: 450px;
  border-radius: 20px;
  float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quiz</title>
  <link href="Quiz.css" rel="stylesheet">
  <script src="Quiz.js"></script>
</head>


<body>

  <h1>Quiz de clássicos dos video-games! </h1>


  <form id="quiz" name=quiz>

    <p class="questoes">1- Mário tem um irmão, seu nome é:</p>
    <input type="radio" id="q" name="questao1" value="Luigi"> Luigi <br>
    <input type="radio" id="q" name="questao1" value="Rodrigo"> Rodrigo <br>
    <input type="radio" id="q" name="questao1" value="Tails"> Tails <br>
    <input type="radio" id="q" name="questao1" value="Ambrósio"> Ambrósio <br>


    <br>
    <br>
    <p class="questoes">2- Mário é um personagem de jogos da franquia de qual empresa?</p>
    <input id="textbox" type="text" name="questao2">


    <br>
    <br>
    <br>
    <p class="questoes">3- A princesa dos games sempre é sequestrada por um inimigo do Mário, cujo nome é:</p>
    <input type="radio" id="q" name="questao3" value="Browser"> Browser <br>
    <input type="radio" id="q" name="questao3" value="Bowser"> Bowser <br>
    <input type="radio" id="q" name="questao3" value="Bauser"> Bauser <br>
    <input type="radio" id="q" name="questao3" value="Bauster"> Bauster <br>

    <br>
    <br>
    <p class="questoes">4- Qual é a profissão do personagem Mário?</p>
    <input type="radio" id="q" name="questao4" value="Bombeiro"> Bombeiro <br>
    <input type="radio" id="q" name="questao4" value="Joalheiro"> Joalheiro <br>
    <input type="radio" id="q" name="questao4" value="Musico"> Musico <br>
    <input type="radio" id="q" name="questao4" value="Encanador"> Encanador <br>

    <br>
    <br>
    <p class="questoes">5- Em algumas fases do jogo, podemos encontrar canos que nos levam a outros mundos. Esta afirmação é:</p>
    <input type="radio" id="q" name="questao5" value="Verdadeira"> Verdadeira <br>
    <input type="radio" id="q" name="questao5" value="Falsa"> Falsa <br>

    <br>
    <br>
    <p class="questoes">6- O que temos que fazer para matar o inimigo na maioria dos jogos de plataforma do Mário?
    </p>
    <input type="radio" id="q" name="questao6" value="Pular"> Pular sobre a cabeça do inimigo <br>
    <input type="radio" id="q" name="questao6" value="Atirar"> Atirar no inimigo <br>
    <input type="radio" id="q" name="questao6" value="Queimar"> Queimar o inimigo <br>
    <input type="radio" id="q" name="questao6" value="Fugir"> Não se mata o inimigo, apenas se foge dele <br>

    <br>
    <br>
    <p class="questoes">7- Qual o nome da princesa que o Mário tem que resgatar em quase todos os jogos?</p>
    <input type="radio" id="q" name="questao7" value="Rosalina"> Rosalina <br>
    <input type="radio" id="q" name="questao7" value="Daisy"> Daisy <br>
    <input type="radio" id="q" name="questao7" value="Pauline"> Pauline <br>
    <input type="radio" id="q" name="questao7" value="Peach"> Peach <br>

    <br>
    <br>
    <p class="questoes">8- Qual o item que o Mário come para crescer nos jogos?</p>
    <input type="radio" id="q" name="questao8" value="Banana"> Banana <br>
    <input type="radio" id="q" name="questao8" value="Cogumelo"> Cogumelo <br>
    <input type="radio" id="q" name="questao8" value="Morango"> Morango <br>
    <input type="radio" id="q" name="questao8" value="Espinafre"> Espinafre <br>

    <br>
    <br>
    <p class="questoes">9- O que é o inimigo do Mário, Bowser?</p>
    <input type="radio" id="q" name="questao9" value="Taturana"> Uma taturana <br>
    <input type="radio" id="q" name="questao9" value="Morcego"> Um morcego <br>
    <input type="radio" id="q" name="questao9" value="Dragão"> Um dragão <br>
    <input type="radio" id="q" name="questao9" value="TDragão"> Uma tartaruga dragão <br>

    <br>
    <br>
    <p class="questoes">10- Qual o nome do filho do inimigo Bowser?</p>
    <input type="radio" id="q" name="questao10" value="Bowser Jr"> Bowser Jr <br>
    <input type="radio" id="q" name="questao10" value="KidBowser"> Kid Bowser <br>
    <input type="radio" id="q" name="questao10" value="NanoBowser"> Nano Bowser <br>
    <input type="radio" id="q" name="questao10" value="KoopaBowser"> Koopa Bowser <br>
    <br>
    <br>


    <input id="botao" type="button" value="Concluir" onclick="checar();">

  </form>

  <div id="enviar">
    <p id="num_correto"></p>
    <p id="mensagem"></p>
    <img id="imagem">
  </div>



</body>

</html>

The point is:

If we run the script, when clicking check, on the same page where the quiz questions are shown, it will also show the number of hits. I would like this page to remain the quiz and when clicking the check button, open and/or update the page with the number of hits.

I hope I’ve been clear, thank you.

javascript html html5

2 answers

0

A possible solution, without relying on routes and other settings and staying with Javascript only vanilla, since you do not specify and I must assume.

// Abre nova janela e grava a janela numa variável para que a possas manipular posteriormente

    const novaJanela = window.open();

Once you have another window (as long as it remains in the same origin, domain) you can have direct access and modify its contents.

// Adiciona texto à nova janela

    novaJanela.document.body.innerText = "Este texto aparece na nova janela"

Taking this into account is to use creativity. As far as passing data to the new page is concerned, the same concept applies. The data structure may need to be adapted to facilitate implementation. The recommended one might be to create an object that you could map in the new window.

You can also add parameters to customize the new window, such as dimensions, window name, etc. I leave the w3schools documentation for you to take a look at.

Also take a look at the documentation of the object Window.

References

0

It may be possible to solve this problem (data storage) by using the object Storage of the browser, manipulating through the property localStorage, which is extremely simple to use based on the idea of key:value.

And for page redirection it is possible to use the Location available through Window.Location.

I hope I’ve helped.

  • I couldn’t quite understand the Storage and Localstorage part. The window.Location part I understood and I can make appear on another page the template of this quiz, but not yet the total of hits as requested. However, I thank you.

  • Using JS you can collect the data on a page (of the questions) and generate the sum of the correct answers ('correct' variable). After that you can take the value of this variable and send it to localStorage through JS and only then redirect the page. Already on the redirected page you search for this data and present to the user.

Browser other questions tagged javascript html html5

You are not signed in. Login or sign up in order to post.