{"id":8749,"date":"2024-09-12T12:53:54","date_gmt":"2024-09-12T12:53:54","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8749"},"modified":"2024-09-12T13:10:43","modified_gmt":"2024-09-12T13:10:43","slug":"ten-frame","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/ten-frame","title":{"rendered":"Ten Frame Teaching Tool"},"content":{"rendered":"\n<p>Ready to practice counting on a ten-frame? Try this interactive ten-frame teaching tool\u2014completely free for teachers! Hit play to display a random number of counters, and challenge your students to count and respond. The best part? The tool offers instant feedback for wrong answers. It&#8217;s perfect for teaching counting from 1 to 10, building a sense of quantity, and even mastering subitizing skills. Project this virtual ten frame tool in your classroom and turn counting into a fun learning adventure!<\/p><div class=\"signup-signin-buttons\"><div class=\"signup-button-left\"><a href=\"https:\/\/www.splashlearn.com\/parents\/register#!\/parent\/creation\">Parents, Sign Up for Free<\/a><\/div><div class=\"signin-button-right\"><a href=\"https:\/\/www.splashlearn.com\/teachers\/register\">Teachers, Use for Free<\/a><\/div><\/div>\n\n\n\n<style>\n        :root {\n            --dot-size: 60px; \/* Dot size *\/\n        }\n\n        .ten-frame-main-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            width: 100%;\n            max-width: 800px;\n            padding: 20px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);\n            border-radius: 10px;\n            background-color: #ffffff;\n            overflow: hidden;\n        }\n\n        .ten-frame-main-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n\n        .span-title1 {\n            margin-bottom: 20px;\n            text-align: center;\n            display: none; \/* Initially hidden *\/\n        }\n\n        .grid {\n            display: grid;\n            grid-template-columns: repeat(5, 60px);\n            grid-template-rows: repeat(2, 60px);\n            gap: 10px;\n            margin-bottom: 20px;\n        }\n\n        .cell {\n            width: 60px;\n            height: 60px;\n            border: 2px solid black;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            overflow: hidden;\n            position: relative;\n        }\n\n        .dot {\n            font-size: var(--dot-size);\n            color: #090a4a;\n            transform: translateY(-5%);\n            display: none; \/* Initially hidden *\/\n        }\n\n        .buttons {\n            display: grid;\n            grid-template-columns: repeat(5, 60px);\n            gap: 10px;\n            margin-top: 20px;\n            justify-content: center;\n        }\n\n        .btn {\n            width: 60px;\n            height: 60px;\n            font-size: 20px;\n            background-color: #f0f0f0;\n            border: 2px solid black;\n            cursor: pointer;\n            border-radius: 8px;\n            text-align: center;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .random-btn, .reset-btn {\n            padding: 10px 20px;\n            font-size: 18px;\n            margin-bottom: 20px;\n            cursor: pointer;\n            display: block; \/* Ensure it's visible *\/\n        }\n\n        .message {\n            margin-bottom: 20px;\n            font-size: 18px;\n            font-weight: bold;\n            display: none;\n            text-align: center;\n        }\n\n        .buttons-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            margin-top: 30px; \/* Margin from grid to number buttons *\/\n            margin-bottom: 15px;\n        }\n\n        \/* Media query for smaller screens *\/\n        @media (max-width: 768px) {\n            .ten-frame-main-container {\n                width: 100%;\n                max-width: 100%;\n                padding: 10px;\n            }\n\n            .grid {\n                grid-template-columns: repeat(5, 48px); \/* Smaller grid cells *\/\n                grid-template-rows: repeat(2, 48px);\n                gap: 8px;\n            }\n\n            .cell {\n                width: 48px;\n                height: 48px;\n            }\n\n            .dot {\n                font-size: 50px; \/* Smaller dot size *\/\n            }\n\n            .btn {\n                width: 48px;\n                height: 48px;\n                font-size: 16px; \/* Adjust button font size *\/\n            }\n\n            .random-btn, .reset-btn {\n                font-size: 16px;\n                padding: 8px 16px; \/* Smaller buttons *\/\n            }\n\n            .buttons {\n                grid-template-columns: repeat(5, 50px);\n            }\n        }\n    <\/style>\n\n    <div class=\"ten-frame-main-container\">\n        <span class=\"span-title1\" id=\"titleText\">How many counters are there?<\/span>\n        <div class=\"message\" id=\"message\"><\/div>\n        <div class=\"grid\" id=\"grid\"><\/div>\n        <button class=\"random-btn\" id=\"random\">Play<\/button>\n        <div class=\"buttons-container\">\n            <div class=\"buttons\" id=\"numberButtons\" style=\"display: none;\">\n                <!-- Number buttons -->\n                <button class=\"btn\" onclick=\"checkAnswer(1)\">1<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(2)\">2<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(3)\">3<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(4)\">4<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(5)\">5<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(6)\">6<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(7)\">7<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(8)\">8<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(9)\">9<\/button>\n                <button class=\"btn\" onclick=\"checkAnswer(10)\">10<\/button>\n            <\/div>\n        <\/div>\n        <button class=\"reset-btn\" id=\"reset\" style=\"display: none;\">Reset<\/button>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use a ten frame to visualize quantity and practice counting numbers 1 to 10.<\/p>\n","protected":false},"author":2,"featured_media":8753,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8749","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/09\/ten-frame.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/comments?post=8749"}],"version-history":[{"count":2,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8749\/revisions"}],"predecessor-version":[{"id":8757,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8749\/revisions\/8757"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8753"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}