<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo de Perguntas - Sustentabilidade e Antropoceno</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .quiz-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            max-width: 550px;
            width: 100%;
            text-align: center;
        }
        h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 22px;
        }
        .btn-opcao {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            margin: 8px 0;
            width: 100%;
            border-radius: 5px;
            font-size: 15px;
            cursor: pointer;
            transition: background 0.2s;
            text-align: left;
        }
        .btn-opcao:hover {
            background-color: #2980b9;
        }
        .feedback {
            margin-top: 15px;
            font-weight: bold;
            font-size: 18px;
        }
        .btn-proximo {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 15px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            display: none;
        }
        .btn-proximo:hover {
            background-color: #27ae60;
        }
        .contador {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 10px;
            text-align: right;
        }
    </style>
</head>
<body>

<div class="quiz-container">
    <div id="janela-quiz">
        <div id="contador" class="contador"></div>
        <h2 id="pergunta">Carregando pergunta...</h2>
        <div id="opcoes"></div>
        <div id="feedback" class="feedback"></div>
        <button id="btn-proximo" class="btn-proximo" onclick="proximaPergunta()">Avançar</button>
    </div>
</div>

<script>
    const perguntas = [
        {
            q: "O que caracteriza a visão antropocêntrica?",
            o: ["A natureza como centro de tudo", "O ser humano como centro das decisões e valores", "O equilíbrio igualitário entre espécies", "A adoração aos elementos do clima"],
            a: 1
        },
        {
            q: "Qual termo é usado para definir a época geológica marcada pelo forte impacto humano na Terra?",
            o: ["Paleolítico", "Mesozóico", "Antropoceno", "Jurássico"],
            a: 2
        },
        {
            q: "Qual dessas ações ajuda a mitigar os impactos do aquecimento global?",
            o: ["Aumento do uso de carvão", "Substituição de florestas por pastagens", "Transição para fontes de energia renováveis", "Descarte de resíduos em rios"],
            a: 2
        },
        {
            q: "Qual é o principal impacto do acúmulo de plásticos nos oceanos?",
            o: ["Fertilização de algas marinhas", "Formação de barreiras térmicas benéficas", "Ingestão por animais marinhos e contaminação por microplásticos", "Aceleração do ciclo da água"],
            a: 2
        },
        {
            q: "O desmatamento em larga escala afeta diretamente qual ciclo natural?",
            o: ["Ciclo do fósforo", "Ciclo do carbono e regime de chuvas", "Ciclo do nitrogênio atmosférico", "Apenas o ciclo do magnésio"],
            a: 1
        },
        {
            q: "Qual das seguintes alternativas é considerada uma fonte de energia limpa e renovável?",
            o: ["Gás natural", "Energia Solar", "Petróleo", "Carvão mineral"],
            a: 1
        },
        {
            q: "O conceito de Desenvolvimento Sustentável busca equilibrar:",
            o: ["Apenas o lucro econômico imediato", "O crescimento econômico, a preservação ambiental e a equidade social", "A preservação total da natureza proibindo qualquer atividade humana", "O avanço industrial sem restrições"],
            a: 1
        },
        {
            q: "O colapso de polinizadores (como as abelhas) devido ao uso excessivo de agrotóxicos ameaça principalmente:",
            o: ["A produção global de alimentos e a biodiversidade", "A quantidade de oxigênio na atmosfera", "O nível dos oceanos", "A velocidade dos ventos continentais"],
            a: 0
        }
    ];

    let indiceAtual = 0;
    let pontuacao = 0;

    function carregarPergunta() {
        const feedbackDiv = document.getElementById("feedback");
        const btnProximo = document.getElementById("btn-proximo");
        feedbackDiv.innerText = "";
        btnProximo.style.display = "none";

        if (indiceAtual >= perguntas.length) {
            exibirResultadoFinal();
            return;
        }

        // Atualiza contador de progresso
        document.getElementById("contador").innerText = `Pergunta ${indiceAtual + 1} de ${perguntas.length}`;

        const dadosQuestao = perguntas[indiceAtual];
        document.getElementById("pergunta").innerText = dadosQuestao.q;

        const containerOpcoes = document.getElementById("opcoes");
        containerOpcoes.innerHTML = "";

        dadosQuestao.o.forEach((opcao, index) => {
            const botao = document.createElement("button");
            botao.innerText = opcao;
            botao.classList.add("btn-opcao");
            botao.onclick = () => verificarResposta(index);
            containerOpcoes.appendChild(botao);
        });
    }

    function verificarResposta(indexSelecionado) {
        const dadosQuestao = perguntas[indiceAtual];
        const feedbackDiv = document.getElementById("feedback");
        
        // Desativa todos os botões após a escolha
        const botoes = document.querySelectorAll(".btn-opcao");
        botoes.forEach(b => b.disabled = true);

        if (indexSelecionado === dadosQuestao.a) {
            feedbackDiv.innerText = "Resposta Correta! 🎉";
            feedbackDiv.style.color = "#2ecc71";
            pontuacao++;
        } else {
            feedbackDiv.innerText = "Resposta Incorreta. ❌";
            feedbackDiv.style.color = "#e74c3c";
        }

        document.getElementById("btn-proximo").style.display = "inline-block";
    }

    function proximaPergunta() {
        indiceAtual++;
        carregarPergunta();
    }

    function exibirResultadoFinal() {
        const janela = document.getElementById("janela-quiz");
        let mensagemDesempenho = "";

        if (pontuacao === perguntas.length) {
            mensagemDesempenho = "Excelente! Você domina o assunto ambiental. 🌍🏆";
        } else if (pontuacao >= perguntas.length / 2) {
            mensagemDesempenho = "Bom trabalho! Você tem um bom conhecimento sobre o tema. 👍";
        } else {
            mensagemDesempenho = "Vale a pena revisar os conceitos para ajudar o planeta! 📚🌱";
        }

        janela.innerHTML = `
            <h2>Fim de Jogo!</h2>
            <p style="font-size: 18px; margin-bottom: 5px;">Você acertou <strong>${pontuacao}</strong> de <strong>${perguntas.length}</strong> perguntas.</p>
            <p style="font-size: 16px; color: #555; font-style: italic; margin-bottom: 20px;">${mensagemDesempenho}</p>
            <button class="btn-proximo" style="display: inline-block;" onclick="reiniciarJogo()">Jogar Novamente</button>
        `;
    }

    function reiniciarJogo() {
        location.reload();
    }

    // Inicializa o jogo
    carregarPergunta();
</script>

</body>
</html>
