<!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;
        }
        .porcentagem {
            font-size: 32px;
            font-weight: bold;
            color: #2e7d32;
            margin: 15px 0;
        }
        .msg-final {
            font-size: 16px;
            color: #555;
            line-height: 1.5;
            margin-bottom: 20px;
            padding: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
    </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 concept 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;
        }

        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");
        
        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");
        
        // Calcula a porcentagem de acertos
        const porcentagemAcertos = Math.round((pontuacao / perguntas.length) * 100);
        
        // Define a mensagem com base no rendimento
        let mensagemTexto = "";
        if (porcentagemAcertos === 100) {
            mensagemTexto = "Sensacional! Você tem total consciência sobre os impactos do Antropoceno e caminhos para a sustentabilidade. O planeta agradece! 🌍🏆";
        } else if (porcentagemAcertos >= 70) {
            mensagemTexto = "Muito bom! Seus conhecimentos ambientais são sólidos. Continue praticando hábitos sustentáveis no seu dia a dia! 👍🌱";
        } else if (porcentagemAcertos >= 50) {
            mensagemTexto = "Você acertou metade! Já entende alguns pontos fundamentais, mas que tal pesquisar um pouco mais sobre transição energética e conservação? 📚✨";
        } else {
            mensagemTexto = "Bora estudar mais um pouco? Compreender a nossa relação com o meio ambiente é o primeiro passo para transformar o futuro! 🔍🌎";
        }

        janela.innerHTML = `
            <h2>Fim de Jogo!</h2>
            <p style="font-size: 16px; margin: 0;">Sua taxa de acerto foi de:</p>
            <div class="porcentagem">${porcentagemAcertos}%</div>
            <p style="font-size: 16px; color: #555; margin-bottom: 15px;">Você acertou <strong>${pontuacao}</strong> de <strong>${perguntas.length}</strong> perguntas.</p>
            <div class="msg-final">${mensagemTexto}</div>
            <button class="btn-proximo" style="display: inline-block;" onclick="reiniciarJogo()">Jogar Novamente</button>
        `;
    }

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

    carregarPergunta();
</script>

</body>
</html>
