teste

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); }
}

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();