{"id":13025,"date":"2026-04-27T06:42:46","date_gmt":"2026-04-27T06:42:46","guid":{"rendered":"https:\/\/www.llanedeyrnprimary.co.uk\/?page_id=13025"},"modified":"2026-04-27T06:42:57","modified_gmt":"2026-04-27T06:42:57","slug":"number-line","status":"publish","type":"page","link":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/number-line\/","title":{"rendered":"Number Line"},"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-start-end-line\">\n  <h2>Interactive Number Line<\/h2>\n\n  <p class=\"intro\">\n    Click a start number, then click an end number. The number line will show how far you moved.\n  <\/p>\n\n  <div class=\"controls\">\n    <label>\n      Choose number line:\n      <select id=\"lineRange\">\n        <option value=\"10\">1 to 10<\/option>\n        <option value=\"20\" selected>1 to 20<\/option>\n        <option value=\"50\">1 to 50<\/option>\n        <option value=\"100\">1 to 100<\/option>\n      <\/select>\n    <\/label>\n  <\/div>\n\n  <div id=\"numberSentence\" class=\"number-sentence\">\n    Click your start number.\n  <\/div>\n\n  <div class=\"button-row\">\n    <button type=\"button\" onclick=\"clearNumberLine()\">Clear<\/button>\n  <\/div>\n\n  <div class=\"number-line-scroll\">\n    <div id=\"numberLine\" class=\"number-line\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .llanedeyrn-start-end-line {\n    max-width: 1050px;\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-start-end-line h2 {\n    color: #002060;\n    font-size: 32px;\n    margin-bottom: 10px;\n  }\n\n  .llanedeyrn-start-end-line .intro {\n    font-size: 18px;\n    color: #333333;\n    margin-bottom: 18px;\n  }\n\n  .controls {\n    margin-bottom: 16px;\n  }\n\n  .controls label {\n    font-size: 18px;\n    font-weight: bold;\n    color: #002060;\n  }\n\n  .controls select {\n    font-size: 18px;\n    padding: 8px 12px;\n    margin-left: 8px;\n    border: 2px solid #8b296f;\n    border-radius: 8px;\n    background: #ffffff;\n  }\n\n  .number-sentence {\n    margin: 16px auto 16px;\n    padding: 16px;\n    max-width: 700px;\n    background: #eef4ff;\n    border: 3px solid #002060;\n    border-radius: 14px;\n    color: #002060;\n    font-size: 24px;\n    font-weight: bold;\n    line-height: 1.5;\n  }\n\n  .button-row {\n    margin-bottom: 22px;\n  }\n\n  .button-row button {\n    background: #8b296f;\n    color: #ffffff;\n    border: none;\n    border-radius: 10px;\n    padding: 12px 22px;\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n  }\n\n  .button-row button:hover {\n    background: #002060;\n  }\n\n  .number-line-scroll {\n    overflow-x: auto;\n    padding: 48px 10px 10px;\n  }\n\n  .number-line {\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    min-height: 140px;\n    padding: 10px 0;\n    width: max-content;\n    margin: 0 auto;\n  }\n\n  .number-point {\n    position: relative;\n    width: 54px;\n    text-align: center;\n    cursor: pointer;\n  }\n\n  .number-point::before {\n    content: \"\";\n    position: absolute;\n    top: 36px;\n    left: 0;\n    right: 0;\n    height: 5px;\n    background: #002060;\n  }\n\n  .number-point:first-child::before {\n    left: 50%;\n  }\n\n  .number-point:last-child::before {\n    right: 50%;\n  }\n\n  .number-point.highlight-between::before {\n    background: #8b296f;\n  }\n\n  .tick {\n    width: 4px;\n    height: 28px;\n    background: #002060;\n    margin: 20px auto 6px;\n    border-radius: 4px;\n  }\n\n  .number-point.highlight-between .tick {\n    background: #8b296f;\n  }\n\n  .number-label {\n    display: inline-block;\n    min-width: 36px;\n    padding: 6px 4px;\n    border-radius: 8px;\n    color: #002060;\n    font-size: 18px;\n    font-weight: bold;\n  }\n\n  .number-point.start-selected .number-label {\n    background: #002060;\n    color: #ffffff;\n  }\n\n  .number-point.end-selected .number-label {\n    background: #8b296f;\n    color: #ffffff;\n  }\n\n  .counter {\n    position: absolute;\n    top: -38px;\n    left: 50%;\n    transform: translateX(-50%);\n    min-width: 52px;\n    padding: 6px 8px;\n    border-radius: 999px;\n    color: #ffffff;\n    font-size: 14px;\n    font-weight: bold;\n    box-shadow: 0 3px 8px rgba(0,0,0,0.25);\n  }\n\n  .start-counter {\n    background: #002060;\n  }\n\n  .end-counter {\n    background: #8b296f;\n  }\n\n  @media (max-width: 700px) {\n    .llanedeyrn-start-end-line {\n      padding: 16px;\n    }\n\n    .llanedeyrn-start-end-line h2 {\n      font-size: 26px;\n    }\n\n    .number-sentence {\n      font-size: 20px;\n    }\n\n    .number-point {\n      width: 46px;\n    }\n\n    .number-label {\n      font-size: 16px;\n    }\n\n    .counter {\n      font-size: 12px;\n      min-width: 46px;\n      padding: 5px 6px;\n    }\n  }\n<\/style>\n\n<script>\n  const numberLine = document.getElementById(\"numberLine\");\n  const lineRange = document.getElementById(\"lineRange\");\n  const numberSentence = document.getElementById(\"numberSentence\");\n\n  let startNumber = null;\n  let endNumber = null;\n  let maxNumber = 20;\n\n  function buildNumberLine() {\n    maxNumber = Number(lineRange.value);\n    numberLine.innerHTML = \"\";\n    startNumber = null;\n    endNumber = null;\n    numberSentence.innerHTML = \"Click your start number.\";\n\n    for (let i = 1; i <= maxNumber; i++) {\n      const point = document.createElement(\"div\");\n      point.className = \"number-point\";\n      point.dataset.number = i;\n\n      point.innerHTML = `\n        <div class=\"tick\"><\/div>\n        <div class=\"number-label\">${i}<\/div>\n      `;\n\n      point.addEventListener(\"click\", function () {\n        chooseNumber(i);\n      });\n\n      numberLine.appendChild(point);\n    }\n  }\n\n  function chooseNumber(number) {\n    if (startNumber === null) {\n      startNumber = number;\n      endNumber = null;\n      numberSentence.innerHTML = `Start at ${startNumber}. Now click your end number.`;\n    } else if (endNumber === null) {\n      endNumber = number;\n      showNumberSentence();\n    } else {\n      startNumber = number;\n      endNumber = null;\n      numberSentence.innerHTML = `Start at ${startNumber}. Now click your end number.`;\n    }\n\n    updateLineDisplay();\n    scrollToSelectedNumber(number);\n  }\n\n  function showNumberSentence() {\n    const difference = Math.abs(endNumber - startNumber);\n\n    if (endNumber > startNumber) {\n      numberSentence.innerHTML = `\n        Start: ${startNumber}<br>\n        End: ${endNumber}<br>\n        ${startNumber} + ${difference} = ${endNumber}\n      `;\n    } else if (endNumber < startNumber) {\n      numberSentence.innerHTML = `\n        Start: ${startNumber}<br>\n        End: ${endNumber}<br>\n        ${startNumber} - ${difference} = ${endNumber}\n      `;\n    } else {\n      numberSentence.innerHTML = `\n        Start: ${startNumber}<br>\n        End: ${endNumber}<br>\n        You stayed on the same number.\n      `;\n    }\n  }\n\n  function updateLineDisplay() {\n    const points = document.querySelectorAll(\".number-point\");\n\n    points.forEach(point => {\n      point.classList.remove(\"start-selected\", \"end-selected\", \"highlight-between\");\n\n      const oldCounter = point.querySelector(\".counter\");\n      if (oldCounter) oldCounter.remove();\n    });\n\n    if (startNumber !== null) {\n      const startPoint = document.querySelector(`.number-point[data-number=\"${startNumber}\"]`);\n      if (startPoint) {\n        startPoint.classList.add(\"start-selected\");\n\n        const startCounter = document.createElement(\"div\");\n        startCounter.className = \"counter start-counter\";\n        startCounter.textContent = \"Start\";\n        startPoint.appendChild(startCounter);\n      }\n    }\n\n    if (endNumber !== null) {\n      const endPoint = document.querySelector(`.number-point[data-number=\"${endNumber}\"]`);\n      if (endPoint) {\n        endPoint.classList.add(\"end-selected\");\n\n        const endCounter = document.createElement(\"div\");\n        endCounter.className = \"counter end-counter\";\n        endCounter.textContent = \"End\";\n        endPoint.appendChild(endCounter);\n      }\n\n      const low = Math.min(startNumber, endNumber);\n      const high = Math.max(startNumber, endNumber);\n\n      points.forEach(point => {\n        const number = Number(point.dataset.number);\n        if (number >= low && number <= high) {\n          point.classList.add(\"highlight-between\");\n        }\n      });\n    }\n  }\n\n  function clearNumberLine() {\n    startNumber = null;\n    endNumber = null;\n    numberSentence.innerHTML = \"Click your start number.\";\n    updateLineDisplay();\n  }\n\n  function scrollToSelectedNumber(number) {\n    const selectedPoint = document.querySelector(`.number-point[data-number=\"${number}\"]`);\n    if (selectedPoint) {\n      selectedPoint.scrollIntoView({\n        behavior: \"smooth\",\n        inline: \"center\",\n        block: \"nearest\"\n      });\n    }\n  }\n\n  lineRange.addEventListener(\"change\", buildNumberLine);\n\n  buildNumberLine();\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-13025","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13025","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=13025"}],"version-history":[{"count":4,"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13025\/revisions"}],"predecessor-version":[{"id":13029,"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13025\/revisions\/13029"}],"wp:attachment":[{"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=13025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}