{"id":13022,"date":"2026-04-26T13:49:42","date_gmt":"2026-04-26T13:49:42","guid":{"rendered":"https:\/\/www.llanedeyrnprimary.co.uk\/?page_id=13022"},"modified":"2026-04-26T13:49:54","modified_gmt":"2026-04-26T13:49:54","slug":"hundred-square","status":"publish","type":"page","link":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/hundred-square\/","title":{"rendered":"Hundred Square"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"llanedeyrn-hundred-square\">\n  <h2>Interactive Hundred Square<\/h2>\n\n  <p class=\"intro\">\n    Click the numbers to highlight them. Use the square to help with counting on, counting back, adding and subtracting.\n  <\/p>\n\n  <div class=\"instruction-box\">\n    <strong>How to use it:<\/strong><br>\n    Click a starting number, then click more numbers as you count on or back.\n  <\/div>\n\n  <div class=\"button-row\">\n    <button type=\"button\" onclick=\"highlightPattern(2)\">Count in 2s<\/button>\n    <button type=\"button\" onclick=\"highlightPattern(5)\">Count in 5s<\/button>\n    <button type=\"button\" onclick=\"highlightPattern(10)\">Count in 10s<\/button>\n    <button type=\"button\" onclick=\"clearPattern()\">Clear pattern<\/button>\n    <button type=\"button\" class=\"reset-btn\" onclick=\"resetHundredSquare()\">Reset all<\/button>\n  <\/div>\n\n  <div id=\"numberInfo\" class=\"number-info\">\n    Click a number to begin.\n  <\/div>\n\n  <div class=\"hundred-square-wrap\">\n    <div id=\"hundredSquare\" class=\"hundred-square\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .llanedeyrn-hundred-square {\n    max-width: 1000px;\n    margin: 20px auto;\n    padding: 24px;\n    background: #ffffff;\n    border-radius: 18px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    font-family: Arial, sans-serif;\n    text-align: center;\n  }\n\n  .llanedeyrn-hundred-square h2 {\n    color: #002060;\n    font-size: 32px;\n    margin-bottom: 10px;\n  }\n\n  .llanedeyrn-hundred-square .intro {\n    font-size: 18px;\n    color: #333333;\n    margin-bottom: 18px;\n  }\n\n  .instruction-box {\n    max-width: 650px;\n    margin: 0 auto 20px;\n    padding: 14px 18px;\n    background: #f4eef5;\n    border: 3px solid #8b296f;\n    border-radius: 14px;\n    color: #002060;\n    font-size: 18px;\n    line-height: 1.5;\n  }\n\n  .button-row {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-bottom: 18px;\n  }\n\n  .button-row button {\n    background: #002060;\n    color: #ffffff;\n    border: none;\n    border-radius: 10px;\n    padding: 10px 14px;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n  }\n\n  .button-row button:hover {\n    background: #8b296f;\n  }\n\n  .button-row .reset-btn {\n    background: #8b296f;\n  }\n\n  .button-row .reset-btn:hover {\n    background: #002060;\n  }\n\n  .number-info {\n    margin: 16px auto 22px;\n    padding: 16px;\n    max-width: 650px;\n    background: #eef4ff;\n    border: 3px solid #002060;\n    border-radius: 14px;\n    color: #002060;\n    font-size: 20px;\n    font-weight: bold;\n    line-height: 1.5;\n  }\n\n  .hundred-square-wrap {\n    overflow-x: auto;\n  }\n\n  .hundred-square {\n    display: grid;\n    grid-template-columns: repeat(10, 58px);\n    gap: 4px;\n    justify-content: center;\n    margin: 0 auto;\n  }\n\n  .hundred-cell {\n    width: 58px;\n    height: 58px;\n    border: 2px solid #cccccc;\n    border-radius: 8px;\n    background: #ffffff;\n    color: #222222;\n    font-size: 19px;\n    font-weight: bold;\n    cursor: pointer;\n  }\n\n  .hundred-cell:hover {\n    background: #f4eef5;\n    border-color: #8b296f;\n  }\n\n  .hundred-cell.selected {\n    background: #8b296f;\n    color: #ffffff;\n    border-color: #002060;\n    box-shadow: 0 0 0 3px #002060 inset;\n  }\n\n  .hundred-cell.first-selected {\n    background: #002060;\n    color: #ffffff;\n  }\n\n  .hundred-cell.last-selected {\n    background: #8b296f;\n    color: #ffffff;\n    transform: scale(1.05);\n  }\n\n  .hundred-cell.pattern {\n    background: #dbe8ff;\n    border-color: #002060;\n  }\n\n  .hundred-cell.selected.pattern {\n    background: #8b296f;\n    color: #ffffff;\n  }\n\n  @media (max-width: 700px) {\n    .llanedeyrn-hundred-square {\n      padding: 16px;\n    }\n\n    .llanedeyrn-hundred-square h2 {\n      font-size: 26px;\n    }\n\n    .hundred-square {\n      grid-template-columns: repeat(10, 42px);\n      gap: 3px;\n    }\n\n    .hundred-cell {\n      width: 42px;\n      height: 42px;\n      font-size: 15px;\n      border-radius: 6px;\n    }\n\n    .number-info {\n      font-size: 17px;\n    }\n\n    .button-row button {\n      font-size: 14px;\n      padding: 9px 11px;\n    }\n  }\n<\/style>\n\n<script>\n  const hundredSquare = document.getElementById(\"hundredSquare\");\n  const numberInfo = document.getElementById(\"numberInfo\");\n\n  let selectedNumbers = [];\n\n  function buildHundredSquare() {\n    for (let i = 1; i <= 100; i++) {\n      const cell = document.createElement(\"button\");\n      cell.type = \"button\";\n      cell.className = \"hundred-cell\";\n      cell.textContent = i;\n      cell.dataset.number = i;\n\n      cell.addEventListener(\"click\", function () {\n        toggleNumber(i, cell);\n      });\n\n      hundredSquare.appendChild(cell);\n    }\n  }\n\n  function toggleNumber(number, cell) {\n    if (selectedNumbers.includes(number)) {\n      selectedNumbers = selectedNumbers.filter(n => n !== number);\n      cell.classList.remove(\"selected\", \"first-selected\", \"last-selected\");\n    } else {\n      selectedNumbers.push(number);\n      cell.classList.add(\"selected\");\n    }\n\n    updateSelectedStyles();\n    updateNumberInfo();\n  }\n\n  function updateSelectedStyles() {\n    const allCells = document.querySelectorAll(\".hundred-cell\");\n\n    allCells.forEach(cell => {\n      cell.classList.remove(\"first-selected\", \"last-selected\");\n    });\n\n    if (selectedNumbers.length > 0) {\n      const first = selectedNumbers[0];\n      const last = selectedNumbers[selectedNumbers.length - 1];\n\n      const firstCell = document.querySelector(`[data-number=\"${first}\"]`);\n      const lastCell = document.querySelector(`[data-number=\"${last}\"]`);\n\n      if (firstCell) firstCell.classList.add(\"first-selected\");\n      if (lastCell) lastCell.classList.add(\"last-selected\");\n    }\n  }\n\n  function updateNumberInfo() {\n    if (selectedNumbers.length === 0) {\n      numberInfo.innerHTML = \"Click a number to begin.\";\n      return;\n    }\n\n    const first = selectedNumbers[0];\n    const last = selectedNumbers[selectedNumbers.length - 1];\n    const difference = Math.abs(last - first);\n\n    if (selectedNumbers.length === 1) {\n      numberInfo.innerHTML = `\n        Start number: ${first}<br>\n        Click more numbers to count on or back.\n      `;\n      return;\n    }\n\n    if (last > first) {\n      numberInfo.innerHTML = `\n        Start number: ${first}<br>\n        Last number: ${last}<br>\n        You counted on ${difference}.<br>\n        ${first} + ${difference} = ${last}\n      `;\n    } else if (last < first) {\n      numberInfo.innerHTML = `\n        Start number: ${first}<br>\n        Last number: ${last}<br>\n        You counted back ${difference}.<br>\n        ${first} - ${difference} = ${last}\n      `;\n    } else {\n      numberInfo.innerHTML = `\n        Start number: ${first}<br>\n        Last number: ${last}\n      `;\n    }\n  }\n\n  function highlightPattern(step) {\n    clearPattern();\n\n    const allCells = document.querySelectorAll(\".hundred-cell\");\n\n    allCells.forEach(cell => {\n      const number = Number(cell.dataset.number);\n\n      if (number % step === 0) {\n        cell.classList.add(\"pattern\");\n      }\n    });\n\n    numberInfo.innerHTML = `Pattern shown: counting in ${step}s.`;\n  }\n\n  function clearPattern() {\n    const allCells = document.querySelectorAll(\".hundred-cell\");\n\n    allCells.forEach(cell => {\n      cell.classList.remove(\"pattern\");\n    });\n\n    updateNumberInfo();\n  }\n\n  function resetHundredSquare() {\n    selectedNumbers = [];\n\n    const allCells = document.querySelectorAll(\".hundred-cell\");\n\n    allCells.forEach(cell => {\n      cell.classList.remove(\"selected\", \"first-selected\", \"last-selected\", \"pattern\");\n    });\n\n    numberInfo.innerHTML = \"Click a number to begin.\";\n  }\n\n  buildHundredSquare();\n<\/script><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-13022","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=13022"}],"version-history":[{"count":2,"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13022\/revisions"}],"predecessor-version":[{"id":13024,"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13022\/revisions\/13024"}],"wp:attachment":[{"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=13022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}