{"id":2345,"date":"2026-09-01T05:16:42","date_gmt":"2026-09-01T05:16:42","guid":{"rendered":"https:\/\/museum.wiserighteous.org\/?page_id=2345"},"modified":"2026-09-01T05:16:42","modified_gmt":"2026-09-01T05:16:42","slug":"game-for-project-maven","status":"publish","type":"page","link":"https:\/\/museum.wiserighteous.org\/index.php\/game-for-project-maven\/","title":{"rendered":"Game for Project Maven"},"content":{"rendered":"\n<!-- Project Maven \u2014 Kids Games Zone -->\n<!-- Three Interactive Games for Children \u00b7 Righteous AI Gallery -->\n\n<style>\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    body {\n        font-family: 'Segoe UI', 'Comic Sans MS', 'Chalkboard SE', Arial, sans-serif;\n        background: #fefcf8;\n        padding: 20px;\n    }\n\n    .games-wrapper {\n        max-width: 820px;\n        margin: 0 auto;\n        background: #fffcf5;\n        border-radius: 28px;\n        padding: 28px 30px 35px;\n        border: 4px solid #c9a84c;\n        box-shadow: 0 8px 30px rgba(0,0,0,0.08);\n    }\n\n    \/* Header *\/\n    .games-header {\n        text-align: center;\n        border-bottom: 4px dashed #c9a84c;\n        padding-bottom: 16px;\n        margin-bottom: 22px;\n    }\n\n    .games-header h1 {\n        font-size: 28px;\n        font-weight: 800;\n        color: #1a1a2e;\n        letter-spacing: -0.5px;\n    }\n\n    .games-header h1 i {\n        color: #c9a84c;\n        margin-right: 10px;\n    }\n\n    .games-header p {\n        font-size: 16px;\n        color: #666;\n        margin-top: 4px;\n        font-style: italic;\n    }\n\n    \/* Tab Navigation *\/\n    .tab-nav {\n        display: flex;\n        gap: 10px;\n        margin-bottom: 20px;\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .tab-btn {\n        padding: 12px 22px;\n        border: 3px solid #e0d8cc;\n        border-radius: 40px;\n        background: white;\n        cursor: pointer;\n        font-family: 'Segoe UI', 'Comic Sans MS', Arial, sans-serif;\n        font-size: 15px;\n        font-weight: 700;\n        color: #666;\n        transition: 0.25s ease;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        flex: 1;\n        min-width: 130px;\n        justify-content: center;\n    }\n\n    .tab-btn:hover {\n        border-color: #c9a84c;\n        background: #f9f6f0;\n        transform: translateY(-2px);\n    }\n\n    .tab-btn.active {\n        border-color: #c9a84c;\n        background: #1a1a2e;\n        color: white;\n    }\n\n    .tab-btn .icon {\n        font-size: 22px;\n    }\n\n    .tab-content {\n        display: none;\n        animation: fadeIn 0.4s ease;\n        min-height: 440px;\n    }\n\n    .tab-content.active {\n        display: block;\n    }\n\n    @keyframes fadeIn {\n        from { opacity: 0; transform: translateY(12px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* Game Card *\/\n    .game-card {\n        background: #faf6ee;\n        border-radius: 20px;\n        padding: 24px 28px;\n        border: 2px solid #e0d8cc;\n    }\n\n    .game-card h3 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #1a1a2e;\n        margin-bottom: 4px;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n\n    .game-card h3 i {\n        color: #c9a84c;\n    }\n\n    .game-card .sub {\n        font-size: 14px;\n        color: #888;\n        margin-bottom: 16px;\n        font-style: italic;\n    }\n\n    \/* Scenario Box *\/\n    .scenario-box {\n        background: white;\n        border-radius: 16px;\n        padding: 18px 22px;\n        margin: 12px 0 16px 0;\n        border: 2px solid #e0d8cc;\n        font-size: 16px;\n        line-height: 1.7;\n        min-height: 70px;\n    }\n\n    .scenario-box .emoji-big {\n        font-size: 28px;\n        display: block;\n        margin-bottom: 6px;\n    }\n\n    \/* Options *\/\n    .options-grid {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        margin: 12px 0 14px 0;\n    }\n\n    .opt-btn {\n        padding: 14px 18px;\n        border: 3px solid #e0d8cc;\n        border-radius: 14px;\n        background: white;\n        cursor: pointer;\n        font-family: 'Segoe UI', 'Comic Sans MS', Arial, sans-serif;\n        font-size: 15px;\n        text-align: left;\n        transition: 0.2s ease;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        font-weight: 600;\n    }\n\n    .opt-btn:hover:not(:disabled) {\n        border-color: #c9a84c;\n        background: #f9f6f0;\n        transform: translateX(6px);\n    }\n\n    .opt-btn .letter {\n        display: inline-block;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        background: #f0ebe0;\n        color: #555;\n        text-align: center;\n        line-height: 32px;\n        font-weight: 700;\n        font-size: 14px;\n        flex-shrink: 0;\n    }\n\n    .opt-btn:hover:not(:disabled) .letter {\n        background: #c9a84c;\n        color: white;\n    }\n\n    .opt-btn.selected-correct {\n        border-color: #2e7d32;\n        background: #e8f5e9;\n    }\n\n    .opt-btn.selected-wrong {\n        border-color: #c62828;\n        background: #ffebee;\n    }\n\n    .opt-btn:disabled {\n        cursor: default;\n        opacity: 0.7;\n    }\n\n    \/* Feedback Box *\/\n    .fb-box {\n        padding: 14px 18px;\n        border-radius: 14px;\n        margin: 12px 0 8px 0;\n        font-size: 15px;\n        line-height: 1.6;\n        display: none;\n        border-left: 5px solid;\n    }\n\n    .fb-box.show {\n        display: block;\n    }\n\n    .fb-box.correct {\n        background: #e8f5e9;\n        border-left-color: #2e7d32;\n        color: #1e4620;\n    }\n\n    .fb-box.wrong {\n        background: #ffebee;\n        border-left-color: #c62828;\n        color: #7f1d1d;\n    }\n\n    .fb-box.info {\n        background: #e3f2fd;\n        border-left-color: #1565c0;\n        color: #0d3c6b;\n    }\n\n    .fb-box .principle-tag {\n        display: inline-block;\n        background: #c9a84c;\n        color: white;\n        padding: 2px 14px;\n        border-radius: 20px;\n        font-size: 12px;\n        font-weight: 700;\n        margin-top: 6px;\n    }\n\n    \/* Game Stats *\/\n    .game-stats {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 12px 16px;\n        background: white;\n        border-radius: 14px;\n        border: 2px solid #e0d8cc;\n        margin-top: 14px;\n        font-size: 15px;\n        font-weight: 700;\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .game-stats .score-num {\n        color: #c9a84c;\n        font-size: 20px;\n    }\n\n    .game-stats .streak-num {\n        color: #e67e22;\n    }\n\n    .progress-bar {\n        height: 8px;\n        background: #e0d8cc;\n        border-radius: 6px;\n        margin: 10px 0 14px 0;\n        overflow: hidden;\n    }\n\n    .progress-bar .fill {\n        height: 100%;\n        background: linear-gradient(90deg, #c9a84c, #f5d76e);\n        border-radius: 6px;\n        transition: width 0.5s ease;\n        width: 0%;\n    }\n\n    \/* Buttons *\/\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', 'Comic Sans MS', Arial, sans-serif;\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .btn-gold {\n        background: #c9a84c;\n        color: white;\n    }\n\n    .btn-gold:hover {\n        background: #b8923a;\n        transform: translateY(-2px);\n    }\n\n    .btn-dark {\n        background: #1a1a2e;\n        color: white;\n    }\n\n    .btn-dark:hover {\n        background: #3d3a5c;\n        transform: translateY(-2px);\n    }\n\n    .btn-outline {\n        background: transparent;\n        color: #1a1a2e;\n        border: 3px solid #e0d8cc;\n    }\n\n    .btn-outline:hover {\n        border-color: #c9a84c;\n        background: #f9f6f0;\n    }\n\n    .btn-green {\n        background: #2e7d32;\n        color: white;\n    }\n\n    .btn-green:hover {\n        background: #1b5e20;\n        transform: translateY(-2px);\n    }\n\n    .btn-red {\n        background: #c62828;\n        color: white;\n    }\n\n    .btn-red:hover {\n        background: #b71c1c;\n        transform: translateY(-2px);\n    }\n\n    .btn-group {\n        display: flex;\n        gap: 12px;\n        flex-wrap: wrap;\n        margin-top: 12px;\n        justify-content: center;\n    }\n\n    \/* Matching Game *\/\n    .match-area {\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .match-row {\n        display: flex;\n        gap: 12px;\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .match-item {\n        padding: 12px 18px;\n        border-radius: 14px;\n        border: 3px solid #e0d8cc;\n        background: white;\n        cursor: pointer;\n        font-family: 'Segoe UI', 'Comic Sans MS', Arial, sans-serif;\n        font-size: 15px;\n        font-weight: 600;\n        transition: 0.2s ease;\n        min-width: 120px;\n        text-align: center;\n        flex: 1;\n        min-width: 100px;\n    }\n\n    .match-item:hover:not(.matched):not(.selected) {\n        border-color: #c9a84c;\n        transform: scale(1.03);\n    }\n\n    .match-item.selected {\n        border-color: #c9a84c;\n        background: #f9f6f0;\n        box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.25);\n    }\n\n    .match-item.matched {\n        border-color: #2e7d32;\n        background: #e8f5e9;\n        cursor: default;\n        opacity: 0.6;\n        transform: none;\n    }\n\n    .match-item.wrong-match {\n        border-color: #c62828;\n        background: #ffebee;\n        animation: shake 0.4s ease;\n    }\n\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        25% { transform: translateX(-8px); }\n        75% { transform: translateX(8px); }\n    }\n\n    .match-item .icon-match {\n        font-size: 20px;\n        display: block;\n        margin-bottom: 2px;\n    }\n\n    \/* Quiz Game *\/\n    .quiz-buttons {\n        display: flex;\n        gap: 16px;\n        justify-content: center;\n        margin: 12px 0;\n    }\n\n    .quiz-btn {\n        padding: 16px 32px;\n        border: 4px solid #e0d8cc;\n        border-radius: 16px;\n        background: white;\n        cursor: pointer;\n        font-family: 'Segoe UI', 'Comic Sans MS', Arial, sans-serif;\n        font-size: 18px;\n        font-weight: 700;\n        transition: 0.2s ease;\n        flex: 1;\n        max-width: 220px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n    }\n\n    .quiz-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n    }\n\n    .quiz-btn.righteous-btn:hover:not(:disabled) {\n        border-color: #2e7d32;\n        background: #e8f5e9;\n    }\n\n    .quiz-btn.unrighteous-btn:hover:not(:disabled) {\n        border-color: #c62828;\n        background: #ffebee;\n    }\n\n    .quiz-btn:disabled {\n        cursor: default;\n        opacity: 0.6;\n    }\n\n    .quiz-btn.selected-correct {\n        border-color: #2e7d32;\n        background: #e8f5e9;\n    }\n\n    .quiz-btn.selected-wrong {\n        border-color: #c62828;\n        background: #ffebee;\n    }\n\n    .quiz-btn .big-icon {\n        font-size: 28px;\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 640px) {\n        .games-wrapper {\n            padding: 16px 16px 24px;\n        }\n        .games-header h1 {\n            font-size: 20px;\n        }\n        .tab-btn {\n            font-size: 13px;\n            padding: 10px 14px;\n            min-width: 80px;\n        }\n        .game-card {\n            padding: 16px 16px;\n        }\n        .game-card h3 {\n            font-size: 18px;\n        }\n        .opt-btn {\n            font-size: 14px;\n            padding: 12px 14px;\n        }\n        .match-item {\n            font-size: 13px;\n            padding: 10px 12px;\n            min-width: 70px;\n        }\n        .quiz-btn {\n            font-size: 15px;\n            padding: 14px 20px;\n        }\n        .btn-group {\n            flex-direction: column;\n            align-items: center;\n        }\n        .game-stats {\n            font-size: 13px;\n            justify-content: center;\n        }\n    }\n\n    .footnote {\n        text-align: center;\n        font-size: 12px;\n        color: #bbb;\n        margin-top: 20px;\n        padding-top: 16px;\n        border-top: 2px dashed #e8e0d4;\n    }\n\n    .footnote i {\n        margin-right: 6px;\n    }\n\n    .win-banner {\n        text-align: center;\n        padding: 20px;\n        background: #e8f5e9;\n        border-radius: 16px;\n        border: 3px solid #2e7d32;\n        margin-top: 10px;\n    }\n\n    .win-banner .big-emoji {\n        font-size: 48px;\n        display: block;\n        margin-bottom: 6px;\n    }\n\n    .win-banner h4 {\n        color: #1b5e20;\n        font-size: 22px;\n        margin: 0 0 4px 0;\n    }\n\n    .win-banner p {\n        color: #555;\n        font-size: 15px;\n        margin: 0;\n    }\n<\/style>\n\n<div class=\"games-wrapper\">\n\n    <div class=\"games-header\">\n        <h1><i class=\"fas fa-gamepad\"><\/i> Kids Games Zone<\/h1>\n        <p>Learn about courage, conscience, and standing up for what&#8217;s right!<\/p>\n    <\/div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tab-nav\">\n        <button class=\"tab-btn active\" data-tab=\"game1\">\n            <span class=\"icon\">\ud83e\udde0<\/span> What Would You Do?\n        <\/button>\n        <button class=\"tab-btn\" data-tab=\"game2\">\n            <span class=\"icon\">\ud83e\udde9<\/span> Match the Principle\n        <\/button>\n        <button class=\"tab-btn\" data-tab=\"game3\">\n            <span class=\"icon\">\u2696\ufe0f<\/span> Righteous or Not?\n        <\/button>\n    <\/div>\n\n    <!-- ============================================================ -->\n    <!-- GAME 1: WHAT WOULD YOU DO? -->\n    <!-- ============================================================ -->\n    <div class=\"tab-content active\" id=\"game1\">\n        <div class=\"game-card\">\n            <h3><i class=\"fas fa-brain\"><\/i> What Would You Do?<\/h3>\n            <div class=\"sub\">Make choices like a real Google employee!<\/div>\n\n            <div id=\"game1Scene\">\n                <!-- Rendered by JavaScript -->\n            <\/div>\n\n            <div class=\"progress-bar\">\n                <div class=\"fill\" id=\"game1Progress\" style=\"width:0%;\"><\/div>\n            <\/div>\n\n            <div class=\"game-stats\">\n                <span>\u2b50 Score: <span class=\"score-num\" id=\"game1Score\">0<\/span><\/span>\n                <span>\ud83d\udcdd Step: <span id=\"game1Step\">1<\/span> \/ 5<\/span>\n                <button class=\"btn btn-outline\" onclick=\"resetGame1()\"><i class=\"fas fa-undo-alt\"><\/i> Restart<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- ============================================================ -->\n    <!-- GAME 2: MATCH THE PRINCIPLE -->\n    <!-- ============================================================ -->\n    <div class=\"tab-content\" id=\"game2\">\n        <div class=\"game-card\">\n            <h3><i class=\"fas fa-puzzle-piece\"><\/i> Match the Principle<\/h3>\n            <div class=\"sub\">Match each principle with its meaning!<\/div>\n\n            <div id=\"game2Scene\">\n                <!-- Rendered by JavaScript -->\n            <\/div>\n\n            <div class=\"game-stats\">\n                <span>\u2b50 Matched: <span class=\"score-num\" id=\"game2Score\">0<\/span> \/ 4<\/span>\n                <span>\ud83d\udd04 Attempts: <span id=\"game2Attempts\">0<\/span><\/span>\n                <button class=\"btn btn-outline\" onclick=\"resetGame2()\"><i class=\"fas fa-undo-alt\"><\/i> Restart<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- ============================================================ -->\n    <!-- GAME 3: RIGHTEOUS OR NOT? -->\n    <!-- ============================================================ -->\n    <div class=\"tab-content\" id=\"game3\">\n        <div class=\"game-card\">\n            <h3><i class=\"fas fa-balance-scale\"><\/i> Righteous or Not?<\/h3>\n            <div class=\"sub\">Decide if each action is righteous!<\/div>\n\n            <div id=\"game3Scene\">\n                <!-- Rendered by JavaScript -->\n            <\/div>\n\n            <div class=\"progress-bar\">\n                <div class=\"fill\" id=\"game3Progress\" style=\"width:0%;\"><\/div>\n            <\/div>\n\n            <div class=\"game-stats\">\n                <span>\u2b50 Score: <span class=\"score-num\" id=\"game3Score\">0<\/span><\/span>\n                <span>\ud83d\udd25 Streak: <span class=\"streak-num\" id=\"game3Streak\">0<\/span><\/span>\n                <button class=\"btn btn-outline\" onclick=\"resetGame3()\"><i class=\"fas fa-undo-alt\"><\/i> Restart<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"footnote\">\n        <i class=\"fas fa-chess-queen\"><\/i> Righteous AI Gallery \u00b7 Project Maven \u2014 Kids Games\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ ================================================================\n    \/\/ GAME 1: WHAT WOULD YOU DO?\n    \/\/ ================================================================\n\n    const game1Data = [\n        {\n            scenario: '\ud83c\udfe2 You work at Google. You find out your team is building AI for military drones. You think this might hurt people. What do you do?',\n            options: [\n                { text: 'Stay quiet and keep working', righteous: false, feedback: 'Staying quiet is safe, but it doesn\\'t help fix the problem. Doing nothing when you see something wrong is not righteous.' },\n                { text: 'Talk to your boss privately', righteous: true, feedback: 'This is a great first step! Speaking up to someone who can make change takes courage. You are using your voice to make things right.' },\n                { text: 'Sign a petition with your coworkers', righteous: true, feedback: 'Amazing! When you join with others, your voice becomes stronger. Over 4,000 Google employees did this!' }\n            ],\n            principle: 'Courage \u00b7 Responsibility'\n        },\n        {\n            scenario: '\ud83d\udccb Your boss says: \"Just build the technology. What happens after is not our problem.\" How do you respond?',\n            options: [\n                { text: 'Accept it \u2014 maybe they are right', righteous: false, feedback: 'It\\'s easy to agree, but if you build something that hurts people, you are still responsible. What you create matters.' },\n                { text: 'Disagree and explain why ethics matter', righteous: true, feedback: 'You are showing responsibility! Building technology without thinking about how it\\'s used is not okay. You are making the world better by caring.' },\n                { text: 'Write down your concerns in an email', righteous: true, feedback: 'Writing things down is smart! It shows you are serious about your concerns. Documentation can help protect you and others.' }\n            ],\n            principle: 'Responsibility \u00b7 Integrity'\n        },\n        {\n            scenario: '\ud83d\udcdd You hear that over 4,000 people have signed a petition against Project Maven. What is your next move?',\n            options: [\n                { text: 'Sign the petition too', righteous: true, feedback: 'Yes! You are joining a movement of brave people. Together, you are showing that big companies need to listen to their employees.' },\n                { text: 'Keep working quietly \u2014 it\\'s not your problem', righteous: false, feedback: 'When you stay quiet, you miss a chance to make a difference. Even one voice can matter when many people speak together.' },\n                { text: 'Talk to coworkers about why it matters', righteous: true, feedback: 'Great idea! Helping others understand why this is important can inspire them to speak up too. You are a leader!' }\n            ],\n            principle: 'Collective Action \u00b7 Courage'\n        },\n        {\n            scenario: '\ud83c\udfc6 Google announces it will stop Project Maven. But in 2026, you hear they might start a new military AI project. What do you do?',\n            options: [\n                { text: 'Let it go \u2014 you already won once', righteous: false, feedback: 'Righteousness is not a one-time victory. In 2026, over 600 employees spoke up again. Standing up for what\\'s right is an ongoing journey.' },\n                { text: 'Sign a new letter to stop it', righteous: true, feedback: 'You are showing perseverance! Even after winning once, you keep fighting for what is right. That is true courage.' },\n                { text: 'Resign from Google', righteous: true, feedback: 'Resigning is a big step. It shows you truly believe in your principles. Some people resigned in 2018 because they couldn\\'t support this work.' }\n            ],\n            principle: 'Perseverance \u00b7 Integrity'\n        },\n        {\n            scenario: '\ud83c\udf1f Looking back at everything that happened, what is the most important thing you learned?',\n            options: [\n                { text: 'One person can make a difference', righteous: true, feedback: 'You are right! Every hero starts with one person who decides to speak up. You can be that person too.' },\n                { text: 'Technology will always be used for bad things \u2014 no point trying', righteous: false, feedback: 'That\\'s not true! The Google employees proved that speaking up can change things. You can make a difference.' },\n                { text: 'We must always think about how our work affects others', righteous: true, feedback: 'Exactly! What we create affects real people. Being thoughtful and caring about how our work is used is what righteousness is all about.' }\n            ],\n            principle: 'Wisdom \u00b7 Hope'\n        }\n    ];\n\n    let g1State = { step: 0, score: 0, answered: false };\n\n    function renderGame1() {\n        const container = document.getElementById('game1Scene');\n\n        if (g1State.step >= game1Data.length) {\n            const total = game1Data.length * 10;\n            const pct = Math.round((g1State.score \/ total) * 100);\n            let msg = pct >= 80 ? '\ud83c\udf1f You are a Righteous Hero!' :\n                      pct >= 60 ? '\ud83d\udc4f Good job! Keep learning!' :\n                      pct >= 40 ? '\ud83d\udcd6 You\\'re on your way!' :\n                      '\ud83d\udcad Keep practicing!';\n\n            container.innerHTML = `\n                <div class=\"scenario-box\" style=\"text-align:center; padding:30px;\">\n                    <div style=\"font-size:48px; margin-bottom:8px;\">\ud83c\udfc6<\/div>\n                    <h3 style=\"color:#c9a84c; margin:0 0 8px 0;\">Journey Complete!<\/h3>\n                    <p style=\"font-size:18px; font-weight:700;\">Score: <span style=\"color:#c9a84c;\">${g1State.score}<\/span> \/ ${total}<\/p>\n                    <p style=\"font-size:16px; color:#555;\">${msg}<\/p>\n                    <p style=\"font-size:14px; color:#888;\">You made ${game1Data.filter((d,i) => g1State.score > i*10).length} righteous choices!<\/p>\n                <\/div>\n            `;\n            document.getElementById('game1Progress').style.width = '100%';\n            document.getElementById('game1Step').textContent = '5 \u2713';\n            return;\n        }\n\n        const data = game1Data[g1State.step];\n        const pct = (g1State.step \/ game1Data.length) * 100;\n        const letters = ['A', 'B', 'C'];\n\n        let html = `\n            <div class=\"scenario-box\">\n                <span class=\"emoji-big\">\ud83d\udcd6<\/span>\n                <strong>Step ${g1State.step + 1} of 5<\/strong><br>\n                ${data.scenario}\n            <\/div>\n            <div class=\"options-grid\" id=\"game1Options\">\n        `;\n\n        data.options.forEach((opt, idx) => {\n            html += `\n                <button class=\"opt-btn\" onclick=\"chooseGame1(${idx})\" id=\"g1opt${idx}\">\n                    <span class=\"letter\">${letters[idx]}<\/span>\n                    ${opt.text}\n                <\/button>\n            `;\n        });\n\n        html += '<\/div>';\n        html += `<div class=\"fb-box\" id=\"game1Feedback\"><\/div>`;\n\n        container.innerHTML = html;\n        document.getElementById('game1Progress').style.width = pct + '%';\n        document.getElementById('game1Step').textContent = g1State.step + 1;\n        document.getElementById('game1Score').textContent = g1State.score;\n        g1State.answered = false;\n    }\n\n    function chooseGame1(idx) {\n        if (g1State.answered) return;\n        const data = game1Data[g1State.step];\n        const opt = data.options[idx];\n        const fb = document.getElementById('game1Feedback');\n\n        document.querySelectorAll('#game1Options .opt-btn').forEach(b => b.disabled = true);\n        document.querySelectorAll('#game1Options .opt-btn').forEach((b, i) => {\n            if (i === idx) {\n                b.classList.add(opt.righteous ? 'selected-correct' : 'selected-wrong');\n            }\n        });\n\n        fb.className = `fb-box show ${opt.righteous ? 'correct' : 'wrong'}`;\n        fb.innerHTML = `\n            <strong>${opt.righteous ? '\u2705 Righteous Choice!' : '\u274c Not Righteous'}<\/strong><br>\n            ${opt.feedback}<br>\n            <span class=\"principle-tag\">\u2726 ${data.principle}<\/span>\n        `;\n\n        if (opt.righteous) g1State.score += 10;\n        g1State.answered = true;\n        document.getElementById('game1Score').textContent = g1State.score;\n\n        setTimeout(() => {\n            g1State.step++;\n            renderGame1();\n        }, 3200);\n    }\n\n    function resetGame1() {\n        g1State = { step: 0, score: 0, answered: false };\n        renderGame1();\n    }\n\n    \/\/ ================================================================\n    \/\/ GAME 2: MATCH THE PRINCIPLE\n    \/\/ ================================================================\n\n    const matchData = [\n        { id: 0, concept: '\ud83e\udd81 Courage', meaning: 'Standing up even when it\\'s scary' },\n        { id: 1, concept: '\ud83d\udca1 Conscience', meaning: 'Knowing right from wrong' },\n        { id: 2, concept: '\ud83e\udd1d Responsibility', meaning: 'Taking care of what you create' },\n        { id: 3, concept: '\ud83d\uded1 Restraint', meaning: 'Knowing when to stop' }\n    ];\n\n    let g2State = {\n        concepts: [],\n        meanings: [],\n        selected: null,\n        matched: new Set(),\n        score: 0,\n        attempts: 0,\n        locked: false\n    };\n\n    function shuffleArray(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 initGame2() {\n        g2State.concepts = shuffleArray([...matchData]);\n        g2State.meanings = shuffleArray([...matchData]);\n        g2State.selected = null;\n        g2State.matched = new Set();\n        g2State.score = 0;\n        g2State.attempts = 0;\n        g2State.locked = false;\n        renderGame2();\n    }\n\n    function renderGame2() {\n        const container = document.getElementById('game2Scene');\n\n        if (g2State.matched.size === matchData.length) {\n            container.innerHTML = `\n                <div class=\"win-banner\">\n                    <span class=\"big-emoji\">\ud83c\udf89<\/span>\n                    <h4>Perfect Match!<\/h4>\n                    <p>You matched all the principles correctly!<\/p>\n                    <p style=\"font-size:14px; color:#888;\">Attempts: ${g2State.attempts}<\/p>\n                <\/div>\n            `;\n            document.getElementById('game2Score').textContent = g2State.score;\n            document.getElementById('game2Attempts').textContent = g2State.attempts;\n            return;\n        }\n\n        let html = `\n            <div style=\"font-size:14px; color:#666; margin-bottom:12px;\">\n                <i class=\"fas fa-info-circle\"><\/i> Click a <strong>concept<\/strong>, then click its <strong>meaning<\/strong> to match them!\n            <\/div>\n            <div style=\"display:flex; flex-direction:column; gap:16px;\">\n        `;\n\n        \/\/ Concepts row\n        html += `<div style=\"display:flex; flex-wrap:wrap; gap:10px; justify-content:center;\">`;\n        g2State.concepts.forEach(item => {\n            const isMatched = g2State.matched.has(item.id);\n            const isSelected = g2State.selected === item.id;\n            html += `\n                <div class=\"match-item ${isMatched ? 'matched' : ''} ${isSelected ? 'selected' : ''}\"\n                     onclick=\"clickMatchItem(${item.id}, 'concept')\"\n                     style=\"${isMatched ? 'pointer-events:none;' : ''}\">\n                    ${item.concept}\n                <\/div>\n            `;\n        });\n        html += `<\/div>`;\n\n        \/\/ Arrow\n        html += `<div style=\"text-align:center; font-size:28px; color:#c9a84c;\">\u2b07\ufe0f<\/div>`;\n\n        \/\/ Meanings row\n        html += `<div style=\"display:flex; flex-wrap:wrap; gap:10px; justify-content:center;\">`;\n        g2State.meanings.forEach(item => {\n            const isMatched = g2State.matched.has(item.id);\n            html += `\n                <div class=\"match-item ${isMatched ? 'matched' : ''}\"\n                     onclick=\"clickMatchItem(${item.id}, 'meaning')\"\n                     style=\"${isMatched ? 'pointer-events:none;' : ''}\">\n                    ${item.meaning}\n                <\/div>\n            `;\n        });\n        html += `<\/div>`;\n\n        html += `<\/div>`;\n        container.innerHTML = html;\n\n        document.getElementById('game2Score').textContent = g2State.score;\n        document.getElementById('game2Attempts').textContent = g2State.attempts;\n    }\n\n    function clickMatchItem(id, type) {\n        if (g2State.locked) return;\n        if (g2State.matched.has(id)) return;\n\n        if (type === 'concept') {\n            if (g2State.selected === id) {\n                g2State.selected = null;\n            } else {\n                g2State.selected = id;\n            }\n            renderGame2();\n            return;\n        }\n\n        \/\/ type === 'meaning'\n        if (g2State.selected === null) {\n            \/\/ Highlight that they need to select a concept first\n            const container = document.getElementById('game2Scene');\n            const fb = document.createElement('div');\n            fb.className = 'fb-box show info';\n            fb.style.marginTop = '12px';\n            fb.innerHTML = '\ud83d\udca1 First, click a <strong>concept<\/strong> on the left, then click its <strong>meaning<\/strong> on the right!';\n            \/\/ Remove old feedback\n            const oldFb = container.querySelector('.fb-box');\n            if (oldFb) oldFb.remove();\n            container.appendChild(fb);\n            setTimeout(() => { if (fb.parentNode) fb.remove(); }, 2500);\n            return;\n        }\n\n        \/\/ Check match\n        g2State.attempts++;\n        const conceptItem = g2State.concepts.find(c => c.id === g2State.selected);\n        const meaningItem = g2State.meanings.find(m => m.id === id);\n\n        if (conceptItem && meaningItem && conceptItem.id === meaningItem.id) {\n            \/\/ Correct match\n            g2State.matched.add(conceptItem.id);\n            g2State.score++;\n            g2State.selected = null;\n            renderGame2();\n        } else {\n            \/\/ Wrong match\n            g2State.locked = true;\n            const container = document.getElementById('game2Scene');\n            const items = container.querySelectorAll('.match-item');\n            items.forEach(el => {\n                if (el.textContent.trim() === conceptItem.concept || el.textContent.trim() === meaningItem.meaning) {\n                    el.classList.add('wrong-match');\n                }\n            });\n            setTimeout(() => {\n                g2State.locked = false;\n                g2State.selected = null;\n                renderGame2();\n            }, 800);\n        }\n    }\n\n    function resetGame2() {\n        initGame2();\n    }\n\n    \/\/ ================================================================\n    \/\/ GAME 3: RIGHTEOUS OR NOT?\n    \/\/ ================================================================\n\n    const quizData = [\n        {\n            scenario: 'You see someone being left out at lunch. You invite them to sit with you.',\n            righteous: true,\n            feedback: 'This is righteous! Being kind and including others is always the right thing to do.'\n        },\n        {\n            scenario: 'You know a friend is cheating on a test. You say nothing to the teacher.',\n            righteous: false,\n            feedback: 'This is not righteous. Staying silent when you know something is wrong allows unfairness to continue.'\n        },\n        {\n            scenario: 'You build a robot and add a safety button so it can\\'t hurt anyone.',\n            righteous: true,\n            feedback: 'This is righteous! You are taking responsibility for what you create and making sure it is safe.'\n        },\n        {\n            scenario: 'Someone asks you to do something you know is wrong. You say \"No.\"',\n            righteous: true,\n            feedback: 'This is righteous! Saying no to something wrong takes courage and integrity.'\n        },\n        {\n            scenario: 'You see someone being treated unfairly. You look away and pretend not to notice.',\n            righteous: false,\n            feedback: 'This is not righteous. When you see unfairness, looking away is like agreeing with it. Try speaking up!'\n        },\n        {\n            scenario: 'You tell the truth even when it\\'s hard, because you know it\\'s the right thing to do.',\n            righteous: true,\n            feedback: 'This is righteous! Telling the truth, even when it\\'s difficult, is a sign of courage and integrity.'\n        }\n    ];\n\n    let g3State = { idx: 0, score: 0, streak: 0, answered: false };\n\n    function renderGame3() {\n        const container = document.getElementById('game3Scene');\n\n        if (g3State.idx >= quizData.length) {\n            const total = quizData.length;\n            const pct = Math.round((g3State.score \/ total) * 100);\n            let msg = pct >= 80 ? '\ud83c\udf1f Amazing! You are a righteousness expert!' :\n                      pct >= 60 ? '\ud83d\udc4f Good work! Keep learning about what is right.' :\n                      pct >= 40 ? '\ud83d\udcd6 You\\'re on your way!' :\n                      '\ud83d\udcad Think about why some choices are right and some are wrong.';\n\n            container.innerHTML = `\n                <div class=\"scenario-box\" style=\"text-align:center; padding:30px;\">\n                    <div style=\"font-size:48px; margin-bottom:8px;\">\ud83c\udfc6<\/div>\n                    <h3 style=\"color:#c9a84c; margin:0 0 8px 0;\">Quiz Complete!<\/h3>\n                    <p style=\"font-size:18px; font-weight:700;\">Score: <span style=\"color:#c9a84c;\">${g3State.score}<\/span> \/ ${total}<\/p>\n                    <p style=\"font-size:16px; color:#555;\">${msg}<\/p>\n                    <p style=\"font-size:14px; color:#888;\">Best Streak: ${g3State.streak} \ud83d\udd25<\/p>\n                <\/div>\n            `;\n            document.getElementById('game3Progress').style.width = '100%';\n            return;\n        }\n\n        const data = quizData[g3State.idx];\n        const pct = (g3State.idx \/ quizData.length) * 100;\n\n        container.innerHTML = `\n            <div class=\"scenario-box\">\n                <span class=\"emoji-big\">\ud83d\udccb<\/span>\n                <strong>Scenario ${g3State.idx + 1} of ${quizData.length}<\/strong><br>\n                ${data.scenario}\n            <\/div>\n            <div class=\"quiz-buttons\" id=\"game3Buttons\">\n                <button class=\"quiz-btn righteous-btn\" onclick=\"answerGame3(true)\" id=\"g3right\">\n                    <span class=\"big-icon\">\u2705<\/span> Righteous\n                <\/button>\n                <button class=\"quiz-btn unrighteous-btn\" onclick=\"answerGame3(false)\" id=\"g3wrong\">\n                    <span class=\"big-icon\">\u274c<\/span> Unrighteous\n                <\/button>\n            <\/div>\n            <div class=\"fb-box\" id=\"game3Feedback\"><\/div>\n        `;\n\n        document.getElementById('game3Progress').style.width = pct + '%';\n        document.getElementById('game3Score').textContent = g3State.score;\n        document.getElementById('game3Streak').textContent = g3State.streak;\n        g3State.answered = false;\n    }\n\n    function answerGame3(choice) {\n        if (g3State.answered) return;\n        const data = quizData[g3State.idx];\n        const fb = document.getElementById('game3Feedback');\n        const correct = choice === data.righteous;\n\n        document.getElementById('g3right').disabled = true;\n        document.getElementById('g3wrong').disabled = true;\n\n        if (correct) {\n            g3State.score++;\n            g3State.streak++;\n            fb.className = 'fb-box show correct';\n            fb.innerHTML = `\u2705 <strong>Correct!<\/strong> ${data.feedback}`;\n            document.getElementById('g3right').classList.add('selected-correct');\n        } else {\n            g3State.streak = 0;\n            fb.className = 'fb-box show wrong';\n            fb.innerHTML = `\u274c <strong>Not quite.<\/strong> ${data.feedback}`;\n            if (choice) {\n                document.getElementById('g3right').classList.add('selected-wrong');\n            } else {\n                document.getElementById('g3wrong').classList.add('selected-wrong');\n            }\n        }\n\n        g3State.answered = true;\n        document.getElementById('game3Score').textContent = g3State.score;\n        document.getElementById('game3Streak').textContent = g3State.streak;\n\n        setTimeout(() => {\n            g3State.idx++;\n            renderGame3();\n        }, 3000);\n    }\n\n    function resetGame3() {\n        g3State = { idx: 0, score: 0, streak: 0, answered: false };\n        renderGame3();\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    renderGame1();\n    initGame2();\n    renderGame3();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Kids Games Zone Learn about courage, conscience, and standing up for what&#8217;s right! \ud83e\udde0 What Would You Do? \ud83e\udde9 Match the Principle \u2696\ufe0f Righteous or Not? What Would You Do? Make choices like a real Google employee! \u2b50 Score: 0 \ud83d\udcdd Step: 1 \/ 5 Restart Match the Principle Match each principle with its meaning! [&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-2345","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2345","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=2345"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2345\/revisions"}],"predecessor-version":[{"id":2346,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2345\/revisions\/2346"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=2345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}