Bird Song Identification Quiz Generator

Add species to the database to build a quiz.

'; return; } speciesDatabase.forEach(s => { const item = document.createElement('div'); item.className = 'bsiqg-list-item bg-white border-l-4 border-green-400 rounded-lg'; item.innerHTML = ` ${escapeHtml(s.name)} ${escapeHtml(s.url)} `; list.appendChild(item); }); } // --- Quiz Logic --- 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 bsiqgGenerateQuestions() { if (speciesDatabase.length < 4) { return []; // Need at least 4 species for a good multiple-choice quiz } // Use a random subset of 10 or all if less than 10 let availableSpecies = shuffleArray([...speciesDatabase]); const numQuestions = Math.min(10, availableSpecies.length); const questions = []; for (let i = 0; i < numQuestions; i++) { const correctSpecies = availableSpecies[i]; // Get 3 random wrong answers (decoys) let decoys = availableSpecies.filter(s => s.id !== correctSpecies.id); shuffleArray(decoys); decoys = decoys.slice(0, 3); // Create options let options = [...decoys.map(s => ({ species: s.name, correct: false })), { species: correctSpecies.name, correct: true }]; shuffleArray(options); questions.push({ correctSpecies: correctSpecies.name, audioUrl: correctSpecies.url, options: options }); } return questions; } window.bsiqgStartQuiz = function() { const questions = bsiqgGenerateQuestions(); if (questions.length < 4) { document.getElementById('quiz-content').innerHTML = `

You need at least 4 species in the database to generate a quiz with decoys. Please add more species.

`; document.getElementById('quiz-total-q').textContent = 0; document.getElementById('quiz-score').textContent = 0; return; } currentQuiz.questions = questions; currentQuiz.currentQIndex = 0; currentQuiz.score = 0; currentQuiz.answered = false; document.getElementById('quiz-total-q').textContent = currentQuiz.questions.length; document.getElementById('quiz-score').textContent = currentQuiz.score; bsiqgRenderQuestion(); }; function bsiqgRenderQuestion() { if (currentQuiz.currentQIndex >= currentQuiz.questions.length) { bsiqgRenderResults(); return; } const qData = currentQuiz.questions[currentQuiz.currentQIndex]; const contentDiv = document.getElementById('quiz-content'); document.getElementById('quiz-current-q').textContent = currentQuiz.currentQIndex + 1; document.getElementById('quiz-next-btn').disabled = true; currentQuiz.answered = false; let optionsHtml = qData.options.map((option, index) => ` ${String.fromCharCode(65 + index)}. ${escapeHtml(option.species)} `).join(''); contentDiv.innerHTML = ` `; } window.bsiqgPlayAudio = function(url) { try { const audio = new Audio(url); audio.play(); } catch (e) { console.error("Error playing audio:", e); alert("Audio playback failed. Please ensure the URL is valid and the file format is supported (.mp3, .wav)."); } }; window.bsiqgCheckAnswer = function(button, isCorrect) { if (currentQuiz.answered) return; currentQuiz.answered = true; document.getElementById('quiz-next-btn').disabled = false; // Disable all buttons and show results document.querySelectorAll('#quiz-options-container button').forEach(btn => { btn.disabled = true; if (btn.dataset.correct === 'true') { btn.classList.add('correct'); btn.innerHTML += ' (Correct)'; } }); if (isCorrect) { currentQuiz.score++; button.classList.add('correct'); document.getElementById('quiz-score').textContent = currentQuiz.score; } else { button.classList.add('incorrect'); button.innerHTML += ' (Your Choice)'; } }; window.bsiqgNextQuestion = function() { currentQuiz.currentQIndex++; bsiqgRenderQuestion(); }; function bsiqgRenderResults() { const total = currentQuiz.questions.length; const score = currentQuiz.score; const percentage = total > 0 ? ((score / total) * 100).toFixed(0) : 0; document.getElementById('quiz-content').innerHTML = ` `; document.getElementById('quiz-current-q').textContent = total; document.getElementById('quiz-next-btn').disabled = true; } // Utility: HTML Escape function escapeHtml(text) { if (!text) return ''; return text.replace(/[&<>"']/g, function(m) { switch (m) { case '&': return '&'; case '<': return '<'; case '>': return '>'; case '"': return '"'; case "'": return '''; default: return m; } }); }