👩💻 Vamos criar um Quiz Interativo!

Passo 1: Configurar o HTML

Abra o editor online e:

  1. Crie um novo arquivo HTML
  2. Comece com a declaração DOCTYPE:
<!DOCTYPE html>

Isso informa ao navegador que é um documento HTML5.

Passo 2: Estrutura Básica

Adicione as tags HTML básicas:

<html>
<head>
    <title>Quiz de Animais</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>🐾 Quiz dos Animais 🦁</h1>
        <div id="pergunta"></div>
        <div id="opcoes"></div>
        <button onclick="proximaPergunta()">Próxima</button>
        <div id="resultado"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Dica: Use <!-- comentários --> para organizar seu código!

Passo 3: Estilizando com CSS

Crie um arquivo style.css e adicione:

body {
    font-family: Arial, sans-serif;
    background: #f0f8ff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 600px;
}

button {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    margin-top: 15px;
}

Isso centraliza o conteúdo e dá um visual moderno.

Passo 4: JavaScript Básico

Crie um arquivo script.js com:

const perguntas = [
    {
        pergunta: "Qual animal vive na água e na terra?",
        opcoes: ["Jacaré", "Girafa", "Leão"],
        resposta: "Jacaré"
    }
];

let perguntaAtual = 0;

function exibirPergunta() {
    document.getElementById('pergunta').textContent =
        perguntas[perguntaAtual].pergunta;

    const opcoesDiv = document.getElementById('opcoes');
    opcoesDiv.innerHTML = '';

    perguntas[perguntaAtual].opcoes.forEach(opcao => {
        const botao = document.createElement('button');
        botao.textContent = opcao;
        botao.onclick = () => verificarResposta(opcao);
        opcoesDiv.appendChild(botao);
    });
}

function verificarResposta(opcao) {
    if (opcao === perguntas[perguntaAtual].resposta) {
        alert("Correto! 🎉");
    } else {
        alert("Tente novamente! 😊");
    }
}

exibirPergunta();

Isso cria a primeira pergunta com verificação simples.

Passo 5: Melhorando o JavaScript

Adicione estas funções para tornar o quiz dinâmico:

function proximaPergunta() {
    perguntaAtual++;
    if (perguntaAtual < perguntas.length) {
        exibirPergunta();
    } else {
        document.getElementById('resultado').textContent =
            "Quiz Completo! 🎉";
    }
}

// Adicione mais perguntas
perguntas.push({
    pergunta: "Qual animal voa mas não é pássaro?",
    opcoes: ["Morcego", "Avestruz", "Tubarão"],
    resposta: "Morcego"
});

Agora o quiz tem navegação entre perguntas!

Passo 6: Estilos Avançados

Melhore o CSS adicionando:

#opcoes button {
    display: block;
    width: 80%;
    margin: 10px auto;
    padding: 15px;
    background: #3498db;
    border-radius: 25px;
    transition: transform 0.2s;
}

#opcoes button:hover {
    transform: scale(1.05);
    background: #2980b9;
}

#resultado {
    font-size: 1.5em;
    color: #e74c3c;
    margin: 20px 0;
    font-weight: bold;
}

Isso deixa os botões mais interativos e o resultado destacado.

🎉 Parabéns! Você completou o Quiz!

Agora você pode: