{"id":2150,"date":"2026-08-26T15:08:51","date_gmt":"2026-08-26T15:08:51","guid":{"rendered":"https:\/\/museum.wiserighteous.org\/?page_id=2150"},"modified":"2026-08-26T15:08:51","modified_gmt":"2026-08-26T15:08:51","slug":"game-for-mandela","status":"publish","type":"page","link":"https:\/\/museum.wiserighteous.org\/index.php\/game-for-mandela\/","title":{"rendered":"Game for Mandela"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>Nelson Mandela Matching Game<\/title>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  body {\n    margin: 0;\n    font-family: Georgia, \"Times New Roman\", serif;\n    background: #f3efe4;\n    color: #222;\n  }\n\n  .game-wrapper {\n    max-width: 1050px;\n    margin: 0 auto;\n    padding: 25px 18px 50px;\n  }\n\n  \/* HEADER *\/\n\n  .game-header {\n    background: #1a1a2e;\n    color: white;\n    text-align: center;\n    padding: 35px 25px;\n    border-radius: 10px;\n    border-bottom: 6px solid #c9a84c;\n    box-shadow: 0 5px 18px rgba(0,0,0,0.15);\n  }\n\n  .game-header h1 {\n    margin: 0 0 8px;\n    font-size: 38px;\n  }\n\n  .game-header h2 {\n    margin: 0;\n    color: #e7d48a;\n    font-size: 20px;\n    font-weight: normal;\n  }\n\n  .game-header p {\n    max-width: 750px;\n    margin: 18px auto 0;\n    font-size: 16px;\n  }\n\n  \/* LEARNING PATH *\/\n\n  .learning-path {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 7px;\n    margin: 25px 0;\n  }\n\n  .path-item {\n    background: #1a1a2e;\n    color: white;\n    padding: 9px 13px;\n    border-radius: 5px;\n    font-size: 14px;\n    font-weight: bold;\n  }\n\n  .path-arrow {\n    color: #b28b25;\n    font-weight: bold;\n    font-size: 20px;\n  }\n\n  \/* GAME INFO *\/\n\n  .game-info {\n    background: white;\n    padding: 18px;\n    border-radius: 8px;\n    box-shadow: 0 3px 10px rgba(0,0,0,0.08);\n    display: flex;\n    justify-content: space-around;\n    flex-wrap: wrap;\n    gap: 15px;\n    text-align: center;\n    margin-bottom: 22px;\n  }\n\n  .stat {\n    min-width: 130px;\n  }\n\n  .stat-label {\n    display: block;\n    font-size: 13px;\n    color: #777;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n  }\n\n  .stat-value {\n    display: block;\n    font-size: 25px;\n    font-weight: bold;\n    color: #1a1a2e;\n  }\n\n  \/* INSTRUCTIONS *\/\n\n  .instructions {\n    background: white;\n    border-left: 5px solid #c9a84c;\n    padding: 18px 22px;\n    margin-bottom: 25px;\n    border-radius: 5px;\n  }\n\n  .instructions strong {\n    color: #1a1a2e;\n  }\n\n  \/* BOARD *\/\n\n  .game-board {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 15px;\n  }\n\n  \/* CARDS *\/\n\n  .card {\n    min-height: 135px;\n    perspective: 900px;\n    cursor: pointer;\n  }\n\n  .card-inner {\n    width: 100%;\n    height: 100%;\n    min-height: 135px;\n    position: relative;\n    transition: transform 0.45s;\n    transform-style: preserve-3d;\n  }\n\n  .card.flipped .card-inner,\n  .card.matched .card-inner {\n    transform: rotateY(180deg);\n  }\n\n  .card-front,\n  .card-back {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    min-height: 135px;\n    backface-visibility: hidden;\n    border-radius: 9px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    padding: 15px;\n  }\n\n  .card-front {\n    background: #1a1a2e;\n    color: white;\n    border: 3px solid #c9a84c;\n    font-size: 30px;\n    font-weight: bold;\n  }\n\n  .card-front span {\n    font-size: 14px;\n    display: block;\n    margin-top: 8px;\n    color: #e7d48a;\n  }\n\n  .card-back {\n    background: white;\n    color: #1a1a2e;\n    border: 3px solid #aaa;\n    transform: rotateY(180deg);\n    font-size: 16px;\n    line-height: 1.4;\n    font-weight: bold;\n  }\n\n  .card.concept .card-back {\n    border-color: #1a1a2e;\n  }\n\n  .card.definition .card-back {\n    border-color: #c9a84c;\n  }\n\n  .card.matched {\n    cursor: default;\n  }\n\n  .card.matched .card-back {\n    background: #edf5ed;\n    border-color: #4c7a50;\n  }\n\n  \/* FEEDBACK *\/\n\n  .feedback {\n    display: none;\n    margin: 25px 0;\n    padding: 18px;\n    border-radius: 7px;\n    text-align: center;\n    font-size: 18px;\n    font-weight: bold;\n  }\n\n  .feedback.success {\n    display: block;\n    background: #edf5ed;\n    color: #285d2d;\n    border: 2px solid #7da681;\n  }\n\n  .feedback.try-again {\n    display: block;\n    background: #fff5e5;\n    color: #76530b;\n    border: 2px solid #d6b55c;\n  }\n\n  \/* BUTTON *\/\n\n  .button-area {\n    text-align: center;\n    margin: 30px 0;\n  }\n\n  .reset-button {\n    border: 2px solid #c9a84c;\n    background: #1a1a2e;\n    color: white;\n    padding: 13px 30px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 16px;\n    font-weight: bold;\n  }\n\n  .reset-button:hover {\n    background: #292947;\n  }\n\n  \/* FINAL RESULT *\/\n\n  .final-result {\n    display: none;\n    background: white;\n    border-top: 6px solid #c9a84c;\n    border-radius: 8px;\n    padding: 30px;\n    text-align: center;\n    box-shadow: 0 5px 18px rgba(0,0,0,0.12);\n  }\n\n  .final-result h2 {\n    color: #1a1a2e;\n    margin-top: 0;\n  }\n\n  .final-score {\n    font-size: 35px;\n    font-weight: bold;\n    color: #1a1a2e;\n  }\n\n  .lesson {\n    margin-top: 20px;\n    background: #f5f1e7;\n    padding: 18px;\n    border-radius: 6px;\n    text-align: left;\n  }\n\n  .lesson strong {\n    color: #1a1a2e;\n  }\n\n  \/* FOOTER *\/\n\n  .footer {\n    text-align: center;\n    margin-top: 35px;\n    color: #777;\n    font-size: 13px;\n  }\n\n  \/* RESPONSIVE *\/\n\n  @media (max-width: 800px) {\n    .game-board {\n      grid-template-columns: repeat(2, 1fr);\n    }\n\n    .game-header h1 {\n      font-size: 30px;\n    }\n  }\n\n  @media (max-width: 500px) {\n    .game-board {\n      grid-template-columns: 1fr 1fr;\n      gap: 9px;\n    }\n\n    .card,\n    .card-inner,\n    .card-front,\n    .card-back {\n      min-height: 120px;\n    }\n\n    .card-back {\n      font-size: 13px;\n    }\n\n    .card-front {\n      font-size: 24px;\n    }\n  }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"game-wrapper\">\n\n  <!-- HEADER -->\n\n  <div class=\"game-header\">\n\n    <h1>Nelson Mandela<\/h1>\n\n    <h2>Match the Ideas<\/h2>\n\n    <p>\n      A Kids&#8217; Learning Game about Education, Preparation,\n      Diligence, Justice, and Service\n    <\/p>\n\n  <\/div>\n\n\n  <!-- LEARNING PATH -->\n\n  <div class=\"learning-path\">\n\n    <div class=\"path-item\">Education<\/div>\n\n    <div class=\"path-arrow\">\u2192<\/div>\n\n    <div class=\"path-item\">Preparation<\/div>\n\n    <div class=\"path-arrow\">\u2192<\/div>\n\n    <div class=\"path-item\">Diligence<\/div>\n\n    <div class=\"path-arrow\">\u2192<\/div>\n\n    <div class=\"path-item\">Justice<\/div>\n\n    <div class=\"path-arrow\">\u2192<\/div>\n\n    <div class=\"path-item\">Service<\/div>\n\n  <\/div>\n\n\n  <!-- GAME INFO -->\n\n  <div class=\"game-info\">\n\n    <div class=\"stat\">\n\n      <span class=\"stat-label\">\n        Matches\n      <\/span>\n\n      <span\n        class=\"stat-value\"\n        id=\"matches\">\n        0 \/ 8\n      <\/span>\n\n    <\/div>\n\n\n    <div class=\"stat\">\n\n      <span class=\"stat-label\">\n        Attempts\n      <\/span>\n\n      <span\n        class=\"stat-value\"\n        id=\"attempts\">\n        0\n      <\/span>\n\n    <\/div>\n\n\n    <div class=\"stat\">\n\n      <span class=\"stat-label\">\n        Score\n      <\/span>\n\n      <span\n        class=\"stat-value\"\n        id=\"score\">\n        0\n      <\/span>\n\n    <\/div>\n\n\n    <div class=\"stat\">\n\n      <span class=\"stat-label\">\n        Time\n      <\/span>\n\n      <span\n        class=\"stat-value\"\n        id=\"timer\">\n        00:00\n      <\/span>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- INSTRUCTIONS -->\n\n  <div class=\"instructions\">\n\n    <strong>How to play:<\/strong>\n\n    Click two cards.\n\n    <br>\n\n    One card shows an important idea.\n    The other card shows its meaning.\n\n    <br>\n\n    <strong>Your goal:<\/strong>\n    Match all 8 pairs and learn the lesson behind each idea.\n\n  <\/div>\n\n\n  <!-- GAME BOARD -->\n\n  <div\n    class=\"game-board\"\n    id=\"gameBoard\">\n  <\/div>\n\n\n  <!-- FEEDBACK -->\n\n  <div\n    class=\"feedback\"\n    id=\"feedback\">\n  <\/div>\n\n\n  <!-- BUTTON -->\n\n  <div class=\"button-area\">\n\n    <button\n      class=\"reset-button\"\n      onclick=\"startGame()\">\n\n      \ud83d\udd04 Start New Game\n\n    <\/button>\n\n  <\/div>\n\n\n  <!-- FINAL RESULT -->\n\n  <div\n    class=\"final-result\"\n    id=\"finalResult\">\n\n    <h2>\ud83c\udf89 Excellent Work!<\/h2>\n\n    <div\n      class=\"final-score\"\n      id=\"finalScore\">\n    <\/div>\n\n    <p id=\"finalMessage\"><\/p>\n\n\n    <div class=\"lesson\">\n\n      <strong>What did you learn?<\/strong>\n\n      <p>\n        Nelson Mandela&#8217;s early development reminds us that\n        education and preparation can help a person develop\n        the knowledge and skills needed for greater responsibility.\n      <\/p>\n\n      <p>\n        Diligence means continuing to learn and improve.\n        Justice means treating people fairly.\n        Service means using what we learn to help others.\n      <\/p>\n\n      <p>\n        <strong>\n          Education \u2192 Preparation \u2192 Diligence \u2192 Justice \u2192 Service\n        <\/strong>\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"footer\">\n\n    The Righteousness Museum \u2014 Kids Learning Station\n\n  <\/div>\n\n<\/div>\n\n\n<script>\n\n\/* =========================================================\n   MATCHING GAME DATA\n   ========================================================= *\/\n\nconst pairs = [\n\n  {\n    id: 1,\n    concept: \"Education\",\n    definition:\n      \"Learning knowledge and skills that help us understand the world and prepare for responsibility.\"\n  },\n\n  {\n    id: 2,\n    concept: \"Preparation\",\n    definition:\n      \"Developing the knowledge, skills, and judgment needed for future responsibilities.\"\n  },\n\n  {\n    id: 3,\n    concept: \"Diligence\",\n    definition:\n      \"Working carefully and persistently instead of giving up when something is difficult.\"\n  },\n\n  {\n    id: 4,\n    concept: \"Justice\",\n    definition:\n      \"Seeking fairness, equal treatment, and respect for the rights of others.\"\n  },\n\n  {\n    id: 5,\n    concept: \"Service\",\n    definition:\n      \"Using our abilities and knowledge to help other people and contribute to society.\"\n  },\n\n  {\n    id: 6,\n    concept: \"Law\",\n    definition:\n      \"Rules and systems that help organize society and establish rights and responsibilities.\"\n  },\n\n  {\n    id: 7,\n    concept: \"Responsibility\",\n    definition:\n      \"Being willing to accept duties and act carefully because our choices affect others.\"\n  },\n\n  {\n    id: 8,\n    concept: \"Learning from Mistakes\",\n    definition:\n      \"Reviewing what went wrong, understanding it, and using the lesson to improve.\"\n  }\n\n];\n\n\n\/* =========================================================\n   GAME VARIABLES\n   ========================================================= *\/\n\nlet cards = [];\n\nlet firstCard = null;\n\nlet secondCard = null;\n\nlet lockBoard = false;\n\nlet matches = 0;\n\nlet attempts = 0;\n\nlet score = 0;\n\nlet seconds = 0;\n\nlet timerInterval = null;\n\n\n\/* =========================================================\n   START GAME\n   ========================================================= *\/\n\nfunction startGame() {\n\n  clearInterval(timerInterval);\n\n  matches = 0;\n\n  attempts = 0;\n\n  score = 0;\n\n  seconds = 0;\n\n  firstCard = null;\n\n  secondCard = null;\n\n  lockBoard = false;\n\n\n  updateStats();\n\n\n  document.getElementById(\"feedback\").className =\n    \"feedback\";\n\n  document.getElementById(\"feedback\").innerHTML =\n    \"\";\n\n\n  document.getElementById(\"finalResult\").style.display =\n    \"none\";\n\n\n  \/* CREATE CARDS *\/\n\n  cards = [];\n\n\n  pairs.forEach(pair => {\n\n    cards.push({\n\n      id: pair.id,\n\n      type: \"concept\",\n\n      text: pair.concept\n\n    });\n\n\n    cards.push({\n\n      id: pair.id,\n\n      type: \"definition\",\n\n      text: pair.definition\n\n    });\n\n  });\n\n\n  \/* SHUFFLE *\/\n\n  shuffle(cards);\n\n\n  \/* BUILD BOARD *\/\n\n  const board =\n    document.getElementById(\"gameBoard\");\n\n  board.innerHTML = \"\";\n\n\n  cards.forEach((card, index) => {\n\n    const cardElement =\n      document.createElement(\"div\");\n\n    cardElement.className =\n      \"card \" + card.type;\n\n    cardElement.dataset.id =\n      card.id;\n\n    cardElement.dataset.index =\n      index;\n\n\n    cardElement.innerHTML = `\n\n      <div class=\"card-inner\">\n\n        <div class=\"card-front\">\n\n          ?\n\n          <span>\n            Match Me!\n          <\/span>\n\n        <\/div>\n\n        <div class=\"card-back\">\n\n          ${card.text}\n\n        <\/div>\n\n      <\/div>\n\n    `;\n\n\n    cardElement.addEventListener(\n      \"click\",\n      () => flipCard(cardElement)\n    );\n\n\n    board.appendChild(cardElement);\n\n  });\n\n\n  \/* START TIMER *\/\n\n  timerInterval =\n    setInterval(() => {\n\n      seconds++;\n\n      updateTimer();\n\n    }, 1000);\n\n}\n\n\n\/* =========================================================\n   SHUFFLE\n   ========================================================= *\/\n\nfunction shuffle(array) {\n\n  for (\n    let i = array.length - 1;\n    i > 0;\n    i--\n  ) {\n\n    const j =\n      Math.floor(\n        Math.random() * (i + 1)\n      );\n\n    [\n      array[i],\n      array[j]\n    ] =\n    [\n      array[j],\n      array[i]\n    ];\n\n  }\n\n}\n\n\n\/* =========================================================\n   FLIP CARD\n   ========================================================= *\/\n\nfunction flipCard(cardElement) {\n\n  if (lockBoard) {\n    return;\n  }\n\n\n  if (\n    cardElement.classList.contains(\"flipped\") ||\n    cardElement.classList.contains(\"matched\")\n  ) {\n    return;\n  }\n\n\n  cardElement.classList.add(\"flipped\");\n\n\n  if (!firstCard) {\n\n    firstCard = cardElement;\n\n    return;\n\n  }\n\n\n  secondCard = cardElement;\n\n  attempts++;\n\n  updateStats();\n\n\n  checkMatch();\n\n}\n\n\n\/* =========================================================\n   CHECK MATCH\n   ========================================================= *\/\n\nfunction checkMatch() {\n\n  const firstId =\n    firstCard.dataset.id;\n\n  const secondId =\n    secondCard.dataset.id;\n\n\n  if (firstId === secondId) {\n\n    \/* MATCH *\/\n\n    score += 10;\n\n    matches++;\n\n\n    firstCard.classList.add(\"matched\");\n\n    secondCard.classList.add(\"matched\");\n\n\n    showFeedback(\n      \"success\",\n      \"\u2713 Great match! You learned something important.\"\n    );\n\n\n    resetSelection();\n\n\n    updateStats();\n\n\n    if (matches === pairs.length) {\n\n      finishGame();\n\n    }\n\n  }\n\n  else {\n\n    \/* NOT A MATCH *\/\n\n    score = Math.max(0, score - 2);\n\n\n    showFeedback(\n      \"try-again\",\n      \"Not quite. Read both cards carefully and try again!\"\n    );\n\n\n    lockBoard = true;\n\n\n    setTimeout(() => {\n\n      firstCard.classList.remove(\"flipped\");\n\n      secondCard.classList.remove(\"flipped\");\n\n\n      resetSelection();\n\n    }, 1000);\n\n  }\n\n}\n\n\n\/* =========================================================\n   RESET SELECTION\n   ========================================================= *\/\n\nfunction resetSelection() {\n\n  firstCard = null;\n\n  secondCard = null;\n\n  lockBoard = false;\n\n}\n\n\n\/* =========================================================\n   FEEDBACK\n   ========================================================= *\/\n\nfunction showFeedback(type, message) {\n\n  const feedback =\n    document.getElementById(\"feedback\");\n\n\n  feedback.className =\n    \"feedback \" + type;\n\n\n  feedback.innerHTML =\n    message;\n\n}\n\n\n\/* =========================================================\n   UPDATE STATS\n   ========================================================= *\/\n\nfunction updateStats() {\n\n  document.getElementById(\"matches\").textContent =\n    matches + \" \/ \" + pairs.length;\n\n\n  document.getElementById(\"attempts\").textContent =\n    attempts;\n\n\n  document.getElementById(\"score\").textContent =\n    score;\n\n}\n\n\n\/* =========================================================\n   TIMER\n   ========================================================= *\/\n\nfunction updateTimer() {\n\n  const minutes =\n    Math.floor(seconds \/ 60);\n\n  const remainingSeconds =\n    seconds % 60;\n\n\n  const formattedMinutes =\n    String(minutes).padStart(2, \"0\");\n\n\n  const formattedSeconds =\n    String(remainingSeconds).padStart(2, \"0\");\n\n\n  document.getElementById(\"timer\").textContent =\n    formattedMinutes + \":\" + formattedSeconds;\n\n}\n\n\n\/* =========================================================\n   FINISH GAME\n   ========================================================= *\/\n\nfunction finishGame() {\n\n  clearInterval(timerInterval);\n\n\n  const finalResult =\n    document.getElementById(\"finalResult\");\n\n\n  const finalScore =\n    document.getElementById(\"finalScore\");\n\n\n  const finalMessage =\n    document.getElementById(\"finalMessage\");\n\n\n  finalScore.textContent =\n    score + \" points\";\n\n\n  let message;\n\n\n  if (score >= 75) {\n\n    message =\n      \"Outstanding! You matched the ideas and showed excellent understanding.\";\n\n  }\n\n  else if (score >= 55) {\n\n    message =\n      \"Great job! You understand many of the important ideas. Keep practicing.\";\n\n  }\n\n  else {\n\n    message =\n      \"Good effort! Review the ideas below and try the game again.\";\n\n  }\n\n\n  finalMessage.innerHTML = `\n\n    ${message}\n\n    <br><br>\n\n    You completed all ${pairs.length} matches\n    in ${attempts} attempts.\n\n  `;\n\n\n  finalResult.style.display =\n    \"block\";\n\n\n  finalResult.scrollIntoView({\n\n    behavior: \"smooth\",\n\n    block: \"center\"\n\n  });\n\n}\n\n\n\/* =========================================================\n   START AUTOMATICALLY\n   ========================================================= *\/\n\nstartGame();\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Nelson Mandela Matching Game Nelson Mandela Match the Ideas A Kids&#8217; Learning Game about Education, Preparation, Diligence, Justice, and Service Education \u2192 Preparation \u2192 Diligence \u2192 Justice \u2192 Service Matches 0 \/ 8 Attempts 0 Score 0 Time 00:00 How to play: Click two cards. One card shows an important idea. The other card shows [&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-2150","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2150","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=2150"}],"version-history":[{"count":1,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2150\/revisions"}],"predecessor-version":[{"id":2151,"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/2150\/revisions\/2151"}],"wp:attachment":[{"href":"https:\/\/museum.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=2150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}