{"id":2317,"date":"2026-09-01T01:51:03","date_gmt":"2026-09-01T01:51:03","guid":{"rendered":"https:\/\/museum.wiserighteous.org\/?page_id=2317"},"modified":"2026-09-01T01:55:56","modified_gmt":"2026-09-01T01:55:56","slug":"interactive-games-explore-the-exhibition","status":"publish","type":"page","link":"https:\/\/museum.wiserighteous.org\/index.php\/interactive-games-explore-the-exhibition\/","title":{"rendered":"Interactive Games \u2014 Explore the Exhibition"},"content":{"rendered":"\n<!-- Righteous AI Gallery \u2014 Kids Games Zone -->\n<!-- Three Interactive Games: Memory Match \u00b7 Spin the Wheel \u00b7 Sorting Game -->\n\n<style>\n    .kids-zone {\n        max-width: 820px;\n        margin: 0 auto;\n        font-family: 'Segoe UI', Arial, sans-serif;\n        color: #1a1a2e;\n        padding: 20px;\n    }\n\n    .kids-header {\n        text-align: center;\n        background: linear-gradient(135deg, #1a1a2e 0%, #2d2a1e 100%);\n        padding: 24px 20px;\n        border-radius: 20px 20px 0 0;\n        color: #f5eed6;\n        border-bottom: 4px solid #c9a84c;\n    }\n\n    .kids-header h2 {\n        font-size: 28px;\n        margin: 0;\n        font-weight: 700;\n    }\n\n    .kids-header h2 i {\n        color: #c9a84c;\n        margin-right: 10px;\n    }\n\n    .kids-header p {\n        font-size: 15px;\n        margin: 6px 0 0 0;\n        opacity: 0.85;\n        font-style: italic;\n    }\n\n    \/* Tab Navigation *\/\n    .tab-nav {\n        display: flex;\n        gap: 6px;\n        background: #f5eed6;\n        padding: 10px 14px;\n        border-left: 2px solid #c9a84c;\n        border-right: 2px solid #c9a84c;\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .tab-btn {\n        padding: 10px 18px;\n        border: 2px solid #e0d8cc;\n        border-radius: 30px;\n        background: white;\n        cursor: pointer;\n        font-family: 'Segoe UI', Arial, sans-serif;\n        font-size: 14px;\n        font-weight: 600;\n        color: #666;\n        transition: 0.25s ease;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        flex: 1;\n        min-width: 100px;\n        justify-content: center;\n    }\n\n    .tab-btn:hover {\n        border-color: #c9a84c;\n        background: #f9f6f0;\n    }\n\n    .tab-btn.active {\n        border-color: #c9a84c;\n        background: #1a1a2e;\n        color: white;\n    }\n\n    .tab-btn i {\n        font-size: 18px;\n    }\n\n    .tab-content {\n        display: none;\n        padding: 24px 20px 20px 20px;\n        background: white;\n        border-left: 2px solid #c9a84c;\n        border-right: 2px solid #c9a84c;\n        border-bottom: 2px solid #c9a84c;\n        border-radius: 0 0 20px 20px;\n        animation: fadeIn 0.4s ease;\n        min-height: 420px;\n    }\n\n    .tab-content.active {\n        display: block;\n    }\n\n    @keyframes fadeIn {\n        from { opacity: 0; transform: translateY(10px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* ============================================================ *\/\n    \/* GAME 1: MEMORY MATCH *\/\n    \/* ============================================================ *\/\n\n    .game-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 12px;\n        margin: 12px 0;\n    }\n\n    .game-card {\n        aspect-ratio: 1 \/ 1;\n        background: #1a1a2e;\n        border-radius: 14px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 13px;\n        font-weight: 700;\n        cursor: pointer;\n        transition: 0.3s ease;\n        color: white;\n        text-align: center;\n        padding: 8px;\n        border: 3px solid #c9a84c;\n        user-select: none;\n        font-family: 'Segoe UI', Arial, sans-serif;\n        min-height: 80px;\n    }\n\n    .game-card.flipped {\n        background: white;\n        color: #1a1a2e;\n        border-color: #2e7d32;\n        cursor: default;\n        transform: scale(1.02);\n    }\n\n    .game-card.matched {\n        background: #2e7d32;\n        color: white;\n        border-color: #1b5e20;\n        cursor: default;\n        opacity: 0.6;\n        transform: scale(0.95);\n    }\n\n    .game-card:hover:not(.flipped):not(.matched) {\n        transform: scale(1.05);\n        border-color: #c9a84c;\n        box-shadow: 0 4px 12px rgba(201, 168, 76, 0.3);\n    }\n\n    .game-card .icon {\n        font-size: 28px;\n        display: block;\n        margin-bottom: 4px;\n    }\n\n    .game-stats {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 12px 16px;\n        background: #f8f6f3;\n        border-radius: 12px;\n        border: 1px solid #e0d8cc;\n        margin-top: 12px;\n        font-size: 15px;\n        font-weight: 600;\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .game-stats .score {\n        color: #c9a84c;\n    }\n\n    .game-stats .moves {\n        color: #666;\n    }\n\n    .btn {\n        padding: 10px 24px;\n        border: none;\n        border-radius: 30px;\n        font-weight: 700;\n        font-size: 14px;\n        cursor: pointer;\n        transition: 0.25s ease;\n        font-family: 'Segoe UI', Arial, sans-serif;\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        background: #1a1a2e;\n        color: white;\n    }\n\n    .btn:hover {\n        background: #3d3a5c;\n        transform: translateY(-2px);\n    }\n\n    .btn-gold {\n        background: #c9a84c;\n        color: white;\n    }\n\n    .btn-gold:hover {\n        background: #b8923a;\n    }\n\n    .btn-outline {\n        background: transparent;\n        color: #1a1a2e;\n        border: 2px solid #e0d8cc;\n    }\n\n    .btn-outline:hover {\n        border-color: #c9a84c;\n        background: #f9f6f0;\n    }\n\n    .win-message {\n        text-align: center;\n        padding: 20px;\n        background: #e8f5e9;\n        border-radius: 12px;\n        border: 2px solid #2e7d32;\n        margin-top: 12px;\n        display: none;\n    }\n\n    .win-message.show {\n        display: block;\n    }\n\n    .win-message h3 {\n        color: #1b5e20;\n        margin: 0 0 6px 0;\n        font-size: 22px;\n    }\n\n    .win-message p {\n        color: #555;\n        font-size: 16px;\n        margin: 0;\n    }\n\n    .win-message .emoji {\n        font-size: 40px;\n        display: block;\n        margin-bottom: 8px;\n    }\n\n    \/* ============================================================ *\/\n    \/* GAME 2: SPIN THE WHEEL *\/\n    \/* ============================================================ *\/\n\n    .wheel-area {\n        text-align: center;\n    }\n\n    .wheel-container {\n        position: relative;\n        display: inline-block;\n        margin: 10px auto;\n    }\n\n    .wheel {\n        width: 250px;\n        height: 250px;\n        border-radius: 50%;\n        border: 6px solid #c9a84c;\n        position: relative;\n        margin: 0 auto;\n        overflow: hidden;\n        transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);\n        box-shadow: 0 8px 30px rgba(0,0,0,0.2);\n        cursor: pointer;\n    }\n\n    .wheel-segment {\n        position: absolute;\n        width: 50%;\n        height: 50%;\n        top: 0;\n        left: 50%;\n        transform-origin: 0% 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 700;\n        font-size: 11px;\n        color: white;\n        text-shadow: 0 1px 3px rgba(0,0,0,0.3);\n        padding: 6px;\n        text-align: center;\n        box-sizing: border-box;\n        border-right: 2px solid rgba(255,255,255,0.3);\n        clip-path: polygon(0 0, 100% 0, 0 100%);\n    }\n\n    .wheel-segment .inner {\n        transform: rotate(30deg);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 2px;\n        margin-left: -10px;\n        margin-top: -10px;\n    }\n\n    .wheel-segment .inner .icon {\n        font-size: 20px;\n    }\n\n    .wheel-segment .inner .label {\n        font-size: 10px;\n        line-height: 1.2;\n    }\n\n    .wheel-pointer {\n        position: absolute;\n        top: -16px;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 36px;\n        color: #c9a84c;\n        z-index: 10;\n        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\n        line-height: 1;\n    }\n\n    .wheel-result {\n        margin-top: 16px;\n        padding: 16px 20px;\n        background: #f9f6f0;\n        border-radius: 12px;\n        border: 1px solid #e0d8cc;\n        min-height: 80px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .wheel-result .concept {\n        font-size: 24px;\n        font-weight: 700;\n        color: #1a1a2e;\n    }\n\n    .wheel-result .meaning {\n        font-size: 16px;\n        color: #555;\n        margin-top: 4px;\n    }\n\n    .wheel-result .example {\n        font-size: 14px;\n        color: #888;\n        font-style: italic;\n        margin-top: 6px;\n    }\n\n    .wheel-result .empty {\n        color: #aaa;\n        font-size: 15px;\n    }\n\n    .wheel-btn-group {\n        display: flex;\n        gap: 12px;\n        justify-content: center;\n        flex-wrap: wrap;\n        margin-top: 14px;\n    }\n\n    \/* ============================================================ *\/\n    \/* GAME 3: SORTING GAME *\/\n    \/* ============================================================ *\/\n\n    .sort-area {\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .sort-items {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n        justify-content: center;\n        padding: 12px;\n        background: #f8f6f3;\n        border-radius: 12px;\n        border: 2px dashed #e0d8cc;\n        min-height: 70px;\n    }\n\n    .sort-item {\n        padding: 10px 16px;\n        background: white;\n        border-radius: 10px;\n        border: 2px solid #c9a84c;\n        font-weight: 600;\n        font-size: 14px;\n        cursor: grab;\n        transition: 0.2s ease;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        box-shadow: 0 2px 6px rgba(0,0,0,0.06);\n    }\n\n    .sort-item:active {\n        cursor: grabbing;\n        transform: scale(0.95);\n    }\n\n    .sort-item.dragging {\n        opacity: 0.4;\n    }\n\n    .sort-item.placed {\n        opacity: 0.5;\n        cursor: default;\n        border-color: #ccc;\n        background: #f0ebe0;\n    }\n\n    .sort-zones {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 16px;\n    }\n\n    .sort-zone {\n        padding: 16px;\n        border-radius: 12px;\n        border: 3px dashed #e0d8cc;\n        min-height: 120px;\n        text-align: center;\n        transition: 0.3s ease;\n        background: #faf8f5;\n    }\n\n    .sort-zone.correct-zone {\n        border-color: #2e7d32;\n        background: #e8f5e9;\n    }\n\n    .sort-zone.wrong-zone {\n        border-color: #c62828;\n        background: #ffebee;\n    }\n\n    .sort-zone h4 {\n        margin: 0 0 10px 0;\n        font-size: 16px;\n        color: #1a1a2e;\n    }\n\n    .sort-zone h4 i {\n        margin-right: 6px;\n    }\n\n    .sort-zone .items {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n        justify-content: center;\n        min-height: 50px;\n    }\n\n    .sort-zone .items .sort-item {\n        font-size: 13px;\n        padding: 6px 14px;\n        border-color: #2e7d32;\n        background: #e8f5e9;\n        cursor: default;\n    }\n\n    .sort-zone .items .sort-item.wrong-item {\n        border-color: #c62828;\n        background: #ffebee;\n    }\n\n    .sort-feedback {\n        text-align: center;\n        padding: 12px;\n        border-radius: 10px;\n        font-weight: 600;\n        font-size: 15px;\n        display: none;\n    }\n\n    .sort-feedback.show {\n        display: block;\n    }\n\n    .sort-feedback.success {\n        background: #e8f5e9;\n        color: #1b5e20;\n        border: 2px solid #2e7d32;\n    }\n\n    .sort-feedback.fail {\n        background: #ffebee;\n        color: #b71c1c;\n        border: 2px solid #c62828;\n    }\n\n    .sort-score {\n        text-align: center;\n        font-size: 16px;\n        font-weight: 700;\n        color: #1a1a2e;\n        padding: 8px;\n        background: #f8f6f3;\n        border-radius: 8px;\n    }\n\n    .sort-score span {\n        color: #c9a84c;\n    }\n\n    @media (max-width: 600px) {\n        .game-grid {\n            grid-template-columns: repeat(4, 1fr);\n            gap: 8px;\n        }\n        .game-card {\n            font-size: 11px;\n            border-radius: 10px;\n            padding: 4px;\n            min-height: 60px;\n        }\n        .game-card .icon {\n            font-size: 20px;\n        }\n        .sort-zones {\n            grid-template-columns: 1fr;\n        }\n        .wheel {\n            width: 200px;\n            height: 200px;\n        }\n        .tab-btn {\n            font-size: 12px;\n            padding: 8px 12px;\n            min-width: 70px;\n        }\n        .kids-header h2 {\n            font-size: 20px;\n        }\n        .sort-item {\n            font-size: 12px;\n            padding: 8px 12px;\n        }\n    }\n<\/style>\n\n<div class=\"kids-zone\">\n\n    <div class=\"kids-header\">\n        <h2><i class=\"fas fa-gamepad\"><\/i> Righteous Kids Zone<\/h2>\n        <p>Learn about righteousness through fun games!<\/p>\n    <\/div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tab-nav\">\n        <button class=\"tab-btn active\" data-tab=\"game1\"><i class=\"fas fa-puzzle-piece\"><\/i> Memory Match<\/button>\n        <button class=\"tab-btn\" data-tab=\"game2\"><i class=\"fas fa-circle\"><\/i> Spin the Wheel<\/button>\n        <button class=\"tab-btn\" data-tab=\"game3\"><i class=\"fas fa-arrows-alt-h\"><\/i> Sorting Game<\/button>\n    <\/div>\n\n    <!-- ============================================================ -->\n    <!-- GAME 1: MEMORY MATCH -->\n    <!-- ============================================================ -->\n    <div class=\"tab-content active\" id=\"game1\">\n        <p style=\"margin:0 0 10px 0; font-size:14px; color:#666;\"><i class=\"fas fa-info-circle\"><\/i> Match each concept with its meaning!<\/p>\n\n        <div class=\"game-grid\" id=\"matchGrid\"><\/div>\n\n        <div class=\"game-stats\">\n            <span>\u2b50 Score: <span class=\"score\" id=\"matchScore\">0<\/span> \/ 6<\/span>\n            <span class=\"moves\">\ud83d\udd04 Moves: <span id=\"matchMoves\">0<\/span><\/span>\n            <button class=\"btn\" onclick=\"resetMatch()\"><i class=\"fas fa-undo-alt\"><\/i> Reset<\/button>\n        <\/div>\n\n        <div class=\"win-message\" id=\"matchWin\">\n            <span class=\"emoji\">\ud83c\udfc6<\/span>\n            <h3>You Got It All Right!<\/h3>\n            <p>You matched all the righteous concepts! \ud83c\udf89<\/p>\n            <p style=\"font-size:14px; color:#888; margin-top:6px;\">Keep learning about righteousness!<\/p>\n        <\/div>\n    <\/div>\n\n    <!-- ============================================================ -->\n    <!-- GAME 2: SPIN THE WHEEL -->\n    <!-- ============================================================ -->\n    <div class=\"tab-content\" id=\"game2\">\n        <div class=\"wheel-area\">\n            <p style=\"margin:0 0 12px 0; font-size:14px; color:#666;\"><i class=\"fas fa-info-circle\"><\/i> Click the wheel to spin and learn!<\/p>\n\n            <div class=\"wheel-container\">\n                <div class=\"wheel-pointer\">\u25bc<\/div>\n                <div class=\"wheel\" id=\"wheel\"><\/div>\n            <\/div>\n\n            <div class=\"wheel-result\" id=\"wheelResult\">\n                <span class=\"empty\">\ud83d\udc46 Click the wheel to spin!<\/span>\n            <\/div>\n\n            <div class=\"wheel-btn-group\">\n                <button class=\"btn btn-gold\" onclick=\"spinWheel()\"><i class=\"fas fa-sync-alt\"><\/i> Spin!<\/button>\n                <button class=\"btn btn-outline\" onclick=\"resetWheel()\"><i class=\"fas fa-undo-alt\"><\/i> Reset<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- ============================================================ -->\n    <!-- GAME 3: SORTING GAME -->\n    <!-- ============================================================ -->\n    <div class=\"tab-content\" id=\"game3\">\n        <p style=\"margin:0 0 10px 0; font-size:14px; color:#666;\"><i class=\"fas fa-info-circle\"><\/i> Drag each action to the correct category!<\/p>\n\n        <div class=\"sort-area\">\n            <div class=\"sort-items\" id=\"sortItems\"><\/div>\n\n            <div class=\"sort-zones\">\n                <div class=\"sort-zone\" id=\"zoneRighteous\" data-zone=\"righteous\">\n                    <h4><i class=\"fas fa-check-circle\" style=\"color:#2e7d32;\"><\/i> \u2705 Righteous<\/h4>\n                    <div class=\"items\" id=\"zoneRighteousItems\"><\/div>\n                <\/div>\n                <div class=\"sort-zone\" id=\"zoneUnrighteous\" data-zone=\"unrighteous\">\n                    <h4><i class=\"fas fa-times-circle\" style=\"color:#c62828;\"><\/i> \u274c Unrighteous<\/h4>\n                    <div class=\"items\" id=\"zoneUnrighteousItems\"><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"sort-feedback\" id=\"sortFeedback\"><\/div>\n\n            <div class=\"sort-score\">\n                Score: <span id=\"sortScore\">0<\/span> \/ <span id=\"sortTotal\">0<\/span>\n            <\/div>\n\n            <div style=\"text-align:center; margin-top:10px;\">\n                <button class=\"btn btn-gold\" onclick=\"resetSort()\"><i class=\"fas fa-undo-alt\"><\/i> Reset Game<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\n    \/\/ ================================================================\n    \/\/ GAME 1: MEMORY MATCH\n    \/\/ ================================================================\n\n    const matchPairs = [\n        { id: 1, concept: 'Integrity', meaning: 'Being honest and truthful', icon: '\ud83c\udf1f' },\n        { id: 2, concept: 'Courage', meaning: 'Standing up for what is right', icon: '\ud83e\udd81' },\n        { id: 3, concept: 'Fairness', meaning: 'Treating everyone equally', icon: '\u2696\ufe0f' },\n        { id: 4, concept: 'Responsibility', meaning: 'Owning your actions', icon: '\ud83e\udd1d' },\n        { id: 5, concept: 'Conscience', meaning: 'Knowing right from wrong', icon: '\ud83d\udca1' },\n        { id: 6, concept: 'Justice', meaning: 'Making things right', icon: '\ud83c\udf08' }\n    ];\n\n    let matchCards = [];\n    let matchFlipped = [];\n    let matchMatched = [];\n    let matchMovesCount = 0;\n    let matchScoreCount = 0;\n    let matchLock = false;\n\n    function shuffleMatch(arr) {\n        for (let i = arr.length - 1; i > 0; i--) {\n            const j = Math.floor(Math.random() * (i + 1));\n            [arr[i], arr[j]] = [arr[j], arr[i]];\n        }\n        return arr;\n    }\n\n    function initMatchCards() {\n        const deck = [];\n        matchPairs.forEach(p => {\n            deck.push({ ...p, type: 'concept', pairId: p.id });\n            deck.push({ ...p, type: 'meaning', pairId: p.id });\n        });\n        return shuffleMatch(deck);\n    }\n\n    function renderMatch() {\n        const grid = document.getElementById('matchGrid');\n        let html = '';\n        matchCards.forEach((card, idx) => {\n            const isFlipped = matchFlipped.includes(idx);\n            const isMatched = matchMatched.includes(idx);\n            let classes = 'game-card';\n            if (isMatched) classes += ' matched';\n            else if (isFlipped) classes += ' flipped';\n\n            html += `\n                <div class=\"${classes}\" data-idx=\"${idx}\" onclick=\"clickMatchCard(${idx})\">\n                    ${isMatched ? '\u2705' : isFlipped ? `${card.icon}<br>${card.type === 'concept' ? card.concept : card.meaning}` : '\u2753'}\n                <\/div>\n            `;\n        });\n        grid.innerHTML = html;\n\n        document.getElementById('matchScore').textContent = matchScoreCount;\n        document.getElementById('matchMoves').textContent = matchMovesCount;\n\n        if (matchScoreCount === 6) {\n            document.getElementById('matchWin').classList.add('show');\n        } else {\n            document.getElementById('matchWin').classList.remove('show');\n        }\n    }\n\n    function clickMatchCard(idx) {\n        if (matchLock) return;\n        if (matchMatched.includes(idx)) return;\n        if (matchFlipped.includes(idx)) return;\n        if (matchFlipped.length === 2) return;\n\n        matchFlipped.push(idx);\n        renderMatch();\n\n        if (matchFlipped.length === 2) {\n            matchLock = true;\n            matchMovesCount++;\n            const card1 = matchCards[matchFlipped[0]];\n            const card2 = matchCards[matchFlipped[1]];\n\n            if (card1.pairId === card2.pairId && matchFlipped[0] !== matchFlipped[1]) {\n                matchMatched.push(matchFlipped[0], matchFlipped[1]);\n                matchScoreCount++;\n                matchFlipped = [];\n                matchLock = false;\n                renderMatch();\n            } else {\n                setTimeout(() => {\n                    matchFlipped = [];\n                    matchLock = false;\n                    renderMatch();\n                }, 800);\n            }\n        }\n    }\n\n    function resetMatch() {\n        matchCards = initMatchCards();\n        matchFlipped = [];\n        matchMatched = [];\n        matchMovesCount = 0;\n        matchScoreCount = 0;\n        matchLock = false;\n        renderMatch();\n    }\n\n    \/\/ ================================================================\n    \/\/ GAME 2: SPIN THE WHEEL\n    \/\/ ================================================================\n\n    const wheelData = [\n        { label: 'Integrity', meaning: 'Being honest and truthful', icon: '\ud83c\udf1f', example: 'Tell the truth even when it is hard.' },\n        { label: 'Courage', meaning: 'Standing up for what is right', icon: '\ud83e\udd81', example: 'Google employees signed a petition.' },\n        { label: 'Fairness', meaning: 'Treating everyone equally', icon: '\u2696\ufe0f', example: 'AI should treat all people fairly.' },\n        { label: 'Responsibility', meaning: 'Owning your actions', icon: '\ud83e\udd1d', example: 'Take responsibility for your work.' },\n        { label: 'Conscience', meaning: 'Knowing right from wrong', icon: '\ud83d\udca1', example: 'Listen to your inner voice.' },\n        { label: 'Justice', meaning: 'Making things right', icon: '\ud83c\udf08', example: 'Stand up against unfairness.' }\n    ];\n\n    let wheelAngle = 0;\n    let wheelSpinning = false;\n\n    function buildWheel() {\n        const wheel = document.getElementById('wheel');\n        const sliceAngle = 360 \/ wheelData.length;\n        let html = '';\n        const colors = ['#c9a84c', '#2e7d32', '#1a1a2e', '#b8923a', '#1b5e20', '#3d3a5c'];\n        wheelData.forEach((item, i) => {\n            const rotation = i * sliceAngle;\n            const color = colors[i % colors.length];\n            html += `\n                <div class=\"wheel-segment\" style=\"transform: rotate(${rotation}deg); background: ${color};\">\n                    <div class=\"inner\">\n                        <span class=\"icon\">${item.icon}<\/span>\n                        <span class=\"label\">${item.label}<\/span>\n                    <\/div>\n                <\/div>\n            `;\n        });\n        wheel.innerHTML = html;\n    }\n\n    function spinWheel() {\n        if (wheelSpinning) return;\n        wheelSpinning = true;\n\n        const wheel = document.getElementById('wheel');\n        const resultDiv = document.getElementById('wheelResult');\n\n        const spin = 720 + Math.random() * 720;\n        const newAngle = wheelAngle + spin;\n        wheelAngle = newAngle;\n        wheel.style.transform = `rotate(${newAngle}deg)`;\n\n        \/\/ Determine result\n        const sliceAngle = 360 \/ wheelData.length;\n        const normalized = newAngle % 360;\n        const idx = Math.floor((360 - normalized) \/ sliceAngle) % wheelData.length;\n        const result = wheelData[idx];\n\n        setTimeout(() => {\n            resultDiv.innerHTML = `\n                <span class=\"concept\">${result.icon} ${result.label}<\/span>\n                <span class=\"meaning\">${result.meaning}<\/span>\n                <span class=\"example\">\ud83d\udca1 ${result.example}<\/span>\n            `;\n            wheelSpinning = false;\n        }, 4200);\n\n        \/\/ Show spinning message\n        resultDiv.innerHTML = `<span class=\"empty\">\ud83c\udf00 Spinning...<\/span>`;\n    }\n\n    function resetWheel() {\n        if (wheelSpinning) return;\n        const wheel = document.getElementById('wheel');\n        wheelAngle = 0;\n        wheel.style.transform = `rotate(0deg)`;\n        document.getElementById('wheelResult').innerHTML = `<span class=\"empty\">\ud83d\udc46 Click the wheel to spin!<\/span>`;\n    }\n\n    \/\/ ================================================================\n    \/\/ GAME 3: SORTING GAME\n    \/\/ ================================================================\n\n    const sortItemsData = [\n        { id: 1, text: '\ud83d\udcdd Sign a petition to stop harmful AI', correct: true },\n        { id: 2, text: '\ud83e\udd16 Use AI to deceive people', correct: false },\n        { id: 3, text: '\u2696\ufe0f Treat everyone fairly with AI', correct: true },\n        { id: 4, text: '\ud83d\ude48 Hide mistakes made by AI', correct: false },\n        { id: 5, text: '\ud83d\udde3\ufe0f Speak up when you see wrong', correct: true },\n        { id: 6, text: '\ud83d\ude08 Use AI to hurt others', correct: false }\n    ];\n\n    let sortPlaced = {};\n    let sortScoreCount = 0;\n    let sortTotalCount = sortItemsData.length;\n\n    function renderSort() {\n        const container = document.getElementById('sortItems');\n        const zoneRight = document.getElementById('zoneRighteousItems');\n        const zoneUnright = document.getElementById('zoneUnrighteousItems');\n\n        \/\/ Clear zones\n        zoneRight.innerHTML = '';\n        zoneUnright.innerHTML = '';\n\n        \/\/ Build unplaced items\n        let html = '';\n        let placedCount = 0;\n        sortItemsData.forEach(item => {\n            if (sortPlaced[item.id] !== undefined) {\n                placedCount++;\n                const zone = sortPlaced[item.id] ? zoneRight : zoneUnright;\n                const div = document.createElement('div');\n                div.className = 'sort-item placed';\n                if (sortPlaced[item.id] !== item.correct) {\n                    div.classList.add('wrong-item');\n                }\n                div.textContent = item.text;\n                zone.appendChild(div);\n            } else {\n                html += `\n                    <div class=\"sort-item\" draggable=\"true\" data-id=\"${item.id}\" ondragstart=\"dragStart(event)\" ondragend=\"dragEnd(event)\">\n                        ${item.text}\n                    <\/div>\n                `;\n            }\n        });\n\n        container.innerHTML = html;\n\n        \/\/ Update score\n        sortScoreCount = Object.keys(sortPlaced).filter(id => sortPlaced[id] === sortItemsData.find(i => i.id == id).correct).length;\n        document.getElementById('sortScore').textContent = sortScoreCount;\n        document.getElementById('sortTotal').textContent = sortTotalCount;\n\n        \/\/ Check if complete\n        const feedback = document.getElementById('sortFeedback');\n        if (placedCount === sortTotalCount) {\n            if (sortScoreCount === sortTotalCount) {\n                feedback.className = 'sort-feedback show success';\n                feedback.innerHTML = '\ud83c\udf89 Perfect! You sorted everything correctly! You are a righteous hero!';\n            } else {\n                feedback.className = 'sort-feedback show fail';\n                feedback.innerHTML = '\ud83d\ude05 Some items are in the wrong place. Try again! Click Reset to start over.';\n            }\n        } else {\n            feedback.className = 'sort-feedback';\n            feedback.innerHTML = '';\n        }\n    }\n\n    let dragData = null;\n\n    function dragStart(e) {\n        const id = e.target.dataset.id;\n        if (id !== undefined && sortPlaced[id] === undefined) {\n            dragData = id;\n            e.target.classList.add('dragging');\n            e.dataTransfer.effectAllowed = 'move';\n        } else {\n            e.preventDefault();\n        }\n    }\n\n    function dragEnd(e) {\n        e.target.classList.remove('dragging');\n    }\n\n    \/\/ Setup drop zones\n    document.querySelectorAll('.sort-zone').forEach(zone => {\n        zone.addEventListener('dragover', (e) => {\n            e.preventDefault();\n            e.dataTransfer.dropEffect = 'move';\n        });\n\n        zone.addEventListener('drop', (e) => {\n            e.preventDefault();\n            if (dragData === null) return;\n\n            const id = parseInt(dragData);\n            const item = sortItemsData.find(i => i.id === id);\n            if (!item || sortPlaced[id] !== undefined) return;\n\n            const isRighteous = zone.dataset.zone === 'righteous';\n            sortPlaced[id] = isRighteous;\n\n            dragData = null;\n            renderSort();\n        });\n    });\n\n    \/\/ Allow dragging from zones back (if needed, but we just reset)\n    function resetSort() {\n        sortPlaced = {};\n        sortScoreCount = 0;\n        renderSort();\n        document.getElementById('sortFeedback').className = 'sort-feedback';\n        document.getElementById('sortFeedback').innerHTML = '';\n    }\n\n    \/\/ ================================================================\n    \/\/ TAB SWITCHING\n    \/\/ ================================================================\n\n    document.querySelectorAll('.tab-btn').forEach(btn => {\n        btn.addEventListener('click', function() {\n            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\n            document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));\n            this.classList.add('active');\n            document.getElementById(this.dataset.tab).classList.add('active');\n        });\n    });\n\n    \/\/ ================================================================\n    \/\/ INIT\n    \/\/ ================================================================\n\n    \/\/ Game 1\n    matchCards = initMatchCards();\n    renderMatch();\n\n    \/\/ Game 2\n    buildWheel();\n\n    \/\/ Game 3\n    renderSort();\n\n    \/\/ Fix for touch devices: prevent default drag behavior\n    document.addEventListener('touchmove', function(e) {\n        if (e.target.closest('.sort-item')) {\n            e.preventDefault();\n        }\n    }, { passive: false });\n\n    console.log('\ud83c\udfae Righteous Kids Zone loaded!');\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Righteous Kids Zone Learn about righteousness through fun games! Memory Match Spin the Wheel Sorting Game Match each concept with its meaning! \u2b50 Score: 0 \/ 6 \ud83d\udd04 Moves: 0 Reset \ud83c\udfc6 You Got It All Right! You matched all the righteous concepts! \ud83c\udf89 Keep learning about righteousness! Click the wheel to spin and learn! [&hellip;]<\/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-2317","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2317","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=2317"}],"version-history":[{"count":2,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2317\/revisions"}],"predecessor-version":[{"id":2321,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2317\/revisions\/2321"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=2317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}