{"id":835,"date":"2026-08-17T08:53:02","date_gmt":"2026-08-17T08:53:02","guid":{"rendered":"https:\/\/mindful.com.hk\/root\/?page_id=835"},"modified":"2026-08-31T11:04:38","modified_gmt":"2026-08-31T11:04:38","slug":"focus-test","status":"publish","type":"page","link":"https:\/\/mindful.com.hk\/zh\/focus-test\/","title":{"rendered":"\u5c08\u6ce8\u529b\u6e2c\u8a66"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-51b2b12\" data-block-id=\"51b2b12\"><style>.stk-51b2b12 .stk--block-align-51b2b12{align-items:center !important;}.stk-51b2b12 {min-height:var(--stk--preset--block-height--none, 0px) !important;padding-top:100px !important;padding-bottom:0px !important;margin-bottom:0px !important;}.stk-51b2b12-column{--stk-column-gap:0px !important;row-gap:0px !important;}@media screen and (max-width:999px){.stk-51b2b12 {padding-top:250px !important;padding-bottom:150px !important;}}@media screen and (max-width:689px){.stk-51b2b12 {padding-top:120px !important;padding-bottom:0px !important;}}<\/style><div class=\"stk-row stk-inner-blocks stk--block-align-51b2b12 stk-block-content stk-content-align stk-51b2b12-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-3a43e6b\" data-v=\"4\" data-block-id=\"3a43e6b\"><style>.stk-3a43e6b-container{margin-top:var(--stk--preset--spacing--none, 0px) !important;margin-right:var(--stk--preset--spacing--none, 0px) !important;margin-bottom:var(--stk--preset--spacing--none, 0px) !important;margin-left:var(--stk--preset--spacing--none, 0px) !important;min-height:var(--stk--preset--block-height--none, 0px) !important;}.stk-3a43e6b {min-height:var(--stk--preset--block-height--none, 0px) !important;margin-top:-50px !important;margin-bottom:var(--stk--preset--spacing--none, 0px) !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-3a43e6b-container stk--no-background stk--no-padding\"><div class=\"has-text-align-center-mobile stk-block-content stk-inner-blocks stk-3a43e6b-inner-blocks\">\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-bb24d70\" data-block-id=\"bb24d70\"><style>.stk-bb24d70 {margin-bottom:-22px !important;}.stk-bb24d70 .stk-img-wrapper{width:18% !important;height:200px !important;}.stk-bb24d70 .stk-img-wrapper img{border-radius:var(--stk--preset--border-radius--none, 0px) !important;}@media screen and (max-width:999px){.stk-bb24d70 .stk-img-wrapper{width:45% !important;height:200px !important;}}@media screen and (max-width:689px){.stk-bb24d70 {margin-top:-100px !important;}.stk-bb24d70 .stk-img-wrapper{width:50% !important;height:250px !important;}.stk-bb24d70 .stk-img-wrapper img{object-fit:contain !important;}}<\/style><figure><span class=\"stk-img-wrapper stk-image--shape-stretch\"><img fetchpriority=\"high\" decoding=\"async\" class=\"stk-img wp-image-19\" src=\"https:\/\/mindful.com.hk\/root\/wp-content\/uploads\/2026\/08\/program-multiskills-VHzyIx9x.png\" width=\"1024\" height=\"1024\" srcset=\"https:\/\/mindful.com.hk\/wp-content\/uploads\/2026\/08\/program-multiskills-VHzyIx9x.png 1024w, https:\/\/mindful.com.hk\/wp-content\/uploads\/2026\/08\/program-multiskills-VHzyIx9x-300x300.png 300w, https:\/\/mindful.com.hk\/wp-content\/uploads\/2026\/08\/program-multiskills-VHzyIx9x-150x150.png 150w, https:\/\/mindful.com.hk\/wp-content\/uploads\/2026\/08\/program-multiskills-VHzyIx9x-768x768.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/span><\/figure><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-4a27a39\" id=\"em-em-em-em-focus-test-em-em-em-em\" data-block-id=\"4a27a39\"><style>.stk-4a27a39 .stk-block-heading__bottom-line{width:75px !important;margin-left:auto !important;margin-right:auto !important;}.stk-4a27a39 {border-top-width:0px !important;border-right-width:0px !important;border-bottom-width:1px !important;border-left-width:0px !important;margin-bottom:0px !important;}.stk-4a27a39 .stk-block-heading__text{font-size:var(--stk--preset--font-size--xx-large, 80px) !important;color:#753b00 !important;}@media screen and (max-width:999px){.stk-4a27a39 .stk-block-heading__text{font-size:var(--stk--preset--font-size--xx-large, 80px) !important;}}<\/style><h1 class=\"stk-block-heading__text has-text-color has-text-align-center\"><em><em><em><em>Focus Test<\/em><\/em><\/em><\/em><\/h1><\/div>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-379fd01 is-style-bar\" data-block-id=\"379fd01\"><style>.stk-379fd01 hr.stk-block-divider__hr{background:#0f0e17 !important;width:16% !important;}.stk-379fd01 {border-top-left-radius:var(--stk--preset--border-radius--full, 9999px) !important;border-top-right-radius:var(--stk--preset--border-radius--full, 9999px) !important;border-bottom-right-radius:var(--stk--preset--border-radius--full, 9999px) !important;border-bottom-left-radius:var(--stk--preset--border-radius--full, 9999px) !important;overflow:hidden !important;margin-bottom:13px !important;}<\/style><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-10c1b62\" data-block-id=\"10c1b62\"><style>.stk-10c1b62 {margin-bottom:0px !important;}.stk-10c1b62 .stk-block-text__text{font-size:var(--stk--preset--font-size--medium, 20px) !important;color:#753b00 !important;}@media screen and (max-width:999px){.stk-10c1b62 .stk-block-text__text{font-size:var(--stk--preset--font-size--medium, 20px) !important;}}<\/style><p class=\"stk-block-text__text has-text-color has-text-align-center\">A fun Schulte Grid game to test and train young children&#8217;s focus and reaction speed<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-spacer stk-block-spacer stk--no-padding stk-block stk-30839de\" data-block-id=\"30839de\"><style>.stk-30839de {height:0px !important;}<\/style><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-6ceb520\" data-block-id=\"6ceb520\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-6ceb520-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-b207bf4\" data-v=\"4\" data-block-id=\"b207bf4\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-b207bf4-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-b207bf4-inner-blocks\">\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- \u52a0\u5165\u9583\u720d\u52d5\u756b\u6a23\u5f0f -->\n<style>\n  @keyframes shake-red {\n    0%, 100% { transform: translateX(0); }\n    20%, 60% { transform: translateX(-3px); background-color: #ef4444; color: #ffffff; border-color: #dc2626; }\n    40%, 80% { transform: translateX(3px); background-color: #ef4444; color: #ffffff; border-color: #dc2626; }\n  }\n  .animate-error {\n    animation: shake-red 0.3s ease-in-out;\n  }\n<\/style>\n\n<section class=\"py-6 lg:py-8\">\n  <div class=\"container mx-auto px-4\">\n    <section class=\"mt-2 mb-2\">\n      <!-- Section Header -->\n      <div class=\"text-center mb-3\">\n        <h2 class=\"text-lg md:text-xl font-bold\" style=\"color: rgb(30, 58, 95);\">Attention Test for Children Aged 3\u20136<\/h2>\n        <p class=\"mt-0.5 text-xs text-slate-500 max-w-xl mx-auto\">Schulte Table Test: Tap numbers in order starting from 1 to test reaction speed!<\/p>\n      <\/div>\n\n      <!-- Main Container -->\n      <div class=\"grid gap-3 lg:grid-cols-2 max-w-3xl mx-auto items-stretch\">\n        \n        <!-- Interactive Game Card -->\n        <div class=\"rounded-xl bg-white border border-slate-200 p-3 shadow-sm flex flex-col justify-between h-full\">\n          \n          <!-- Controls Bar -->\n          <div class=\"flex items-center justify-between gap-2 mb-2\">\n            <div class=\"flex items-center gap-1.5\">\n              <label class=\"text-[11px] font-medium text-slate-700\">Difficulty:<\/label>\n              <select id=\"difficulty-select\" class=\"rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[11px] font-medium text-slate-700 focus:outline-none focus:ring-1 focus:ring-blue-500\/30\">\n                <option value=\"3\">3 \u00d7 3 (Beginner)<\/option>\n                <option value=\"4\">4 \u00d7 4 (Intermediate)<\/option>\n                <option value=\"5\">5 \u00d7 5 (Advanced)<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"rounded-full bg-blue-50 text-blue-600 px-2.5 py-0.5 text-[11px] font-semibold\">\n              Target <span id=\"target-number\" class=\"ml-1\">1<\/span>\n            <\/div>\n          <\/div>\n\n          <!-- Compact Numbers Grid -->\n          <div class=\"flex-1 flex items-center justify-center my-1\">\n            <div id=\"schulte-grid\" class=\"grid gap-1 rounded-lg border border-dashed border-slate-200 p-1.5 bg-slate-50\/50 w-full max-w-[280px]\">\n              <!-- Buttons dynamically generated by JavaScript -->\n            <\/div>\n          <\/div>\n\n          <!-- Footer Bar -->\n          <div class=\"flex items-center justify-between gap-2 mt-2\">\n            <div class=\"text-[11px] text-slate-600\">Time: <span id=\"timer-display\" class=\"text-blue-600 font-bold text-xs\">0.00<\/span>s<\/div>\n            <button id=\"restart-btn\" class=\"rounded-full bg-blue-600 text-white px-3 py-1 text-[11px] font-medium hover:bg-blue-700 transition\">Restart<\/button>\n          <\/div>\n\n        <\/div>\n\n        <!-- Reference Table Card -->\n        <div class=\"rounded-xl bg-white border border-slate-200 p-3 shadow-sm h-full flex flex-col justify-between\">\n          <div>\n            <h3 class=\"text-sm font-bold mb-2\" style=\"color: rgb(30, 58, 95);\">Suggested Time Range<\/h3>\n            \n            <!-- Ages 3\u20135 Table -->\n            <div class=\"mb-2\">\n              <div class=\"flex items-center gap-1.5 mb-0.5\">\n                <span class=\"inline-block h-1.5 w-1.5 rounded-full bg-pink-500\"><\/span>\n                <span class=\"text-xs font-semibold text-pink-600\">Ages 3\u20135<\/span>\n              <\/div>\n              <table class=\"w-full text-[11px]\">\n                <thead class=\"text-slate-400\">\n                  <tr>\n                    <th class=\"text-left font-normal py-0.5\">Grid<\/th>\n                    <th class=\"text-left font-normal py-0.5\">Good<\/th>\n                    <th class=\"text-left font-normal py-0.5\">Acceptable<\/th>\n                    <th class=\"text-right font-normal py-0.5\">Observation<\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody class=\"divide-y divide-slate-100\">\n                  <tr><td class=\"py-0.5 font-medium\">3\u00d73<\/td><td class=\"py-0.5\">~12s<\/td><td class=\"py-0.5\">~20s<\/td><td class=\"py-0.5 text-right text-slate-400 italic\">&gt;20s \/ prompts<\/td><\/tr>\n                  <tr><td class=\"py-0.5 font-medium\">4\u00d74<\/td><td class=\"py-0.5\">~20s<\/td><td class=\"py-0.5\">~30s<\/td><td class=\"py-0.5 text-right text-slate-400 italic\">&gt;30s \/ mistakes<\/td><\/tr>\n                  <tr><td class=\"py-0.5 font-medium\">5\u00d75<\/td><td class=\"py-0.5\">~45s<\/td><td class=\"py-0.5\">~58s<\/td><td class=\"py-0.5 text-right text-slate-400 italic\">&gt;58s \/ incomplete<\/td><\/tr>\n                <\/tbody>\n              <\/table>\n            <\/div>\n\n            <!-- Age 6 Table -->\n            <div class=\"mb-2\">\n              <div class=\"flex items-center gap-1.5 mb-0.5\">\n                <span class=\"inline-block h-1.5 w-1.5 rounded-full bg-teal-500\"><\/span>\n                <span class=\"text-xs font-semibold text-teal-600\">Age 6<\/span>\n              <\/div>\n              <table class=\"w-full text-[11px]\">\n                <thead class=\"text-slate-400\">\n                  <tr>\n                    <th class=\"text-left font-normal py-0.5\">Grid<\/th>\n                    <th class=\"text-left font-normal py-0.5\">Good<\/th>\n                    <th class=\"text-left font-normal py-0.5\">Acceptable<\/th>\n                    <th class=\"text-right font-normal py-0.5\">Observation<\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody class=\"divide-y divide-slate-100\">\n                  <tr><td class=\"py-0.5 font-medium\">3\u00d73<\/td><td class=\"py-0.5\">~10s<\/td><td class=\"py-0.5\">~15s<\/td><td class=\"py-0.5 text-right text-slate-400 italic\">&gt;15s \/ prompts<\/td><\/tr>\n                  <tr><td class=\"py-0.5 font-medium\">4\u00d74<\/td><td class=\"py-0.5\">~18s<\/td><td class=\"py-0.5\">~25s<\/td><td class=\"py-0.5 text-right text-slate-400 italic\">&gt;25s \/ mistakes<\/td><\/tr>\n                  <tr><td class=\"py-0.5 font-medium\">5\u00d75<\/td><td class=\"py-0.5\">~34s<\/td><td class=\"py-0.5\">~45s<\/td><td class=\"py-0.5 text-right text-slate-400 italic\">&gt;45s \/ incomplete<\/td><\/tr>\n                <\/tbody>\n              <\/table>\n            <\/div>\n          <\/div>\n\n          <p class=\"text-[10px] text-slate-400 italic leading-tight mt-1\">Note: Reference values only. Performance varies based on fatigue and environment.<\/p>\n        <\/div>\n\n      <\/div>\n    <\/section>\n  <\/div>\n<\/section>\n\n<script>\n  (function() {\n    let size = 3;\n    let currentTarget = 1;\n    let startTime = null;\n    let timerInterval = null;\n    let isRunning = false;\n\n    const gridEl = document.getElementById('schulte-grid');\n    const targetEl = document.getElementById('target-number');\n    const timerEl = document.getElementById('timer-display');\n    const difficultySelect = document.getElementById('difficulty-select');\n    const restartBtn = document.getElementById('restart-btn');\n\n    function initGame() {\n      size = parseInt(difficultySelect.value);\n      currentTarget = 1;\n      targetEl.textContent = currentTarget;\n      stopTimer();\n      timerEl.textContent = \"0.00\";\n      isRunning = false;\n\n      \/\/ Update Grid Columns dynamically\n      gridEl.style.gridTemplateColumns = `repeat(${size}, minmax(0, 1fr))`;\n\n      \/\/ Generate shuffled array\n      const total = size * size;\n      const numbers = Array.from({ length: total }, (_, i) => i + 1);\n      for (let i = numbers.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [numbers[i], numbers[j]] = [numbers[j], numbers[i]];\n      }\n\n      \/\/ Populate Grid\n      gridEl.innerHTML = '';\n      numbers.forEach(num => {\n        const btn = document.createElement('button');\n        btn.textContent = num;\n        btn.className = 'aspect-square rounded border border-slate-200 bg-white font-bold select-none flex items-center justify-center text-slate-800 hover:border-blue-500 hover:shadow-sm transition-all duration-150 active:scale-95';\n        \n        \/\/ Dynamic font sizing based on grid resolution\n        if (size === 3) btn.classList.add('text-base');\n        else if (size === 4) btn.classList.add('text-sm');\n        else btn.classList.add('text-xs');\n\n        btn.addEventListener('click', () => handleTap(num, btn));\n        gridEl.appendChild(btn);\n      });\n    }\n\n    function startTimer() {\n      isRunning = true;\n      startTime = Date.now();\n      timerInterval = setInterval(() => {\n        const elapsed = (Date.now() - startTime) \/ 1000;\n        timerEl.textContent = elapsed.toFixed(2);\n      }, 30);\n    }\n\n    function stopTimer() {\n      if (timerInterval) clearInterval(timerInterval);\n      timerInterval = null;\n    }\n\n    function handleTap(num, btn) {\n      if (btn.disabled) return;\n\n      if (num === currentTarget) {\n        if (!isRunning) startTimer();\n\n        btn.classList.remove('bg-white', 'text-slate-800', 'hover:border-blue-500', 'active:scale-95');\n        btn.classList.add('!bg-emerald-500', '!text-white', '!border-emerald-600', 'cursor-not-allowed', 'opacity-80');\n        btn.disabled = true;\n\n        currentTarget++;\n        const total = size * size;\n\n        if (currentTarget > total) {\n          stopTimer();\n          targetEl.textContent = 'Done!';\n        } else {\n          targetEl.textContent = currentTarget;\n        }\n      } else {\n\n        btn.classList.add('animate-error');\n        \n        \n        setTimeout(() => {\n          btn.classList.remove('animate-error');\n        }, 300);\n      }\n    }\n\n    difficultySelect.addEventListener('change', initGame);\n    restartBtn.addEventListener('click', initGame);\n\n    \/\/ Initial setup\n    initGame();\n  })();\n<\/script>\n<\/div><\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Focus Test A fun Schulte Grid game to test and train young children&#8217;s focus and reaction speed Attention Test for Children Aged 3\u20136 Schulte Table Test: Tap numbers in order starting from 1 to test reaction speed! Difficulty: 3 \u00d7 3 (Beginner)4 \u00d7 4 (Intermediate)5 \u00d7 5 (Advanced) Target 1 Time: 0.00s Restart Suggested Time [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-835","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"acf":[],"_links":{"self":[{"href":"https:\/\/mindful.com.hk\/zh\/wp-json\/wp\/v2\/pages\/835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindful.com.hk\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mindful.com.hk\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mindful.com.hk\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mindful.com.hk\/zh\/wp-json\/wp\/v2\/comments?post=835"}],"version-history":[{"count":46,"href":"https:\/\/mindful.com.hk\/zh\/wp-json\/wp\/v2\/pages\/835\/revisions"}],"predecessor-version":[{"id":1258,"href":"https:\/\/mindful.com.hk\/zh\/wp-json\/wp\/v2\/pages\/835\/revisions\/1258"}],"wp:attachment":[{"href":"https:\/\/mindful.com.hk\/zh\/wp-json\/wp\/v2\/media?parent=835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}