Os quizzes são uma excelente forma de interagir com o público, tanto em sites educativos quanto em plataformas de entretenimento. Criar um quiz em JavaScript é uma tarefa relativamente simples e que pode trazer ótimos resultados, principalmente se você deseja adicionar um toque dinâmico ao seu site. Neste post, vou te ensinar como criar um quiz em JavaScript do zero, utilizando também HTML e CSS para estruturar e estilizar o conteúdo. O foco será construir um quiz visualmente agradável e funcional.
Teste e experimente as funcionalidades diretamente no CodePen abaixo:
See the Pen Quiz – Código Fácil by Código Fácil (@CodigoFacil) on CodePen.
O que vamos construir?
O nosso quiz será composto de três perguntas, onde o usuário poderá selecionar a resposta correta. A cada resposta, o quiz mostrará se o usuário acertou ou errou, e no final, exibirá a pontuação total.
Estrutura básica do quiz em JavaScript
A estrutura do nosso projeto será simples e composta por três arquivos:
- HTML para a estrutura.
- CSS para estilizar o quiz.
- JavaScript para a lógica do quiz.
Passo 1: Criando a Estrutura HTML
O primeiro passo para criar o quiz em JavaScript é definir o esqueleto HTML. Aqui, vamos criar os elementos que exibirão as perguntas e as opções de resposta.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz em JavaScript</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="quiz-container">
<div id="quiz">
<h1>Quiz de Conhecimento</h1>
<div class="pergunta-container">
<h2 id="pergunta">Pergunta aqui</h2>
<ul>
<li><button class="botao-resposta">Resposta 1</button></li>
<li><button class="botao-resposta">Resposta 2</button></li>
<li><button class="botao-resposta">Resposta 3</button></li>
<li><button class="botao-resposta">Resposta 4</button></li>
</ul>
</div>
<button id="botao-proximo" class="botao" style="display: none;">Próxima Pergunta</button>
<div id="resultado" style="display: none;">
<h2>Seu resultado: <span id="pontuacao"></span></h2>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Neste código HTML, criamos a estrutura básica do quiz, incluindo:
- Um título do quiz.
- Um espaço para exibir as perguntas.
- Um botão para avançar para a próxima pergunta.
- Uma área para mostrar o resultado final.
Passo 2: Estilizando com CSS
Agora que temos a estrutura HTML, vamos adicionar um pouco de estilo com CSS para deixar o quiz visualmente agradável.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.quiz-container {
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
max-width: 500px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.pergunta-container h2 {
margin-bottom: 15px;
font-size: 1.2rem;
color: #333;
}
ul {
list-style: none;
padding: 0;
}
ul li {
margin: 10px 0;
}
.botao-resposta {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
width: 100%;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
.botao-resposta:hover {
background-color: #0056b3;
}
.botao {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 1rem;
border-radius: 5px;
margin-top: 20px;
display: block;
width: 100%;
text-align: center;
}
#resultado h2 {
text-align: center;
color: #333;
}
#pontuacao {
font-size: 1.5rem;
color: #28a745;
}Com o CSS, estilizamos o layout e as cores do nosso quiz. Adicionamos um fundo claro para o corpo da página e definimos bordas arredondadas e sombras para dar um aspecto agradável ao contêiner do quiz.
Passo 3: Lógica do Quiz em JavaScript
Agora, vamos adicionar a lógica em JavaScript. Essa é a parte mais importante, pois é onde implementamos a lógica para exibir as perguntas, verificar as respostas e calcular a pontuação.
// Array contendo as perguntas, respostas e a resposta correta para cada pergunta
const perguntas = [
{
pergunta: "Qual é a capital da França?",
respostas: ["Berlim", "Madri", "Paris", "Lisboa"],
correta: "Paris"
},
{
pergunta: "Qual é o maior planeta do sistema solar?",
respostas: ["Terra", "Júpiter", "Marte", "Saturno"],
correta: "Júpiter"
},
{
pergunta: "Quem escreveu 'Dom Quixote'?",
respostas: ["Miguel de Cervantes", "Shakespeare", "Dante Alighieri", "Machado de Assis"],
correta: "Miguel de Cervantes"
}
];
// Variáveis para armazenar o índice da pergunta atual e a pontuação
let indicePerguntaAtual = 0;
let pontuacao = 0;
// Selecionando os elementos HTML que serão manipulados pelo JavaScript
const elementoPergunta = document.getElementById("pergunta");
const botoesResposta = document.querySelectorAll(".botao-resposta");
const botaoProximo = document.getElementById("botao-proximo");
const containerResultado = document.getElementById("resultado");
const elementoPontuacao = document.getElementById("pontuacao");
// Função para iniciar o quiz, exibindo a primeira pergunta
function iniciarQuiz() {
indicePerguntaAtual = 0;
pontuacao = 0;
botaoProximo.style.display = "none";
containerResultado.style.display = "none";
exibirPergunta();
}
// Função para exibir a pergunta atual e as respostas
function exibirPergunta() {
resetarEstado(); // Reseta o estado dos botões a cada nova pergunta
const perguntaAtual = perguntas[indicePerguntaAtual]; // Obtém a pergunta atual
elementoPergunta.innerText = perguntaAtual.pergunta; // Exibe a pergunta
// Exibe as respostas nos botões
botoesResposta.forEach((botao, index) => {
botao.innerText = perguntaAtual.respostas[index];
botao.addEventListener("click", selecionarResposta); // Adiciona o evento de clique
});
}
// Função para resetar o estado dos botões entre as perguntas
function resetarEstado() {
botaoProximo.style.display = "none"; // Esconde o botão de próxima pergunta
botoesResposta.forEach(botao => {
botao.disabled = false; // Habilita os botões
botao.classList.remove("correto", "incorreto"); // Remove as classes de estilo de resposta
});
}
// Função para processar a resposta selecionada pelo usuário
function selecionarResposta(e) {
const botaoSelecionado = e.target; // Identifica o botão clicado
const respostaCorreta = botaoSelecionado.innerText === perguntas[indicePerguntaAtual].correta; // Verifica se a resposta está correta
if (respostaCorreta) {
botaoSelecionado.classList.add("correto"); // Aplica estilo de resposta correta
pontuacao++; // Incrementa a pontuação
} else {
botaoSelecionado.classList.add("incorreto"); // Aplica estilo de resposta incorreta
}
// Desativa todos os botões de resposta após a seleção
botoesResposta.forEach(botao => botao.disabled = true);
botaoProximo.style.display = "block"; // Exibe o botão para ir para a próxima pergunta
}
// Função para exibir o resultado final do quiz
function exibirResultado() {
containerResultado.style.display = "block"; // Exibe o resultado
elementoPontuacao.innerText = `${pontuacao} de ${perguntas.length}`; // Exibe a pontuação
}
// Evento para avançar para a próxima pergunta
botaoProximo.addEventListener("click", () => {
indicePerguntaAtual++; // Avança para a próxima pergunta
if (indicePerguntaAtual < perguntas.length) {
exibirPergunta(); // Exibe a próxima pergunta
} else {
exibirResultado(); // Exibe o resultado final quando as perguntas acabarem
}
});
// Inicializa o quiz ao carregar a página
iniciarQuiz();Explicação do Código
Agora que temos o código completo, vou explicar as partes principais para que você entenda como o quiz funciona:
- Estrutura das perguntas: Criamos um array
perguntasque contém objetos. Cada objeto tem uma pergunta (pergunta), um array de respostas (respostas) e a resposta correta (correta). É com base nisso que o quiz será gerado dinamicamente. - Controle do quiz: Usamos duas variáveis importantes:
indicePerguntaAtual: que controla em qual pergunta o usuário está.pontuacao: que armazena a pontuação do usuário.
- Função
iniciarQuiz: Esta função inicializa o quiz, resetando o índice das perguntas e a pontuação, além de esconder o botão de próxima pergunta e o resultado. - Função
exibirPergunta: Aqui é onde a pergunta atual e as opções de resposta são exibidas. A cada nova pergunta, os botões de resposta são preenchidos com as opções corretas. - Função
resetarEstado: Antes de cada pergunta, os botões são resetados para que estejam habilitados novamente e prontos para a interação do usuário. - Função
selecionarResposta: Quando o usuário clica em uma das respostas, essa função verifica se a resposta está correta ou errada. Se estiver correta, a pontuação é incrementada e o botão de resposta recebe um estilo de “correto”. Caso contrário, o botão recebe um estilo de “errado”. Em ambos os casos, o quiz avança para a próxima pergunta. - Função
exibirResultado: Após o usuário responder todas as perguntas, o resultado final é exibido, mostrando a pontuação total. - Navegação entre perguntas: O botão “Próxima Pergunta” só aparece após o usuário selecionar uma resposta. Quando o botão é clicado, o quiz avança para a próxima pergunta, ou exibe o resultado final, se não houver mais perguntas.
Conclusão
Agora você tem um exemplo completo de um quiz em JavaScript que pode ser facilmente implementado no seu site. Este quiz é simples, mas você pode expandir a lógica adicionando mais perguntas, diferentes tipos de perguntas (como múltipla escolha, verdadeiro ou falso), e até temporizadores para limitar o tempo de resposta.
Além disso, com o uso de CSS, você pode personalizar o design para torná-lo mais atraente e adequado ao estilo do seu site. Esse tipo de quiz pode ser usado para engajar os visitantes do seu blog, testar conhecimentos ou até mesmo para fins educativos.
Se você quiser se aprofundar mais em JavaScript, sugerimos explorar outros tópicos como manipulação de DOM, armazenamento de dados no navegador (localStorage), e o uso de bibliotecas como React para criar interfaces ainda mais dinâmicas e interativas.
Comente abaixo se tiver alguma dúvida ou se precisar de ajuda para personalizar o seu quiz!
