Guardian of the Heart: Armor & Virtues Arcade<\/title>\n <style>\n :root {\n --bg-dark: #0f172a;\n --bg-card: #1e293b;\n --accent-gold: #fbbf24;\n --accent-blue: #38bdf8;\n --text-main: #f8fafc;\n --text-muted: #94a3b8;\n --success: #22c55e;\n --danger: #ef4444;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n body {\n background-color: var(--bg-dark);\n color: var(--text-main);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding: 20px;\n }\n\n header {\n text-align: center;\n margin-bottom: 20px;\n }\n\n h1 {\n color: var(--accent-gold);\n font-size: 1.8rem;\n margin-bottom: 5px;\n }\n\n p.subtitle {\n color: var(--text-muted);\n font-size: 0.95rem;\n }\n\n \/* Main Menu Container *\/\n #main-menu {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n gap: 20px;\n width: 100%;\n max-width: 900px;\n margin-top: 20px;\n }\n\n .game-card {\n background-color: var(--bg-card);\n border: 2px solid #334155;\n border-radius: 12px;\n padding: 20px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: transform 0.2s, border-color 0.2s;\n cursor: pointer;\n }\n\n .game-card:hover {\n transform: translateY(-5px);\n border-color: var(--accent-gold);\n }\n\n .game-card h3 {\n color: var(--accent-blue);\n margin-bottom: 10px;\n font-size: 1.2rem;\n }\n\n .game-card p {\n color: var(--text-muted);\n font-size: 0.9rem;\n margin-bottom: 20px;\n line-height: 1.4;\n }\n\n \/* Game Screens *\/\n .screen {\n display: none;\n width: 100%;\n max-width: 700px;\n background-color: var(--bg-card);\n border: 2px solid #334155;\n border-radius: 12px;\n padding: 25px;\n position: relative;\n }\n\n .screen.active {\n display: block;\n }\n\n .back-btn {\n background: transparent;\n border: 1px solid var(--text-muted);\n color: var(--text-muted);\n padding: 6px 12px;\n border-radius: 6px;\n cursor: pointer;\n margin-bottom: 15px;\n font-size: 0.85rem;\n }\n\n .back-btn:hover {\n background: #334155;\n color: var(--text-main);\n }\n\n .btn {\n background-color: var(--accent-gold);\n color: var(--bg-dark);\n border: none;\n padding: 10px 20px;\n font-weight: bold;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n transition: filter 0.2s;\n }\n\n .btn:hover {\n filter: brightness(1.1);\n }\n\n \/* Game 1: Armor Builder Styles *\/\n .builder-workspace {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n }\n\n .character-zone {\n width: 180px;\n height: 220px;\n border: 2px dashed #475569;\n border-radius: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n background: #0f172a;\n }\n\n .slot {\n width: 140px;\n height: 40px;\n border: 2px solid #64748b;\n border-radius: 6px;\n margin: 5px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.8rem;\n color: var(--text-muted);\n background: #1e293b;\n }\n\n .slot.filled {\n border-color: var(--success);\n color: var(--success);\n background: rgba(34, 197, 94, 0.1);\n }\n\n .parts-pool {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n .armor-piece {\n background: #334155;\n border: 1px solid var(--accent-gold);\n padding: 8px 14px;\n border-radius: 6px;\n cursor: grab;\n font-size: 0.85rem;\n user-select: none;\n }\n\n .armor-piece:active {\n cursor: grabbing;\n }\n\n \/* Game 2: Heart Shield Challenge Styles *\/\n .arena {\n height: 250px;\n background: #0f172a;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n border: 1px solid #334155;\n }\n\n .shield-avatar {\n width: 50px;\n height: 50px;\n background: var(--accent-blue);\n border-radius: 50%;\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: var(--bg-dark);\n box-shadow: 0 0 15px var(--accent-blue);\n }\n\n .floating-item {\n position: absolute;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: bold;\n cursor: pointer;\n animation: floatDown 3s linear infinite;\n }\n\n .bad-item {\n background: var(--danger);\n color: white;\n }\n\n .good-item {\n background: var(--success);\n color: white;\n }\n\n @keyframes floatDown {\n 0% { top: -30px; }\n 100% { top: 230px; }\n }\n\n .score-board {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n font-size: 0.9rem;\n color: var(--accent-gold);\n }\n\n \/* Game 3: Truth & Rules Matcher Styles *\/\n .question-box {\n font-size: 1.05rem;\n margin-bottom: 20px;\n text-align: center;\n min-height: 50px;\n }\n\n .choices-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n\n .choice-btn {\n background: #334155;\n border: none;\n color: white;\n padding: 12px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n transition: background 0.2s;\n }\n\n .choice-btn:hover {\n background: #475569;\n }\n\n .feedback-text {\n text-align: center;\n margin-top: 15px;\n font-weight: bold;\n min-height: 24px;\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <h1>Armor & Virtues Arcade<\/h1>\n <p class=\"subtitle\">Choose a mini-game to play and learn!<\/p>\n <\/header>\n\n \n <div id=\"main-menu\">\n <div class=\"game-card\" onclick=\"switchScreen('game-1')\">\n <div>\n <h3>1. The Armor Workshop<\/h3>\n <p>Assemble historical Roman upper-body armor pieces onto the soldier correctly to see how protection works!<\/p>\n <\/div>\n <button class=\"btn\">Play Game<\/button>\n <\/div>\n\n <div class=\"game-card\" onclick=\"switchScreen('game-2')\">\n <div>\n <h3>2. Heart Shield Challenge<\/h3>\n <p>Tap good choices to shield your core while dodging negative distractions in this fast-paced mini challenge!<\/p>\n <\/div>\n <button class=\"btn\">Play Game<\/button>\n <\/div>\n\n <div class=\"game-card\" onclick=\"switchScreen('game-3')\">\n <div>\n <h3>3. Truth & Righteousness Quiz<\/h3>\n <p>Test your knowledge on how moral choices guard your inner life and conscience.<\/p>\n <\/div>\n <button class=\"btn\">Play Game<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"game-1\" class=\"screen\">\n <button class=\"back-btn\" onclick=\"switchScreen('main-menu')\">\u2190 Back to Menu<\/button>\n <h3>The Armor Workshop<\/h3>\n <p class=\"subtitle\" style=\"margin-bottom: 15px;\">Drag or click parts to equip the upper torso correctly.<\/p>\n \n <div class=\"builder-workspace\">\n <div class=\"character-zone\">\n <div style=\"font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px;\">Legionnaire Body<\/div>\n <div id=\"slot-chest\" class=\"slot\">Chest Plate<\/div>\n <div id=\"slot-back\" class=\"slot\">Back Plate<\/div>\n <div id=\"slot-shoulders\" class=\"slot\">Shoulder Guards<\/div>\n <\/div>\n <div class=\"parts-pool\" id=\"parts-pool\">\n <div class=\"armor-piece\" draggable=\"true\" onclick=\"equipPart('chest')\">Chest Plate<\/div>\n <div class=\"armor-piece\" draggable=\"true\" onclick=\"equipPart('back')\">Back Plate<\/div>\n <div class=\"armor-piece\" draggable=\"true\" onclick=\"equipPart('shoulders')\">Shoulder Guards<\/div>\n <\/div>\n <div id=\"g1-msg\" class=\"feedback-text\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"game-2\" class=\"screen\">\n <button class=\"back-btn\" onclick=\"switchScreen('main-menu')\">\u2190 Back to Menu<\/button>\n <h3>Heart Shield Challenge<\/h3>\n <div class=\"score-board\">\n <span>Score: <strong id=\"g2-score\">0<\/strong><\/span>\n <span>Target: 5 points<\/span>\n <\/div>\n <div class=\"arena\" id=\"arena\">\n <div class=\"shield-avatar\">\u2764\ufe0f<\/div>\n <\/div>\n <div id=\"g2-controls\" style=\"text-align: center; margin-top: 15px;\">\n <button class=\"btn\" onclick=\"startShieldGame()\">Start Challenge<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"game-3\" class=\"screen\">\n <button class=\"back-btn\" onclick=\"switchScreen('main-menu')\">\u2190 Back to Menu<\/button>\n <h3>Truth & Righteousness Quiz<\/h3>\n <div id=\"quiz-container\" style=\"margin-top: 20px;\">\n <div id=\"question-box\" class=\"question-box\">Loading question…<\/div>\n <div class=\"choices-grid\" id=\"choices-grid\"><\/div>\n <div id=\"q-feedback\" class=\"feedback-text\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n function switchScreen(screenId) {\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById('main-menu').style.display = 'none';\n\n if (screenId === 'main-menu') {\n document.getElementById('main-menu').style.display = 'grid';\n resetGameStates();\n } else {\n document.getElementById(screenId).classList.add('active');\n if (screenId === 'game-3') loadQuizQuestion();\n }\n }\n\n function resetGameStates() {\n \/\/ Reset Game 1\n equipped = { chest: false, back: false, shoulders: false };\n document.getElementById('slot-chest').className = 'slot';\n document.getElementById('slot-chest').innerText = 'Chest Plate';\n document.getElementById('slot-back').className = 'slot';\n document.getElementById('slot-back').innerText = 'Back Plate';\n document.getElementById('slot-shoulders').className = 'slot';\n document.getElementById('slot-shoulders').innerText = 'Shoulder Guards';\n document.getElementById('g1-msg').innerText = '';\n document.getElementById('parts-pool').style.display = 'flex';\n\n \/\/ Reset Game 2\n g2Active = false;\n document.getElementById('g2-score').innerText = '0';\n document.getElementById('g2-controls').innerHTML = '<button class=\"btn\" onclick=\"startShieldGame()\">Start Challenge<\/button>';\n document.querySelectorAll('.floating-item').forEach(el => el.remove());\n }\n\n \/\/ --- GAME 1 LOGIC ---\n let equipped = { chest: false, back: false, shoulders: false };\n function equipPart(part) {\n if (!equipped[part]) {\n equipped[part] = true;\n const slot = document.getElementById(`slot-${part}`);\n slot.classList.add('filled');\n slot.innerText = part.toUpperCase() + ' PROTECTED';\n \n if (equipped.chest && equipped.back && equipped.shoulders) {\n document.getElementById('g1-msg').style.color = 'var(--success)';\n document.getElementById('g1-msg').innerText = 'Awesome! Upper body fully guarded!';\n document.getElementById('parts-pool').style.display = 'none';\n }\n }\n }\n\n \/\/ --- GAME 2 LOGIC ---\n let g2Score = 0;\n let g2Active = false;\n let itemSpawner;\n\n function startShieldGame() {\n g2Score = 0;\n g2Active = true;\n document.getElementById('g2-score').innerText = g2Score;\n document.getElementById('g2-controls').innerHTML = '<p style=\"color: var(--text-muted); font-size: 0.85rem;\">Click the Green Good choices, avoid Red Bad choices!<\/p>';\n \n const arena = document.getElementById('arena');\n \/\/ Clear old items\n arena.querySelectorAll('.floating-item').forEach(e => e.remove());\n\n itemSpawner = setInterval(() => {\n if (!g2Active) return;\n const item = document.createElement('div');\n const isGood = Math.random() > 0.4;\n item.className = `floating-item ${isGood ? 'good-item' : 'bad-item'}`;\n item.innerText = isGood ? 'Kindness' : 'Bitterness';\n item.style.left = Math.random() * 75 + '%';\n \n item.onclick = () => {\n if (!g2Active) return;\n if (isGood) {\n g2Score++;\n document.getElementById('g2-score').innerText = g2Score;\n if (g2Score >= 5) {\n endShieldGame(true);\n }\n } else {\n g2Score = Math.max(0, g2Score - 1);\n document.getElementById('g2-score').innerText = g2Score;\n }\n item.remove();\n };\n\n \/\/ Animation cleanup\n item.addEventListener('animationend', () => {\n item.remove();\n });\n\n arena.appendChild(item);\n }, 1200);\n }\n\n function endShieldGame(won) {\n g2Active = false;\n clearInterval(itemSpawner);\n document.querySelectorAll('.floating-item').forEach(e => e.remove());\n document.getElementById('g2-controls').innerHTML = `\n <p style=\"color: var(--success); font-weight: bold; margin-bottom: 10px;\">${won ? '\ud83c\udf89 Challenge Completed! Heart Guarded!' : 'Game Over'}<\/p>\n <button class=\"btn\" onclick=\"startShieldGame()\">Play Again<\/button>\n `;\n }\n\n \/\/ --- GAME 3 LOGIC ---\n const quizData = [\n {\n q: \"What does the 'Breastplate of Righteousness' protect in spiritual context?\",\n choices: [\"The legs and feet\", \"The heart and moral core\", \"The hands and grip\", \"Only the helmet area\"],\n answer: 1\n },\n {\n q: \"In ancient Roman history, why did armor cover the whole torso instead of just a tiny spot?\",\n choices: [\"To look colorful\", \"To protect all vital organs like ribs and lungs\", \"To carry heavy tools\", \"It was just for decoration\"],\n answer: 1\n },\n {\n q: \"Choosing to do what is honest and kind relates to which piece of moral equipment?\",\n choices: [\"Righteousness\", \"Running shoes\", \"A heavy backpack\", \"A baseball glove\"],\n answer: 0\n }\n ];\n let currentQuiz = 0;\n\n function loadQuizQuestion() {\n if (currentQuiz >= quizData.length) {\n currentQuiz = 0;\n }\n const qData = quizData[currentQuiz];\n document.getElementById('question-box').innerText = qData.q;\n document.getElementById('q-feedback').innerText = '';\n \n const grid = document.getElementById('choices-grid');\n grid.innerHTML = '';\n qData.choices.forEach((choice, index) => {\n const btn = document.createElement('button');\n btn.className = 'choice-btn';\n btn.innerText = choice;\n btn.onclick = () => checkQuizAnswer(index, qData.answer);\n grid.appendChild(btn);\n });\n }\n\n function checkQuizAnswer(selected, correct) {\n const fb = document.getElementById('q-feedback');\n if (selected === correct) {\n fb.style.color = 'var(--success)';\n fb.innerText = 'Correct! Great job learning.';\n setTimeout(() => {\n currentQuiz++;\n loadQuizQuestion();\n }, 1500);\n } else {\n fb.style.color = 'var(--danger)';\n fb.innerText = 'Not quite, try again!';\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Guardian of the Heart: Armor & Virtues Arcade Armor & Virtues Arcade Choose a mini-game to play and learn! 1. The Armor Workshop Assemble historical Roman upper-body armor pieces onto the soldier correctly to see how protection works! Play Game 2. Heart Shield Challenge Tap good choices to shield your core while dodging negative distractions […]<\/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-2262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2262","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=2262"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2262\/revisions"}],"predecessor-version":[{"id":2263,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2262\/revisions\/2263"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=2262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2262,"date":"2026-08-30T17:36:33","date_gmt":"2026-08-30T17:36:33","guid":{"rendered":"https:\/\/museum.wiserighteous.org\/?page_id=2262"},"modified":"2026-08-30T17:36:33","modified_gmt":"2026-08-30T17:36:33","slug":"game-for-lorica-segmentata","status":"publish","type":"page","link":"https:\/\/museum.wiserighteous.org\/index.php\/game-for-lorica-segmentata\/","title":{"rendered":"Game for Lorica Segmentata"},"content":{"rendered":"\n\n\n\n \n \n Guardian of the Heart: Armor & Virtues Arcade<\/title>\n <style>\n :root {\n --bg-dark: #0f172a;\n --bg-card: #1e293b;\n --accent-gold: #fbbf24;\n --accent-blue: #38bdf8;\n --text-main: #f8fafc;\n --text-muted: #94a3b8;\n --success: #22c55e;\n --danger: #ef4444;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n body {\n background-color: var(--bg-dark);\n color: var(--text-main);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding: 20px;\n }\n\n header {\n text-align: center;\n margin-bottom: 20px;\n }\n\n h1 {\n color: var(--accent-gold);\n font-size: 1.8rem;\n margin-bottom: 5px;\n }\n\n p.subtitle {\n color: var(--text-muted);\n font-size: 0.95rem;\n }\n\n \/* Main Menu Container *\/\n #main-menu {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n gap: 20px;\n width: 100%;\n max-width: 900px;\n margin-top: 20px;\n }\n\n .game-card {\n background-color: var(--bg-card);\n border: 2px solid #334155;\n border-radius: 12px;\n padding: 20px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: transform 0.2s, border-color 0.2s;\n cursor: pointer;\n }\n\n .game-card:hover {\n transform: translateY(-5px);\n border-color: var(--accent-gold);\n }\n\n .game-card h3 {\n color: var(--accent-blue);\n margin-bottom: 10px;\n font-size: 1.2rem;\n }\n\n .game-card p {\n color: var(--text-muted);\n font-size: 0.9rem;\n margin-bottom: 20px;\n line-height: 1.4;\n }\n\n \/* Game Screens *\/\n .screen {\n display: none;\n width: 100%;\n max-width: 700px;\n background-color: var(--bg-card);\n border: 2px solid #334155;\n border-radius: 12px;\n padding: 25px;\n position: relative;\n }\n\n .screen.active {\n display: block;\n }\n\n .back-btn {\n background: transparent;\n border: 1px solid var(--text-muted);\n color: var(--text-muted);\n padding: 6px 12px;\n border-radius: 6px;\n cursor: pointer;\n margin-bottom: 15px;\n font-size: 0.85rem;\n }\n\n .back-btn:hover {\n background: #334155;\n color: var(--text-main);\n }\n\n .btn {\n background-color: var(--accent-gold);\n color: var(--bg-dark);\n border: none;\n padding: 10px 20px;\n font-weight: bold;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n transition: filter 0.2s;\n }\n\n .btn:hover {\n filter: brightness(1.1);\n }\n\n \/* Game 1: Armor Builder Styles *\/\n .builder-workspace {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n }\n\n .character-zone {\n width: 180px;\n height: 220px;\n border: 2px dashed #475569;\n border-radius: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n background: #0f172a;\n }\n\n .slot {\n width: 140px;\n height: 40px;\n border: 2px solid #64748b;\n border-radius: 6px;\n margin: 5px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.8rem;\n color: var(--text-muted);\n background: #1e293b;\n }\n\n .slot.filled {\n border-color: var(--success);\n color: var(--success);\n background: rgba(34, 197, 94, 0.1);\n }\n\n .parts-pool {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n .armor-piece {\n background: #334155;\n border: 1px solid var(--accent-gold);\n padding: 8px 14px;\n border-radius: 6px;\n cursor: grab;\n font-size: 0.85rem;\n user-select: none;\n }\n\n .armor-piece:active {\n cursor: grabbing;\n }\n\n \/* Game 2: Heart Shield Challenge Styles *\/\n .arena {\n height: 250px;\n background: #0f172a;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n border: 1px solid #334155;\n }\n\n .shield-avatar {\n width: 50px;\n height: 50px;\n background: var(--accent-blue);\n border-radius: 50%;\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: var(--bg-dark);\n box-shadow: 0 0 15px var(--accent-blue);\n }\n\n .floating-item {\n position: absolute;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: bold;\n cursor: pointer;\n animation: floatDown 3s linear infinite;\n }\n\n .bad-item {\n background: var(--danger);\n color: white;\n }\n\n .good-item {\n background: var(--success);\n color: white;\n }\n\n @keyframes floatDown {\n 0% { top: -30px; }\n 100% { top: 230px; }\n }\n\n .score-board {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n font-size: 0.9rem;\n color: var(--accent-gold);\n }\n\n \/* Game 3: Truth & Rules Matcher Styles *\/\n .question-box {\n font-size: 1.05rem;\n margin-bottom: 20px;\n text-align: center;\n min-height: 50px;\n }\n\n .choices-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n\n .choice-btn {\n background: #334155;\n border: none;\n color: white;\n padding: 12px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n transition: background 0.2s;\n }\n\n .choice-btn:hover {\n background: #475569;\n }\n\n .feedback-text {\n text-align: center;\n margin-top: 15px;\n font-weight: bold;\n min-height: 24px;\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <h1>Armor & Virtues Arcade<\/h1>\n <p class=\"subtitle\">Choose a mini-game to play and learn!<\/p>\n <\/header>\n\n \n <div id=\"main-menu\">\n <div class=\"game-card\" onclick=\"switchScreen('game-1')\">\n <div>\n <h3>1. The Armor Workshop<\/h3>\n <p>Assemble historical Roman upper-body armor pieces onto the soldier correctly to see how protection works!<\/p>\n <\/div>\n <button class=\"btn\">Play Game<\/button>\n <\/div>\n\n <div class=\"game-card\" onclick=\"switchScreen('game-2')\">\n <div>\n <h3>2. Heart Shield Challenge<\/h3>\n <p>Tap good choices to shield your core while dodging negative distractions in this fast-paced mini challenge!<\/p>\n <\/div>\n <button class=\"btn\">Play Game<\/button>\n <\/div>\n\n <div class=\"game-card\" onclick=\"switchScreen('game-3')\">\n <div>\n <h3>3. Truth & Righteousness Quiz<\/h3>\n <p>Test your knowledge on how moral choices guard your inner life and conscience.<\/p>\n <\/div>\n <button class=\"btn\">Play Game<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"game-1\" class=\"screen\">\n <button class=\"back-btn\" onclick=\"switchScreen('main-menu')\">\u2190 Back to Menu<\/button>\n <h3>The Armor Workshop<\/h3>\n <p class=\"subtitle\" style=\"margin-bottom: 15px;\">Drag or click parts to equip the upper torso correctly.<\/p>\n \n <div class=\"builder-workspace\">\n <div class=\"character-zone\">\n <div style=\"font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px;\">Legionnaire Body<\/div>\n <div id=\"slot-chest\" class=\"slot\">Chest Plate<\/div>\n <div id=\"slot-back\" class=\"slot\">Back Plate<\/div>\n <div id=\"slot-shoulders\" class=\"slot\">Shoulder Guards<\/div>\n <\/div>\n <div class=\"parts-pool\" id=\"parts-pool\">\n <div class=\"armor-piece\" draggable=\"true\" onclick=\"equipPart('chest')\">Chest Plate<\/div>\n <div class=\"armor-piece\" draggable=\"true\" onclick=\"equipPart('back')\">Back Plate<\/div>\n <div class=\"armor-piece\" draggable=\"true\" onclick=\"equipPart('shoulders')\">Shoulder Guards<\/div>\n <\/div>\n <div id=\"g1-msg\" class=\"feedback-text\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"game-2\" class=\"screen\">\n <button class=\"back-btn\" onclick=\"switchScreen('main-menu')\">\u2190 Back to Menu<\/button>\n <h3>Heart Shield Challenge<\/h3>\n <div class=\"score-board\">\n <span>Score: <strong id=\"g2-score\">0<\/strong><\/span>\n <span>Target: 5 points<\/span>\n <\/div>\n <div class=\"arena\" id=\"arena\">\n <div class=\"shield-avatar\">\u2764\ufe0f<\/div>\n <\/div>\n <div id=\"g2-controls\" style=\"text-align: center; margin-top: 15px;\">\n <button class=\"btn\" onclick=\"startShieldGame()\">Start Challenge<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"game-3\" class=\"screen\">\n <button class=\"back-btn\" onclick=\"switchScreen('main-menu')\">\u2190 Back to Menu<\/button>\n <h3>Truth & Righteousness Quiz<\/h3>\n <div id=\"quiz-container\" style=\"margin-top: 20px;\">\n <div id=\"question-box\" class=\"question-box\">Loading question…<\/div>\n <div class=\"choices-grid\" id=\"choices-grid\"><\/div>\n <div id=\"q-feedback\" class=\"feedback-text\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n function switchScreen(screenId) {\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById('main-menu').style.display = 'none';\n\n if (screenId === 'main-menu') {\n document.getElementById('main-menu').style.display = 'grid';\n resetGameStates();\n } else {\n document.getElementById(screenId).classList.add('active');\n if (screenId === 'game-3') loadQuizQuestion();\n }\n }\n\n function resetGameStates() {\n \/\/ Reset Game 1\n equipped = { chest: false, back: false, shoulders: false };\n document.getElementById('slot-chest').className = 'slot';\n document.getElementById('slot-chest').innerText = 'Chest Plate';\n document.getElementById('slot-back').className = 'slot';\n document.getElementById('slot-back').innerText = 'Back Plate';\n document.getElementById('slot-shoulders').className = 'slot';\n document.getElementById('slot-shoulders').innerText = 'Shoulder Guards';\n document.getElementById('g1-msg').innerText = '';\n document.getElementById('parts-pool').style.display = 'flex';\n\n \/\/ Reset Game 2\n g2Active = false;\n document.getElementById('g2-score').innerText = '0';\n document.getElementById('g2-controls').innerHTML = '<button class=\"btn\" onclick=\"startShieldGame()\">Start Challenge<\/button>';\n document.querySelectorAll('.floating-item').forEach(el => el.remove());\n }\n\n \/\/ --- GAME 1 LOGIC ---\n let equipped = { chest: false, back: false, shoulders: false };\n function equipPart(part) {\n if (!equipped[part]) {\n equipped[part] = true;\n const slot = document.getElementById(`slot-${part}`);\n slot.classList.add('filled');\n slot.innerText = part.toUpperCase() + ' PROTECTED';\n \n if (equipped.chest && equipped.back && equipped.shoulders) {\n document.getElementById('g1-msg').style.color = 'var(--success)';\n document.getElementById('g1-msg').innerText = 'Awesome! Upper body fully guarded!';\n document.getElementById('parts-pool').style.display = 'none';\n }\n }\n }\n\n \/\/ --- GAME 2 LOGIC ---\n let g2Score = 0;\n let g2Active = false;\n let itemSpawner;\n\n function startShieldGame() {\n g2Score = 0;\n g2Active = true;\n document.getElementById('g2-score').innerText = g2Score;\n document.getElementById('g2-controls').innerHTML = '<p style=\"color: var(--text-muted); font-size: 0.85rem;\">Click the Green Good choices, avoid Red Bad choices!<\/p>';\n \n const arena = document.getElementById('arena');\n \/\/ Clear old items\n arena.querySelectorAll('.floating-item').forEach(e => e.remove());\n\n itemSpawner = setInterval(() => {\n if (!g2Active) return;\n const item = document.createElement('div');\n const isGood = Math.random() > 0.4;\n item.className = `floating-item ${isGood ? 'good-item' : 'bad-item'}`;\n item.innerText = isGood ? 'Kindness' : 'Bitterness';\n item.style.left = Math.random() * 75 + '%';\n \n item.onclick = () => {\n if (!g2Active) return;\n if (isGood) {\n g2Score++;\n document.getElementById('g2-score').innerText = g2Score;\n if (g2Score >= 5) {\n endShieldGame(true);\n }\n } else {\n g2Score = Math.max(0, g2Score - 1);\n document.getElementById('g2-score').innerText = g2Score;\n }\n item.remove();\n };\n\n \/\/ Animation cleanup\n item.addEventListener('animationend', () => {\n item.remove();\n });\n\n arena.appendChild(item);\n }, 1200);\n }\n\n function endShieldGame(won) {\n g2Active = false;\n clearInterval(itemSpawner);\n document.querySelectorAll('.floating-item').forEach(e => e.remove());\n document.getElementById('g2-controls').innerHTML = `\n <p style=\"color: var(--success); font-weight: bold; margin-bottom: 10px;\">${won ? '\ud83c\udf89 Challenge Completed! Heart Guarded!' : 'Game Over'}<\/p>\n <button class=\"btn\" onclick=\"startShieldGame()\">Play Again<\/button>\n `;\n }\n\n \/\/ --- GAME 3 LOGIC ---\n const quizData = [\n {\n q: \"What does the 'Breastplate of Righteousness' protect in spiritual context?\",\n choices: [\"The legs and feet\", \"The heart and moral core\", \"The hands and grip\", \"Only the helmet area\"],\n answer: 1\n },\n {\n q: \"In ancient Roman history, why did armor cover the whole torso instead of just a tiny spot?\",\n choices: [\"To look colorful\", \"To protect all vital organs like ribs and lungs\", \"To carry heavy tools\", \"It was just for decoration\"],\n answer: 1\n },\n {\n q: \"Choosing to do what is honest and kind relates to which piece of moral equipment?\",\n choices: [\"Righteousness\", \"Running shoes\", \"A heavy backpack\", \"A baseball glove\"],\n answer: 0\n }\n ];\n let currentQuiz = 0;\n\n function loadQuizQuestion() {\n if (currentQuiz >= quizData.length) {\n currentQuiz = 0;\n }\n const qData = quizData[currentQuiz];\n document.getElementById('question-box').innerText = qData.q;\n document.getElementById('q-feedback').innerText = '';\n \n const grid = document.getElementById('choices-grid');\n grid.innerHTML = '';\n qData.choices.forEach((choice, index) => {\n const btn = document.createElement('button');\n btn.className = 'choice-btn';\n btn.innerText = choice;\n btn.onclick = () => checkQuizAnswer(index, qData.answer);\n grid.appendChild(btn);\n });\n }\n\n function checkQuizAnswer(selected, correct) {\n const fb = document.getElementById('q-feedback');\n if (selected === correct) {\n fb.style.color = 'var(--success)';\n fb.innerText = 'Correct! Great job learning.';\n setTimeout(() => {\n currentQuiz++;\n loadQuizQuestion();\n }, 1500);\n } else {\n fb.style.color = 'var(--danger)';\n fb.innerText = 'Not quite, try again!';\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Guardian of the Heart: Armor & Virtues Arcade Armor & Virtues Arcade Choose a mini-game to play and learn! 1. The Armor Workshop Assemble historical Roman upper-body armor pieces onto the soldier correctly to see how protection works! Play Game 2. Heart Shield Challenge Tap good choices to shield your core while dodging negative distractions […]<\/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-2262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2262","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=2262"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2262\/revisions"}],"predecessor-version":[{"id":2263,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2262\/revisions\/2263"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=2262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}