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);
}
}