Righteous Museum | Animal Hero Facts<\/title>\n <style>\n * {\n box-sizing: border-box;\n user-select: none;\n }\n\n body {\n background: linear-gradient(135deg, #1a472a 0%, #0e2a1a 100%);\n font-family: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI Emoji', cursive, sans-serif;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .game-container {\n max-width: 700px;\n width: 100%;\n background: #FFF8E7;\n border-radius: 60px;\n padding: 20px 20px 30px;\n box-shadow: 0 25px 40px rgba(0,0,0,0.3);\n text-align: center;\n }\n\n h1 {\n margin: 0;\n font-size: 1.6rem;\n background: linear-gradient(135deg, #c9a03d, #8b5e1f);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n display: inline-block;\n }\n\n .subtitle {\n font-size: 0.85rem;\n color: #5a3e1b;\n margin-top: 5px;\n margin-bottom: 20px;\n }\n\n .progress {\n background: #e6d5b3;\n padding: 10px;\n border-radius: 50px;\n margin-bottom: 20px;\n font-weight: bold;\n font-size: 1rem;\n }\n\n .animal-card {\n background: #e0c48b;\n padding: 30px 20px;\n border-radius: 50px;\n margin-bottom: 20px;\n transition: all 0.3s ease;\n }\n\n .animal-emoji {\n font-size: 5rem;\n margin-bottom: 15px;\n }\n\n .animal-question {\n font-size: 1.3rem;\n font-weight: bold;\n color: #2c1e0a;\n }\n\n .button-group {\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .action-btn {\n background: #c9a03d;\n border: none;\n padding: 12px 24px;\n font-size: 1.1rem;\n font-weight: bold;\n border-radius: 50px;\n color: #2c1e0a;\n cursor: pointer;\n transition: 0.1s linear;\n box-shadow: 0 5px 0 #6b4c2c;\n font-family: inherit;\n flex: 1;\n min-width: 130px;\n }\n\n .action-btn:active {\n transform: translateY(2px);\n box-shadow: 0 2px 0 #6b4c2c;\n }\n\n .action-btn:disabled {\n opacity: 0.5;\n transform: none;\n cursor: not-allowed;\n }\n\n .info-box {\n background: #2c5e3a;\n padding: 15px;\n border-radius: 40px;\n margin-bottom: 20px;\n font-size: 1rem;\n color: #FFD966;\n font-weight: bold;\n min-height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .nav-buttons {\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-bottom: 15px;\n }\n\n .nav-btn {\n background: #D2B48C;\n border: none;\n padding: 10px 20px;\n font-size: 1rem;\n font-weight: bold;\n border-radius: 50px;\n cursor: pointer;\n box-shadow: 0 4px 0 #6b4c2c;\n font-family: inherit;\n }\n\n .nav-btn:active {\n transform: translateY(2px);\n box-shadow: 0 2px 0 #6b4c2c;\n }\n\n .reset-btn {\n background: #8b5e1f;\n color: #FFD966;\n margin-top: 10px;\n }\n\n .quiz-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.85);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n visibility: hidden;\n backdrop-filter: blur(4px);\n }\n\n .quiz-card {\n background: #FFF8E7;\n padding: 25px;\n border-radius: 50px;\n text-align: center;\n max-width: 350px;\n width: 85%;\n }\n\n .quiz-card h3 {\n font-size: 1.5rem;\n margin: 10px 0;\n }\n\n .quiz-options {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin: 20px 0;\n }\n\n .quiz-option {\n background: #D2B48C;\n border: none;\n padding: 12px;\n border-radius: 40px;\n font-size: 1rem;\n cursor: pointer;\n font-family: inherit;\n font-weight: bold;\n }\n\n .quiz-feedback {\n margin-top: 15px;\n font-weight: bold;\n }\n\n .victory-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n visibility: hidden;\n backdrop-filter: blur(4px);\n }\n\n .victory-card {\n background: #FFF8E7;\n padding: 30px 20px;\n border-radius: 60px;\n text-align: center;\n max-width: 350px;\n width: 80%;\n }\n\n .victory-card h2 {\n font-size: 1.6rem;\n margin: 10px 0;\n }\n\n @media (max-width: 550px) {\n .animal-emoji {\n font-size: 3.5rem;\n }\n .animal-question {\n font-size: 1rem;\n }\n .action-btn {\n font-size: 0.9rem;\n padding: 10px 16px;\n min-width: 110px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"game-container\">\n <h1>\ud83d\udc3e RIGHTEOUS MUSEUM \ud83d\udc3e<\/h1>\n <div class=\"subtitle\">Animal Hero Facts \u2014 Tap, Learn & Quiz Yourself!<\/div>\n\n <div class=\"progress\" id=\"progressText\">\ud83c\udf1f ANIMAL <span id=\"currentAnimalNum\">1<\/span> OF <span id=\"totalAnimals\">6<\/span><\/div>\n\n <div class=\"animal-card\">\n <div class=\"animal-emoji\" id=\"animalEmoji\">\ud83d\udc15<\/div>\n <div class=\"animal-question\" id=\"animalQuestion\">“What makes this animal a righteous hero?”<\/div>\n <\/div>\n\n <div class=\"button-group\">\n <button class=\"action-btn\" id=\"revealFactBtn\">\ud83d\udcd6 REVEAL FACT<\/button>\n <button class=\"action-btn\" id=\"quizBtn\">\u2753 QUIZ ME!<\/button>\n <\/div>\n\n <div class=\"info-box\" id=\"infoBox\">\n \ud83d\udca1 Tap a button to learn about this animal!\n <\/div>\n\n <div class=\"nav-buttons\">\n <button class=\"nav-btn\" id=\"prevBtn\">\u25c0 PREVIOUS<\/button>\n <button class=\"nav-btn\" id=\"nextBtn\">NEXT \u25b6<\/button>\n <\/div>\n\n <button class=\"nav-btn reset-btn\" id=\"resetBtn\">\ud83d\udd04 START OVER<\/button>\n<\/div>\n\n\n<div id=\"quizOverlay\" class=\"quiz-overlay\">\n <div class=\"quiz-card\">\n <h3 id=\"quizQuestion\">Question?<\/h3>\n <div class=\"quiz-options\" id=\"quizOptions\"><\/div>\n <div class=\"quiz-feedback\" id=\"quizFeedback\"><\/div>\n <button class=\"action-btn\" id=\"closeQuizBtn\" style=\"margin-top: 15px; background: #8b5e1f;\">CLOSE<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"victoryOverlay\" class=\"victory-overlay\">\n <div class=\"victory-card\">\n <div>\ud83c\udf1f\ud83d\udc3e\ud83c\udf1f\ud83d\udc3e\ud83c\udf1f\ud83d\udc3e\ud83c\udf1f<\/div>\n <h2>\ud83d\udc3e RIGHTEOUS ANIMAL EXPERT! \ud83d\udc3e<\/h2>\n <p id=\"victoryMessage\">You learned about 6 heroic animals!<\/p>\n <button class=\"action-btn\" id=\"victoryResetBtn\" style=\"background: #c9a03d; margin-top: 15px;\">\ud83d\udc15 LEARN AGAIN \ud83d\udc15<\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ANIMAL DATA\n const animals = [\n {\n emoji: \"\ud83d\udc15\",\n name: \"Dog\",\n question: \"What makes dogs righteous heroes?\",\n fact: \"\ud83d\udc15 Dogs have saved thousands of people from fires, drowning, and attacks! Some have even received medals for bravery.\",\n quiz: {\n question: \"What have dogs saved people from?\",\n options: [\"Fires, drowning & attacks\", \"Only from fires\", \"Only from being lost\"],\n correct: 0\n }\n },\n {\n emoji: \"\ud83d\udc2c\",\n name: \"Dolphin\",\n question: \"What makes dolphins righteous heroes?\",\n fact: \"\ud83d\udc2c Dolphins have protected swimmers from sharks and guided lost boats back to shore!\",\n quiz: {\n question: \"Who have dolphins protected?\",\n options: [\"Other dolphins\", \"Swimmers from sharks\", \"Fish from nets\"],\n correct: 1\n }\n },\n {\n emoji: \"\ud83d\udd4a\ufe0f\",\n name: \"Pigeon\",\n question: \"What makes pigeons righteous heroes?\",\n fact: \"\ud83d\udd4a\ufe0f A pigeon named Cher Ami saved 194 soldiers by delivering a message during World War I!\",\n quiz: {\n question: \"How many soldiers did Cher Ami the pigeon save?\",\n options: [\"50 soldiers\", \"194 soldiers\", \"1000 soldiers\"],\n correct: 1\n }\n },\n {\n emoji: \"\ud83d\udc18\",\n name: \"Elephant\",\n question: \"What makes elephants righteous heroes?\",\n fact: \"\ud83d\udc18 Elephants have rescued trapped herd members and protected humans from danger! They also mourn their loved ones.\",\n quiz: {\n question: \"What have elephants done to help others?\",\n options: [\"Rescued trapped herd members\", \"Built houses\", \"Cooked food\"],\n correct: 0\n }\n },\n {\n emoji: \"\ud83d\udc0e\",\n name: \"Horse\",\n question: \"What makes horses righteous heroes?\",\n fact: \"\ud83d\udc0e Horses in war have carried wounded soldiers miles to safety, even when injured themselves!\",\n quiz: {\n question: \"What did war horses do for wounded soldiers?\",\n options: [\"Carried them to safety\", \"Ran away from them\", \"Ignored them\"],\n correct: 0\n }\n },\n {\n emoji: \"\ud83d\udc2b\",\n name: \"Camel\",\n question: \"What makes camels righteous heroes?\",\n fact: \"\ud83d\udc2b Camels have saved travelers by finding water in the desert and carrying supplies across harsh lands!\",\n quiz: {\n question: \"How have camels saved travelers?\",\n options: [\"Found water in the desert\", \"Built shelters\", \"Cooked meals\"],\n correct: 0\n }\n }\n ];\n\n let currentIndex = 0;\n let factRevealedForCurrent = false;\n let totalAnimals = animals.length;\n\n \/\/ DOM elements\n const animalEmoji = document.getElementById('animalEmoji');\n const animalQuestion = document.getElementById('animalQuestion');\n const progressCurrent = document.getElementById('currentAnimalNum');\n const totalAnimalsSpan = document.getElementById('totalAnimals');\n const infoBox = document.getElementById('infoBox');\n const revealFactBtn = document.getElementById('revealFactBtn');\n const quizBtn = document.getElementById('quizBtn');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n const resetBtn = document.getElementById('resetBtn');\n const quizOverlay = document.getElementById('quizOverlay');\n const victoryOverlay = document.getElementById('victoryOverlay');\n const victoryResetBtn = document.getElementById('victoryResetBtn');\n\n totalAnimalsSpan.textContent = totalAnimals;\n\n function updateDisplay() {\n const animal = animals[currentIndex];\n animalEmoji.textContent = animal.emoji;\n animalQuestion.textContent = animal.question;\n progressCurrent.textContent = currentIndex + 1;\n \n \/\/ Reset fact revealed flag for this animal\n factRevealedForCurrent = false;\n infoBox.innerHTML = \"\ud83d\udca1 Tap 'Reveal Fact' to learn about this animal! Then try the quiz.\";\n \n \/\/ Enable buttons\n revealFactBtn.disabled = false;\n quizBtn.disabled = false;\n }\n\n function revealFact() {\n const animal = animals[currentIndex];\n infoBox.innerHTML = `\ud83d\udcd6 ${animal.fact}`;\n factRevealedForCurrent = true;\n \n \/\/ Add a little celebration effect\n infoBox.style.transform = \"scale(1.02)\";\n setTimeout(() => {\n infoBox.style.transform = \"scale(1)\";\n }, 200);\n }\n\n function showQuiz() {\n const animal = animals[currentIndex];\n const quiz = animal.quiz;\n \n document.getElementById('quizQuestion').textContent = quiz.question;\n const optionsContainer = document.getElementById('quizOptions');\n optionsContainer.innerHTML = '';\n \n quiz.options.forEach((option, idx) => {\n const btn = document.createElement('button');\n btn.className = 'quiz-option';\n btn.textContent = option;\n btn.addEventListener('click', () => {\n checkQuizAnswer(idx, quiz.correct, animal.name);\n });\n optionsContainer.appendChild(btn);\n });\n \n document.getElementById('quizFeedback').innerHTML = '';\n quizOverlay.style.visibility = \"visible\";\n }\n \n function checkQuizAnswer(selected, correct, animalName) {\n const feedbackDiv = document.getElementById('quizFeedback');\n if (selected === correct) {\n feedbackDiv.innerHTML = `\u2705 CORRECT! ${animalName}s are truly righteous heroes! \ud83c\udf1f`;\n feedbackDiv.style.color = \"#90be6d\";\n } else {\n const animal = animals[currentIndex];\n const correctAnswer = animal.quiz.options[correct];\n feedbackDiv.innerHTML = `\u274c Not quite! The right answer is: ${correctAnswer}. Keep learning! \ud83d\udc3e`;\n feedbackDiv.style.color = \"#ffb3b3\";\n }\n }\n \n function closeQuiz() {\n quizOverlay.style.visibility = \"hidden\";\n }\n \n function nextAnimal() {\n if (currentIndex < totalAnimals - 1) {\n currentIndex++;\n updateDisplay();\n checkCompletion();\n } else {\n \/\/ Already at last animal, show victory if they've seen all\n showVictory();\n }\n }\n \n function prevAnimal() {\n if (currentIndex > 0) {\n currentIndex--;\n updateDisplay();\n }\n }\n \n function checkCompletion() {\n \/\/ Victory is shown when they click next on the last animal OR via reset\n \/\/ We'll also track if they've seen all via a separate flag\n if (currentIndex === totalAnimals - 1) {\n \/\/ Don't auto-show victory, let them finish\n }\n }\n \n function showVictory() {\n victoryOverlay.style.visibility = \"visible\";\n }\n \n function resetGame() {\n currentIndex = 0;\n updateDisplay();\n victoryOverlay.style.visibility = \"hidden\";\n quizOverlay.style.visibility = \"hidden\";\n infoBox.innerHTML = \"\ud83d\udca1 Tap a button to learn about this animal!\";\n }\n \n \/\/ Event listeners\n revealFactBtn.addEventListener('click', revealFact);\n quizBtn.addEventListener('click', showQuiz);\n document.getElementById('closeQuizBtn').addEventListener('click', closeQuiz);\n prevBtn.addEventListener('click', prevAnimal);\n nextBtn.addEventListener('click', () => {\n if (currentIndex === totalAnimals - 1) {\n showVictory();\n } else {\n nextAnimal();\n }\n });\n resetBtn.addEventListener('click', resetGame);\n victoryResetBtn.addEventListener('click', () => {\n resetGame();\n });\n \n \/\/ Initialize\n updateDisplay();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Righteous Museum | Animal Hero Facts \ud83d\udc3e RIGHTEOUS MUSEUM \ud83d\udc3e Animal Hero Facts \u2014 Tap, Learn & Quiz Yourself! \ud83c\udf1f ANIMAL 1 OF 6 \ud83d\udc15 “What makes this animal a righteous hero?” \ud83d\udcd6 REVEAL FACT \u2753 QUIZ ME! \ud83d\udca1 Tap a button to learn about this animal! \u25c0 PREVIOUS NEXT \u25b6 \ud83d\udd04 START OVER Question? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-792","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/comments?post=792"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/792\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/792\/revisions\/793"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":792,"date":"2026-04-22T16:15:28","date_gmt":"2026-04-22T16:15:28","guid":{"rendered":"https:\/\/museum.wiserighteous.org\/?page_id=792"},"modified":"2026-04-22T16:15:28","modified_gmt":"2026-04-22T16:15:28","slug":"animal-hero-facts","status":"publish","type":"page","link":"https:\/\/museum.wiserighteous.org\/index.php\/animal-hero-facts\/","title":{"rendered":"Animal Hero Facts"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n Righteous Museum | Animal Hero Facts<\/title>\n <style>\n * {\n box-sizing: border-box;\n user-select: none;\n }\n\n body {\n background: linear-gradient(135deg, #1a472a 0%, #0e2a1a 100%);\n font-family: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI Emoji', cursive, sans-serif;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .game-container {\n max-width: 700px;\n width: 100%;\n background: #FFF8E7;\n border-radius: 60px;\n padding: 20px 20px 30px;\n box-shadow: 0 25px 40px rgba(0,0,0,0.3);\n text-align: center;\n }\n\n h1 {\n margin: 0;\n font-size: 1.6rem;\n background: linear-gradient(135deg, #c9a03d, #8b5e1f);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n display: inline-block;\n }\n\n .subtitle {\n font-size: 0.85rem;\n color: #5a3e1b;\n margin-top: 5px;\n margin-bottom: 20px;\n }\n\n .progress {\n background: #e6d5b3;\n padding: 10px;\n border-radius: 50px;\n margin-bottom: 20px;\n font-weight: bold;\n font-size: 1rem;\n }\n\n .animal-card {\n background: #e0c48b;\n padding: 30px 20px;\n border-radius: 50px;\n margin-bottom: 20px;\n transition: all 0.3s ease;\n }\n\n .animal-emoji {\n font-size: 5rem;\n margin-bottom: 15px;\n }\n\n .animal-question {\n font-size: 1.3rem;\n font-weight: bold;\n color: #2c1e0a;\n }\n\n .button-group {\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .action-btn {\n background: #c9a03d;\n border: none;\n padding: 12px 24px;\n font-size: 1.1rem;\n font-weight: bold;\n border-radius: 50px;\n color: #2c1e0a;\n cursor: pointer;\n transition: 0.1s linear;\n box-shadow: 0 5px 0 #6b4c2c;\n font-family: inherit;\n flex: 1;\n min-width: 130px;\n }\n\n .action-btn:active {\n transform: translateY(2px);\n box-shadow: 0 2px 0 #6b4c2c;\n }\n\n .action-btn:disabled {\n opacity: 0.5;\n transform: none;\n cursor: not-allowed;\n }\n\n .info-box {\n background: #2c5e3a;\n padding: 15px;\n border-radius: 40px;\n margin-bottom: 20px;\n font-size: 1rem;\n color: #FFD966;\n font-weight: bold;\n min-height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .nav-buttons {\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-bottom: 15px;\n }\n\n .nav-btn {\n background: #D2B48C;\n border: none;\n padding: 10px 20px;\n font-size: 1rem;\n font-weight: bold;\n border-radius: 50px;\n cursor: pointer;\n box-shadow: 0 4px 0 #6b4c2c;\n font-family: inherit;\n }\n\n .nav-btn:active {\n transform: translateY(2px);\n box-shadow: 0 2px 0 #6b4c2c;\n }\n\n .reset-btn {\n background: #8b5e1f;\n color: #FFD966;\n margin-top: 10px;\n }\n\n .quiz-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.85);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n visibility: hidden;\n backdrop-filter: blur(4px);\n }\n\n .quiz-card {\n background: #FFF8E7;\n padding: 25px;\n border-radius: 50px;\n text-align: center;\n max-width: 350px;\n width: 85%;\n }\n\n .quiz-card h3 {\n font-size: 1.5rem;\n margin: 10px 0;\n }\n\n .quiz-options {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin: 20px 0;\n }\n\n .quiz-option {\n background: #D2B48C;\n border: none;\n padding: 12px;\n border-radius: 40px;\n font-size: 1rem;\n cursor: pointer;\n font-family: inherit;\n font-weight: bold;\n }\n\n .quiz-feedback {\n margin-top: 15px;\n font-weight: bold;\n }\n\n .victory-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n visibility: hidden;\n backdrop-filter: blur(4px);\n }\n\n .victory-card {\n background: #FFF8E7;\n padding: 30px 20px;\n border-radius: 60px;\n text-align: center;\n max-width: 350px;\n width: 80%;\n }\n\n .victory-card h2 {\n font-size: 1.6rem;\n margin: 10px 0;\n }\n\n @media (max-width: 550px) {\n .animal-emoji {\n font-size: 3.5rem;\n }\n .animal-question {\n font-size: 1rem;\n }\n .action-btn {\n font-size: 0.9rem;\n padding: 10px 16px;\n min-width: 110px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"game-container\">\n <h1>\ud83d\udc3e RIGHTEOUS MUSEUM \ud83d\udc3e<\/h1>\n <div class=\"subtitle\">Animal Hero Facts \u2014 Tap, Learn & Quiz Yourself!<\/div>\n\n <div class=\"progress\" id=\"progressText\">\ud83c\udf1f ANIMAL <span id=\"currentAnimalNum\">1<\/span> OF <span id=\"totalAnimals\">6<\/span><\/div>\n\n <div class=\"animal-card\">\n <div class=\"animal-emoji\" id=\"animalEmoji\">\ud83d\udc15<\/div>\n <div class=\"animal-question\" id=\"animalQuestion\">“What makes this animal a righteous hero?”<\/div>\n <\/div>\n\n <div class=\"button-group\">\n <button class=\"action-btn\" id=\"revealFactBtn\">\ud83d\udcd6 REVEAL FACT<\/button>\n <button class=\"action-btn\" id=\"quizBtn\">\u2753 QUIZ ME!<\/button>\n <\/div>\n\n <div class=\"info-box\" id=\"infoBox\">\n \ud83d\udca1 Tap a button to learn about this animal!\n <\/div>\n\n <div class=\"nav-buttons\">\n <button class=\"nav-btn\" id=\"prevBtn\">\u25c0 PREVIOUS<\/button>\n <button class=\"nav-btn\" id=\"nextBtn\">NEXT \u25b6<\/button>\n <\/div>\n\n <button class=\"nav-btn reset-btn\" id=\"resetBtn\">\ud83d\udd04 START OVER<\/button>\n<\/div>\n\n\n<div id=\"quizOverlay\" class=\"quiz-overlay\">\n <div class=\"quiz-card\">\n <h3 id=\"quizQuestion\">Question?<\/h3>\n <div class=\"quiz-options\" id=\"quizOptions\"><\/div>\n <div class=\"quiz-feedback\" id=\"quizFeedback\"><\/div>\n <button class=\"action-btn\" id=\"closeQuizBtn\" style=\"margin-top: 15px; background: #8b5e1f;\">CLOSE<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"victoryOverlay\" class=\"victory-overlay\">\n <div class=\"victory-card\">\n <div>\ud83c\udf1f\ud83d\udc3e\ud83c\udf1f\ud83d\udc3e\ud83c\udf1f\ud83d\udc3e\ud83c\udf1f<\/div>\n <h2>\ud83d\udc3e RIGHTEOUS ANIMAL EXPERT! \ud83d\udc3e<\/h2>\n <p id=\"victoryMessage\">You learned about 6 heroic animals!<\/p>\n <button class=\"action-btn\" id=\"victoryResetBtn\" style=\"background: #c9a03d; margin-top: 15px;\">\ud83d\udc15 LEARN AGAIN \ud83d\udc15<\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ANIMAL DATA\n const animals = [\n {\n emoji: \"\ud83d\udc15\",\n name: \"Dog\",\n question: \"What makes dogs righteous heroes?\",\n fact: \"\ud83d\udc15 Dogs have saved thousands of people from fires, drowning, and attacks! Some have even received medals for bravery.\",\n quiz: {\n question: \"What have dogs saved people from?\",\n options: [\"Fires, drowning & attacks\", \"Only from fires\", \"Only from being lost\"],\n correct: 0\n }\n },\n {\n emoji: \"\ud83d\udc2c\",\n name: \"Dolphin\",\n question: \"What makes dolphins righteous heroes?\",\n fact: \"\ud83d\udc2c Dolphins have protected swimmers from sharks and guided lost boats back to shore!\",\n quiz: {\n question: \"Who have dolphins protected?\",\n options: [\"Other dolphins\", \"Swimmers from sharks\", \"Fish from nets\"],\n correct: 1\n }\n },\n {\n emoji: \"\ud83d\udd4a\ufe0f\",\n name: \"Pigeon\",\n question: \"What makes pigeons righteous heroes?\",\n fact: \"\ud83d\udd4a\ufe0f A pigeon named Cher Ami saved 194 soldiers by delivering a message during World War I!\",\n quiz: {\n question: \"How many soldiers did Cher Ami the pigeon save?\",\n options: [\"50 soldiers\", \"194 soldiers\", \"1000 soldiers\"],\n correct: 1\n }\n },\n {\n emoji: \"\ud83d\udc18\",\n name: \"Elephant\",\n question: \"What makes elephants righteous heroes?\",\n fact: \"\ud83d\udc18 Elephants have rescued trapped herd members and protected humans from danger! They also mourn their loved ones.\",\n quiz: {\n question: \"What have elephants done to help others?\",\n options: [\"Rescued trapped herd members\", \"Built houses\", \"Cooked food\"],\n correct: 0\n }\n },\n {\n emoji: \"\ud83d\udc0e\",\n name: \"Horse\",\n question: \"What makes horses righteous heroes?\",\n fact: \"\ud83d\udc0e Horses in war have carried wounded soldiers miles to safety, even when injured themselves!\",\n quiz: {\n question: \"What did war horses do for wounded soldiers?\",\n options: [\"Carried them to safety\", \"Ran away from them\", \"Ignored them\"],\n correct: 0\n }\n },\n {\n emoji: \"\ud83d\udc2b\",\n name: \"Camel\",\n question: \"What makes camels righteous heroes?\",\n fact: \"\ud83d\udc2b Camels have saved travelers by finding water in the desert and carrying supplies across harsh lands!\",\n quiz: {\n question: \"How have camels saved travelers?\",\n options: [\"Found water in the desert\", \"Built shelters\", \"Cooked meals\"],\n correct: 0\n }\n }\n ];\n\n let currentIndex = 0;\n let factRevealedForCurrent = false;\n let totalAnimals = animals.length;\n\n \/\/ DOM elements\n const animalEmoji = document.getElementById('animalEmoji');\n const animalQuestion = document.getElementById('animalQuestion');\n const progressCurrent = document.getElementById('currentAnimalNum');\n const totalAnimalsSpan = document.getElementById('totalAnimals');\n const infoBox = document.getElementById('infoBox');\n const revealFactBtn = document.getElementById('revealFactBtn');\n const quizBtn = document.getElementById('quizBtn');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n const resetBtn = document.getElementById('resetBtn');\n const quizOverlay = document.getElementById('quizOverlay');\n const victoryOverlay = document.getElementById('victoryOverlay');\n const victoryResetBtn = document.getElementById('victoryResetBtn');\n\n totalAnimalsSpan.textContent = totalAnimals;\n\n function updateDisplay() {\n const animal = animals[currentIndex];\n animalEmoji.textContent = animal.emoji;\n animalQuestion.textContent = animal.question;\n progressCurrent.textContent = currentIndex + 1;\n \n \/\/ Reset fact revealed flag for this animal\n factRevealedForCurrent = false;\n infoBox.innerHTML = \"\ud83d\udca1 Tap 'Reveal Fact' to learn about this animal! Then try the quiz.\";\n \n \/\/ Enable buttons\n revealFactBtn.disabled = false;\n quizBtn.disabled = false;\n }\n\n function revealFact() {\n const animal = animals[currentIndex];\n infoBox.innerHTML = `\ud83d\udcd6 ${animal.fact}`;\n factRevealedForCurrent = true;\n \n \/\/ Add a little celebration effect\n infoBox.style.transform = \"scale(1.02)\";\n setTimeout(() => {\n infoBox.style.transform = \"scale(1)\";\n }, 200);\n }\n\n function showQuiz() {\n const animal = animals[currentIndex];\n const quiz = animal.quiz;\n \n document.getElementById('quizQuestion').textContent = quiz.question;\n const optionsContainer = document.getElementById('quizOptions');\n optionsContainer.innerHTML = '';\n \n quiz.options.forEach((option, idx) => {\n const btn = document.createElement('button');\n btn.className = 'quiz-option';\n btn.textContent = option;\n btn.addEventListener('click', () => {\n checkQuizAnswer(idx, quiz.correct, animal.name);\n });\n optionsContainer.appendChild(btn);\n });\n \n document.getElementById('quizFeedback').innerHTML = '';\n quizOverlay.style.visibility = \"visible\";\n }\n \n function checkQuizAnswer(selected, correct, animalName) {\n const feedbackDiv = document.getElementById('quizFeedback');\n if (selected === correct) {\n feedbackDiv.innerHTML = `\u2705 CORRECT! ${animalName}s are truly righteous heroes! \ud83c\udf1f`;\n feedbackDiv.style.color = \"#90be6d\";\n } else {\n const animal = animals[currentIndex];\n const correctAnswer = animal.quiz.options[correct];\n feedbackDiv.innerHTML = `\u274c Not quite! The right answer is: ${correctAnswer}. Keep learning! \ud83d\udc3e`;\n feedbackDiv.style.color = \"#ffb3b3\";\n }\n }\n \n function closeQuiz() {\n quizOverlay.style.visibility = \"hidden\";\n }\n \n function nextAnimal() {\n if (currentIndex < totalAnimals - 1) {\n currentIndex++;\n updateDisplay();\n checkCompletion();\n } else {\n \/\/ Already at last animal, show victory if they've seen all\n showVictory();\n }\n }\n \n function prevAnimal() {\n if (currentIndex > 0) {\n currentIndex--;\n updateDisplay();\n }\n }\n \n function checkCompletion() {\n \/\/ Victory is shown when they click next on the last animal OR via reset\n \/\/ We'll also track if they've seen all via a separate flag\n if (currentIndex === totalAnimals - 1) {\n \/\/ Don't auto-show victory, let them finish\n }\n }\n \n function showVictory() {\n victoryOverlay.style.visibility = \"visible\";\n }\n \n function resetGame() {\n currentIndex = 0;\n updateDisplay();\n victoryOverlay.style.visibility = \"hidden\";\n quizOverlay.style.visibility = \"hidden\";\n infoBox.innerHTML = \"\ud83d\udca1 Tap a button to learn about this animal!\";\n }\n \n \/\/ Event listeners\n revealFactBtn.addEventListener('click', revealFact);\n quizBtn.addEventListener('click', showQuiz);\n document.getElementById('closeQuizBtn').addEventListener('click', closeQuiz);\n prevBtn.addEventListener('click', prevAnimal);\n nextBtn.addEventListener('click', () => {\n if (currentIndex === totalAnimals - 1) {\n showVictory();\n } else {\n nextAnimal();\n }\n });\n resetBtn.addEventListener('click', resetGame);\n victoryResetBtn.addEventListener('click', () => {\n resetGame();\n });\n \n \/\/ Initialize\n updateDisplay();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Righteous Museum | Animal Hero Facts \ud83d\udc3e RIGHTEOUS MUSEUM \ud83d\udc3e Animal Hero Facts \u2014 Tap, Learn & Quiz Yourself! \ud83c\udf1f ANIMAL 1 OF 6 \ud83d\udc15 “What makes this animal a righteous hero?” \ud83d\udcd6 REVEAL FACT \u2753 QUIZ ME! \ud83d\udca1 Tap a button to learn about this animal! \u25c0 PREVIOUS NEXT \u25b6 \ud83d\udd04 START OVER Question? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-792","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/comments?post=792"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/792\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/792\/revisions\/793"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}