{"id":13033,"date":"2026-05-08T06:18:22","date_gmt":"2026-05-08T06:18:22","guid":{"rendered":"https:\/\/www.llanedeyrnprimary.co.uk\/?page_id=13033"},"modified":"2026-05-08T06:18:42","modified_gmt":"2026-05-08T06:18:42","slug":"times-tables","status":"publish","type":"page","link":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/times-tables\/","title":{"rendered":"Times Tables"},"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-times-trainer\">\n  <h2>Times Tables Trainer<\/h2>\n\n  <p class=\"intro\">\n    Choose a times table. Learn the facts, practise them, then try the challenge.\n  <\/p>\n\n  <div class=\"section-card\">\n    <h3>1. Choose your times table<\/h3>\n    <div id=\"tableButtons\" class=\"table-buttons\"><\/div>\n  <\/div>\n\n  <div class=\"section-card\">\n    <h3>2. Choose what you want to do<\/h3>\n    <div class=\"mode-buttons\">\n      <button type=\"button\" onclick=\"showLearnMode()\">Learn<\/button>\n      <button type=\"button\" onclick=\"startPractiseMode()\">Practise<\/button>\n      <button type=\"button\" onclick=\"startChallengeMode()\">Challenge<\/button>\n    <\/div>\n  <\/div>\n\n  <div id=\"mainArea\" class=\"main-area\">\n    <div class=\"welcome-box\">\n      Choose a times table to begin.\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .llanedeyrn-times-trainer {\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-times-trainer h2 {\n    color: #002060;\n    font-size: 34px;\n    margin-bottom: 10px;\n  }\n\n  .llanedeyrn-times-trainer h3 {\n    color: #002060;\n    font-size: 23px;\n    margin: 0 0 14px;\n  }\n\n  .llanedeyrn-times-trainer .intro {\n    font-size: 18px;\n    color: #333333;\n    margin-bottom: 20px;\n  }\n\n  .section-card {\n    margin: 18px auto;\n    padding: 18px;\n    background: #f7f9ff;\n    border-radius: 16px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  }\n\n  .table-buttons,\n  .mode-buttons,\n  .answer-buttons,\n  .tool-buttons {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 10px;\n  }\n\n  .table-buttons button,\n  .mode-buttons button,\n  .answer-buttons button,\n  .tool-buttons button,\n  .check-button {\n    background: #002060;\n    color: #ffffff;\n    border: none;\n    border-radius: 12px;\n    padding: 12px 16px;\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n  }\n\n  .table-buttons button:hover,\n  .mode-buttons button:hover,\n  .answer-buttons button:hover,\n  .tool-buttons button:hover,\n  .check-button:hover {\n    background: #8b296f;\n  }\n\n  .table-buttons button.selected-table {\n    background: #8b296f;\n    box-shadow: 0 0 0 3px #002060 inset;\n  }\n\n  .main-area {\n    margin-top: 22px;\n  }\n\n  .welcome-box,\n  .feedback-box,\n  .question-box,\n  .score-box {\n    max-width: 760px;\n    margin: 16px auto;\n    padding: 18px;\n    border-radius: 16px;\n    font-size: 22px;\n    font-weight: bold;\n    line-height: 1.5;\n  }\n\n  .welcome-box {\n    background: #f4eef5;\n    border: 3px solid #8b296f;\n    color: #002060;\n  }\n\n  .question-box {\n    background: #eef4ff;\n    border: 3px solid #002060;\n    color: #002060;\n  }\n\n  .feedback-box {\n    background: #f4eef5;\n    border: 3px solid #8b296f;\n    color: #002060;\n  }\n\n  .score-box {\n    background: #eef4ff;\n    border: 3px solid #002060;\n    color: #002060;\n  }\n\n  .learn-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n    margin: 20px auto;\n  }\n\n  .fact-card {\n    padding: 16px;\n    background: #ffffff;\n    border: 3px solid #002060;\n    border-radius: 14px;\n    color: #002060;\n    font-size: 21px;\n    font-weight: bold;\n  }\n\n  .fact-card small {\n    display: block;\n    margin-top: 8px;\n    color: #8b296f;\n    font-size: 16px;\n  }\n\n  .skip-count-box {\n    max-width: 850px;\n    margin: 18px auto;\n    padding: 18px;\n    background: #f4eef5;\n    border: 3px solid #8b296f;\n    border-radius: 16px;\n    color: #002060;\n    font-size: 20px;\n    font-weight: bold;\n    line-height: 1.6;\n  }\n\n  .answer-input {\n    width: 130px;\n    padding: 12px;\n    margin: 10px;\n    font-size: 24px;\n    font-weight: bold;\n    text-align: center;\n    border: 3px solid #8b296f;\n    border-radius: 12px;\n    color: #002060;\n  }\n\n  .stars {\n    font-size: 30px;\n    letter-spacing: 4px;\n    margin-top: 8px;\n  }\n\n  .dot-support {\n    max-width: 850px;\n    margin: 18px auto;\n    padding: 18px;\n    background: #ffffff;\n    border: 3px dashed #8b296f;\n    border-radius: 16px;\n  }\n\n  .dot-title {\n    color: #002060;\n    font-size: 20px;\n    font-weight: bold;\n    margin-bottom: 14px;\n  }\n\n  .dot-groups {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 14px;\n  }\n\n  .dot-group {\n    padding: 10px;\n    border-radius: 12px;\n    background: #eef4ff;\n    border: 2px solid #002060;\n  }\n\n  .dot {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    background: #8b296f;\n    border-radius: 50%;\n    margin: 3px;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  @media (max-width: 700px) {\n    .llanedeyrn-times-trainer {\n      padding: 16px;\n    }\n\n    .llanedeyrn-times-trainer h2 {\n      font-size: 28px;\n    }\n\n    .llanedeyrn-times-trainer h3 {\n      font-size: 20px;\n    }\n\n    .table-buttons button,\n    .mode-buttons button,\n    .answer-buttons button,\n    .tool-buttons button,\n    .check-button {\n      font-size: 16px;\n      padding: 10px 12px;\n    }\n\n    .welcome-box,\n    .feedback-box,\n    .question-box,\n    .score-box {\n      font-size: 19px;\n    }\n\n    .fact-card {\n      font-size: 18px;\n    }\n\n    .answer-input {\n      width: 110px;\n      font-size: 22px;\n    }\n\n    .dot {\n      width: 13px;\n      height: 13px;\n    }\n  }\n<\/style>\n\n<script>\n  let selectedTable = 2;\n  let currentMode = \"\";\n  let questionNumber = 0;\n  let score = 0;\n  let currentQuestion = null;\n  let totalQuestions = 10;\n  let hasAnsweredCurrentQuestion = false;\n\n  const tableButtons = document.getElementById(\"tableButtons\");\n  const mainArea = document.getElementById(\"mainArea\");\n\n  function buildTableButtons() {\n    tableButtons.innerHTML = \"\";\n\n    for (let i = 2; i <= 12; i++) {\n      const button = document.createElement(\"button\");\n      button.type = \"button\";\n      button.textContent = i + \"\u00d7\";\n      button.dataset.table = i;\n\n      if (i === selectedTable) {\n        button.classList.add(\"selected-table\");\n      }\n\n      button.addEventListener(\"click\", function () {\n        selectedTable = i;\n        updateSelectedTableButton();\n        showLearnMode();\n      });\n\n      tableButtons.appendChild(button);\n    }\n  }\n\n  function updateSelectedTableButton() {\n    const buttons = document.querySelectorAll(\"#tableButtons button\");\n\n    buttons.forEach(button => {\n      button.classList.remove(\"selected-table\");\n\n      if (Number(button.dataset.table) === selectedTable) {\n        button.classList.add(\"selected-table\");\n      }\n    });\n  }\n\n  function showLearnMode() {\n    currentMode = \"learn\";\n\n    let factsHtml = \"\";\n    let skipNumbers = [];\n\n    for (let i = 1; i <= 12; i++) {\n      const answer = i * selectedTable;\n      skipNumbers.push(answer);\n\n      factsHtml += `\n        <div class=\"fact-card\">\n          ${i} \u00d7 ${selectedTable} = ${answer}\n          <small>${answer} \u00f7 ${selectedTable} = ${i}<\/small>\n        <\/div>\n      `;\n    }\n\n    mainArea.innerHTML = `\n      <div class=\"welcome-box\">\n        Learn the ${selectedTable} times table.\n      <\/div>\n\n      <div class=\"skip-count-box\">\n        Count in ${selectedTable}s:<br>\n        ${skipNumbers.join(\", \")}\n      <\/div>\n\n      <div class=\"learn-grid\">\n        ${factsHtml}\n      <\/div>\n\n      <div class=\"tool-buttons\">\n        <button type=\"button\" onclick=\"startPractiseMode()\">Practise this table<\/button>\n        <button type=\"button\" onclick=\"startChallengeMode()\">Try the challenge<\/button>\n      <\/div>\n    `;\n  }\n\n  function startPractiseMode() {\n    currentMode = \"practise\";\n    questionNumber = 0;\n    score = 0;\n    totalQuestions = 10;\n    hasAnsweredCurrentQuestion = false;\n    showNextQuestion();\n  }\n\n  function startChallengeMode() {\n    currentMode = \"challenge\";\n    questionNumber = 0;\n    score = 0;\n    totalQuestions = 12;\n    hasAnsweredCurrentQuestion = false;\n    showNextQuestion();\n  }\n\n  function createQuestion() {\n    const multiplier = Math.floor(Math.random() * 12) + 1;\n    const questionType = Math.floor(Math.random() * 3);\n    const answer = multiplier * selectedTable;\n\n    if (questionType === 0) {\n      return {\n        text: multiplier + \" \u00d7 \" + selectedTable + \" = ?\",\n        answer: answer,\n        helpText: multiplier + \" groups of \" + selectedTable + \" makes \" + answer + \".\",\n        groups: multiplier,\n        groupSize: selectedTable,\n        fullFact: multiplier + \" \u00d7 \" + selectedTable + \" = \" + answer\n      };\n    }\n\n    if (questionType === 1) {\n      return {\n        text: answer + \" \u00f7 \" + selectedTable + \" = ?\",\n        answer: multiplier,\n        helpText: answer + \" shared into groups of \" + selectedTable + \" makes \" + multiplier + \" groups.\",\n        groups: multiplier,\n        groupSize: selectedTable,\n        fullFact: answer + \" \u00f7 \" + selectedTable + \" = \" + multiplier\n      };\n    }\n\n    return {\n      text: \"? \u00d7 \" + selectedTable + \" = \" + answer,\n      answer: multiplier,\n      helpText: multiplier + \" groups of \" + selectedTable + \" makes \" + answer + \".\",\n      groups: multiplier,\n      groupSize: selectedTable,\n      fullFact: multiplier + \" \u00d7 \" + selectedTable + \" = \" + answer\n    };\n  }\n\n  function showNextQuestion() {\n    hasAnsweredCurrentQuestion = false;\n\n    if (questionNumber >= totalQuestions) {\n      showFinalScore();\n      return;\n    }\n\n    questionNumber++;\n    currentQuestion = createQuestion();\n\n    const modeTitle = currentMode === \"challenge\" ? \"Challenge Mode\" : \"Practise Mode\";\n\n    mainArea.innerHTML = `\n      <div class=\"score-box\">\n        ${modeTitle}<br>\n        Question ${questionNumber} of ${totalQuestions}<br>\n        <div class=\"stars\">${makeStars(score)}<\/div>\n      <\/div>\n\n      <div class=\"question-box\">\n        ${currentQuestion.text}\n      <\/div>\n\n      <div>\n        <input id=\"answerInput\" class=\"answer-input\" type=\"number\" inputmode=\"numeric\" aria-label=\"Answer\">\n        <button type=\"button\" class=\"check-button\" onclick=\"checkAnswer()\">Check<\/button>\n      <\/div>\n\n      <div class=\"tool-buttons\">\n        <button type=\"button\" onclick=\"showHelp()\">Show help<\/button>\n        <button type=\"button\" onclick=\"showLearnMode()\">Go back to learn<\/button>\n        <button type=\"button\" onclick=\"restartCurrentMode()\">Restart<\/button>\n      <\/div>\n\n      <div id=\"feedbackBox\" class=\"feedback-box hidden\"><\/div>\n      <div id=\"helpBox\" class=\"dot-support hidden\"><\/div>\n    `;\n\n    setTimeout(function () {\n      const input = document.getElementById(\"answerInput\");\n      if (input) input.focus();\n    }, 50);\n  }\n\n  function checkAnswer() {\n    if (hasAnsweredCurrentQuestion) {\n      showNextQuestion();\n      return;\n    }\n\n    const input = document.getElementById(\"answerInput\");\n    const feedbackBox = document.getElementById(\"feedbackBox\");\n\n    const userAnswer = Number(input.value);\n\n    if (input.value === \"\") {\n      feedbackBox.classList.remove(\"hidden\");\n      feedbackBox.innerHTML = \"Type your answer first.\";\n      return;\n    }\n\n    hasAnsweredCurrentQuestion = true;\n\n    if (userAnswer === currentQuestion.answer) {\n      score++;\n      feedbackBox.classList.remove(\"hidden\");\n      feedbackBox.innerHTML = `\n        Yes, that is correct.<br>\n        ${currentQuestion.fullFact}\n        <br><br>\n        <button type=\"button\" class=\"check-button\" onclick=\"showNextQuestion()\">Next question<\/button>\n      `;\n    } else {\n      feedbackBox.classList.remove(\"hidden\");\n      feedbackBox.innerHTML = `\n        Good try.<br>\n        The answer is ${currentQuestion.answer}.<br>\n        ${currentQuestion.helpText}\n        <br><br>\n        <button type=\"button\" class=\"check-button\" onclick=\"showHelp()\">Show me<\/button>\n        <button type=\"button\" class=\"check-button\" onclick=\"showNextQuestion()\">Next question<\/button>\n      `;\n    }\n  }\n\n  function showHelp() {\n    const helpBox = document.getElementById(\"helpBox\");\n    if (!helpBox || !currentQuestion) return;\n\n    let groupsHtml = \"\";\n\n    for (let g = 1; g <= currentQuestion.groups; g++) {\n      let dotsHtml = \"\";\n\n      for (let d = 1; d <= currentQuestion.groupSize; d++) {\n        dotsHtml += `<span class=\"dot\"><\/span>`;\n      }\n\n      groupsHtml += `<div class=\"dot-group\">${dotsHtml}<\/div>`;\n    }\n\n    let skipCount = [];\n    for (let i = 1; i <= 12; i++) {\n      skipCount.push(i * selectedTable);\n    }\n\n    helpBox.classList.remove(\"hidden\");\n    helpBox.innerHTML = `\n      <div class=\"dot-title\">\n        ${currentQuestion.helpText}\n      <\/div>\n\n      <div class=\"dot-groups\">\n        ${groupsHtml}\n      <\/div>\n\n      <div class=\"skip-count-box\">\n        Count in ${selectedTable}s:<br>\n        ${skipCount.join(\", \")}\n      <\/div>\n    `;\n  }\n\n  function makeStars(number) {\n    let stars = \"\";\n\n    for (let i = 0; i < number; i++) {\n      stars += \"\u2605\";\n    }\n\n    if (stars === \"\") {\n      stars = \"No stars yet\";\n    }\n\n    return stars;\n  }\n\n  function showFinalScore() {\n    let message = \"\";\n\n    if (score === totalQuestions) {\n      message = \"Amazing effort. You got them all correct.\";\n    } else if (score >= Math.ceil(totalQuestions * 0.75)) {\n      message = \"Great work. You know lots of these facts.\";\n    } else if (score >= Math.ceil(totalQuestions * 0.5)) {\n      message = \"Good effort. Keep practising and you will get quicker.\";\n    } else {\n      message = \"You completed the round. Go back to Learn Mode and practise again.\";\n    }\n\n    mainArea.innerHTML = `\n      <div class=\"score-box\">\n        Finished<br>\n        You got ${score} out of ${totalQuestions}.<br>\n        <div class=\"stars\">${makeStars(score)}<\/div>\n      <\/div>\n\n      <div class=\"feedback-box\">\n        ${message}\n      <\/div>\n\n      <div class=\"tool-buttons\">\n        <button type=\"button\" onclick=\"showLearnMode()\">Learn again<\/button>\n        <button type=\"button\" onclick=\"startPractiseMode()\">Practise again<\/button>\n        <button type=\"button\" onclick=\"startChallengeMode()\">Try challenge again<\/button>\n      <\/div>\n    `;\n  }\n\n  function restartCurrentMode() {\n    if (currentMode === \"challenge\") {\n      startChallengeMode();\n    } else {\n      startPractiseMode();\n    }\n  }\n\n  buildTableButtons();\n  showLearnMode();\n\n  document.addEventListener(\"keydown\", function (event) {\n    if (event.key === \"Enter\") {\n      const input = document.getElementById(\"answerInput\");\n      if (input && document.activeElement === input) {\n        checkAnswer();\n      }\n    }\n  });\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-13033","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13033","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=13033"}],"version-history":[{"count":3,"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13033\/revisions"}],"predecessor-version":[{"id":13036,"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/13033\/revisions\/13036"}],"wp:attachment":[{"href":"https:\/\/www.llanedeyrnprimary.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=13033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}