Pontuação: 0 Próxima Bandeira const flags = [ { name: "Bandeira LGBT", colors: ["#FF0018", "#FFA52C", "#FFFF41", "#008018", "#0000F9", "#86007D"], description: "Representa toda a comunidade LGBTQIA+" }, { name: "Bandeira Trans", colors: ["#55CDFC", "#F7A8B8", "#FFFFFF", "#F7A8B8", "#55CDFC"], description: "Representa a comunidade transgênero" }, { name: "Bandeira Bissexual", colors: ["#D60270", "#D60270", "#9B4F96", "#0038A8", "#0038A8"], description: "Representa pessoas que sentem atração por dois ou mais gêneros" }, { name: "Bandeira Pansexual", colors: ["#FF218C", "#FF218C", "#FFD800", "#FFD800", "#21B1FF", "#21B1FF"], description: "Representa pessoas que sentem atração independente do gênero" }, { name: "Bandeira Não-Binário", colors: ["#FCF434", "#FFFFFF", "#9C59D1", "#2C2C2C"], description: "Representa pessoas que não se identificam exclusivamente como homem ou mulher" } ]; let currentFlag = 0; let score = 0; function drawFlag(colors) { const svg = document.getElementById('flag'); svg.innerHTML = ''; const stripeHeight = 180 / colors.length; colors.forEach((color, index) => { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", "0"); rect.setAttribute("y", index * stripeHeight); rect.setAttribute("width", "300"); rect.setAttribute("height", stripeHeight); rect.setAttribute("fill", color); svg.appendChild(rect); }); } function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } function showQuestion() { const flag = flags[currentFlag]; drawFlag(flag.colors); const options = document.getElementById('options'); options.innerHTML = ''; const choices = flags.map(f => f.description); const shuffledChoices = shuffleArray([...choices]); shuffledChoices.forEach(choice => { const button = document.createElement('button'); button.className = 'option'; button.textContent = choice; button.onclick = () => checkAnswer(choice, flag.description); options.appendChild(button); }); document.getElementById('message').innerHTML = ''; document.getElementById('next').style.display = 'none'; } function checkAnswer(selected, correct) { const message = document.getElementById('message'); const nextButton = document.getElementById('next'); const options = document.querySelectorAll('.option'); options.forEach(button => button.disabled = true); if (selected === correct) { score++; document.getElementById('score').textContent = score; message.className = 'message correct'; message.textContent = 'Correto! 🎉'; } else { message.className = 'message incorrect'; message.textContent = `Incorreto. A resposta certa era: ${correct}`; } if (currentFlag < flags.length - 1) { nextButton.style.display = 'block'; } else { message.innerHTML += `Fim do jogo! Você acertou ${score} de ${flags.length} bandeiras.`; nextButton.textContent = 'Recomeçar'; nextButton.style.display = 'block'; } } document.getElementById('next').onclick = () => { if (currentFlag < flags.length - 1) { currentFlag++; showQuestion(); } else { currentFlag = 0; score = 0; document.getElementById('score').textContent = score; showQuestion(); } }; // Iniciar o jogo showQuestion();
