1
resposta

Como faço para carregar um gif animado na pagina de resposta do quiz que é retornada pelo JavaScript ?

Olá, Desenvolvi um quiz e na pagina do resultado retornada pelo Javascript, queria exibir uma pagina com a informação " Você acertou!!! com mais um gif animado pela url https://c.tenor.com/2rBNLBlPOg4AAAAC/bitcoin-baby-bitcoin.gif + link para ir para a próxima pergunta se o usuario errar a pergunta quero apresentar mensagem " Você errou!!!" + gif usando a url https://i.imgur.com/7QTvFuT.gif + link para voltar para a pagina do index (inicio do jogo)

Trata-se de um quiz de 6 perguntas. vou colocar aqui o código do html ( index e pergunta 1), css e Js ( pergunta 1)

código html index

<DOCTYPE html>
<html>

 <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Jogo de Tabuleiro</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
 </head>

 <header>
        <img id="gif" src="aJKAG3tBNGPF.gif">
 </header>


 <body>
       <h1>Bem vindo ao QUIZ do Bitcoim</h1>
       <h3>Quer conhecer um pouco sobre este assunto e ainda se divertir um pouquinho?<br>
       <br>Clique na primeira pergunta e vamos ver quantas vai acertar!  <br><br>    
      </h3>

        <p><a id="p1" href="pergunta1.html"> Pergunta 01</a></p>

    </body>

    </html>

codigo html para primeira pergunta pergunta.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pergunta 1</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<section class="conteiner" >
<img src=https://bordalo.observador.pt/v2/q:85/rs:fill:2000:1124/c:2000:1124:nowe:0:104/plain/https://s3.observador.pt/wp-content/uploads/2021/03/13142845/23455429.jpg>

<div class="topoEsquerda" id="texto">
  <p class="centraliza"> Pergunta 1 <br><br>
   O que é Bitcoin? <br>
</p>

<form id = "pergunta" >
    <input type="radio" name="choice" value="A" id="choice-A"> 
    <label for="choice-A">É um novo modelo de carro</label><br>
    <input type="radio" name="choice" value="B" id="choice-B">
    <label for="choice-B">É uma nova serie</label><br>
    <input type="radio" name="choice" value="C" id="choice-C">
    <label for="choice-C">É um novo sistema de pagamentos</label><br>
    <input type="radio" name="choice" value="D" id="choice-D">
    <label for="choice-D">É uma criptmoeda</label><br>
    <input type="radio" name="choice" value="E" id="choice-E">
    <label for="choice-E">É um novo banco</label><br>
    <br>
    <button id="botao" onclick="pergunta()"> Selecione a alternativa correta </button>
</form>
</div>
</section>

<script src="scriptPerguntas.js">     </script>
</body>
</html>

codigo javascript

scriptperguntas.js

const botao = document.querySelector('#botao');
// handle button click

function pergunta() {
  const alternativas = document.querySelectorAll('input[name="choice"]');

  let selectedValue;

  for (const opcao of alternativas) {
    if (opcao.checked) {
      selectedValue = opcao.value;
      break;
    }
  }

  if (selectedValue == "D") {
    situacao = "Voce Acertou!!!!";

    msg = "<p>" + situacao+ "</p>" + "<p><a href=\"pergunta2.html\"> Avance para Pròxima Pergunta </a></P>";
    document.write(msg);
  } 
  else{
    situacao = "Voce Errou!!!!";
    msg = "<p>" + situacao+ "</p>" + "<p><a href=\"index.html\"> Voltar Perguntas </a></P>";
    document.write(msg);
  }

}
1 resposta

Boa tarde, Vera! Tudo bem?

Acredito que ele não carrega o URL externo do gif a tempo de escrever na tela, então tentando com o link dele eu não conseguia jeito pra fazer aparecer na tela de erro por aqui.

Uma alternativa é salvar o gif desejado e carregar por ele mesmo:

 else{
    situacao = "Voce Errou!!!!";
    gif = '<img src="errou.gif"/>'
    msg = "<p>" + situacao+ "</p>" + gif + "<p><a href=\"index.html\"> Voltar Perguntas </a></P>" ;
    document.write(msg);
  }

É uma maneira também mais confiável. Não recomendamos referenciar imagens de sites externos visto que o gif no imgur pode ser deletado ou o site pode cair algum dia, assim fazendo não aparecer nada no seu site.

Bons estudos!