body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; } .quiz-container { max-width: 600px; margin: auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .step-bar { display: flex; margin-bottom: 20px; } .step { flex: 1; height: 10px; margin: 0 2px; background-color: #ddd; border-radius: 5px; } .step.active { background-color: #4CAF50; } .question { font-size: 20px; margin-bottom: 15px; } .answers button { display: block; width: 100%; margin: 10px 0; padding: 10px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; background-color: #e0e0e0; transition: background-color 0.3s; } .answers button.correct { background-color: #4CAF50; color: white; } .answers button.wrong { background-color: #f44336; color: white; } .hidden { display: none; } #final-screen { text-align: center; } #group-button { background-color: #4CAF50; color: white; font-size: 18px; font-weight: bold; padding: 15px 30px; border: none; border-radius: 10px; animation: pulse 1s infinite; margin-top: 20px; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

Parabéns! Você completou o quiz!

Agora você pode entrar no grupo:

ENTRAR NO GRUPO

const questions = [ { question: "O que é uma enxada?", answers: [ { text: "Uma ferramenta para capinar", correct: true }, { text: "Um tipo de animal", correct: false }, { text: "Uma planta típica da roça", correct: false } ] }, { question: "Para que serve um trator na roça?", answers: [ { text: "Para decorar a fazenda", correct: false }, { text: "Para arar a terra", correct: true }, { text: "Para levar crianças à escola", correct: false } ] }, { question: "Qual destes é um animal comum na roça?", answers: [ { text: "Cavalo", correct: true }, { text: "Golfinho", correct: false }, { text: "Pinguim", correct: false } ] }, { question: "O que é milho verde?", answers: [ { text: "Um tipo de flor", correct: false }, { text: "Milho colhido ainda jovem", correct: true }, { text: "Uma espécie de peixe", correct: false } ] }, { question: "Como se chama o local onde se cria galinhas?", answers: [ { text: "Galinheiro", correct: true }, { text: "Chiqueiro", correct: false }, { text: "Celeiro", correct: false } ] } ];

let currentQuestion = 0;

const quizContainer = document.getElementById("quiz"); const stepBar = document.getElementById("step-bar");

function updateStepBar() { stepBar.innerHTML = ""; for (let i = 0; i < questions.length; i++) { const step = document.createElement("div"); step.classList.add("step"); if (i <= currentQuestion) step.classList.add("active"); stepBar.appendChild(step); } }

function showQuestion() { updateStepBar(); const q = questions[currentQuestion]; quizContainer.innerHTML = `

`; const answersDiv = quizContainer.querySelector(".answers");

q.answers.forEach((a, index) => { const btn = document.createElement("button"); btn.innerText = a.text; btn.addEventListener("click", () => selectAnswer(btn, a.correct)); answersDiv.appendChild(btn); }); }

function selectAnswer(button, correct) { const buttons = document.querySelectorAll(".answers button"); buttons.forEach(btn => { btn.disabled = true; const isCorrect = questions[currentQuestion].answers.find(a => a.text === btn.innerText).correct; btn.classList.add(isCorrect ? "correct" : "wrong"); });

setTimeout(() => { currentQuestion++; if (currentQuestion < questions.length) { showQuestion(); } else { quizContainer.classList.add("hidden"); document.getElementById("final-screen").classList.remove("hidden"); } }, 1000); }

// Coloque o link do grupo aqui: document.getElementById("group-link").href = "https://seulinkdogrupo.com";

// Inicializa o quiz showQuestion();