{"id":8657,"date":"2024-07-01T11:59:30","date_gmt":"2024-07-01T11:59:30","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8657"},"modified":"2024-07-01T12:07:49","modified_gmt":"2024-07-01T12:07:49","slug":"color-counters","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/color-counters","title":{"rendered":"Color Counters Teaching Tool"},"content":{"rendered":"\n<p>This interactive color counters teaching tool comes with colorful chips, digits 0-9, symbols (+, \u2212, \u00d7, \u00f7, =), a pencil, an eraser, and a CLEAR function\u2014a complete math canvas for your classroom! You can use math counters to teach tons of stuff\u2014counting, comparisons, modeling addition and subtraction, arrays and equal groups, sorting by color, and a lot more! Basically, this online counter tool will help students visualize, model, and manipulate math concepts with ease. Start now for free!<\/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        .cc-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n        }\n        .color-counters-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            overflow: hidden;\n        }\n\n        .color-counters-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n\n        .toolbar {\n            margin: 20px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n        .color-container,\n        .number-container,\n        .equation-container {\n            display: flex;\n            justify-content: center;\n            margin: 10px 0;\n        }\n        .color-btn,\n        .number-btn,\n        .equation-btn {\n            margin: 5px;\n            padding: 10px;\n            border: none;\n            cursor: pointer;\n            font-size: 22px;\n            font-weight: 700;\n            border-radius: 50%;\n            width: 40px;\n            height: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .button-container {\n            display: flex;\n            justify-content: center;\n            margin-top: 5px;\n            gap: 5px;\n        }\n        #grid {\n            display: grid;\n            grid-template-columns: repeat(15, 1fr);\n            grid-template-rows: repeat(9, 1fr);\n            width: 100%;\n            max-width: 750px;\n            aspect-ratio: 15 \/ 9;\n            position: relative;\n        }\n        .cell {\n            width: 100%;\n            height: 0;\n            padding-bottom: 100%;\n            border: 1px solid black;\n            background-color: transparent;\n            position: relative;\n            overflow: hidden; \/* Ensure elements don't overflow the cell *\/\n        }\n        .circle,\n        .draggable-number,\n        .draggable-equation {\n            width: 90%;\n            height: 90%;\n            position: absolute;\n            top: 5%;\n            left: 5%;\n            cursor: move;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 1.4em;\n            font-weight: 700;\n            transition: all 0.3s ease; \/* Smooth transition for swapping *\/\n            background-color: transparent; \/* Ensure transparent background *\/\n        }\n        .circle {\n            border-radius: 50%;\n        }\n        .transparent {\n            background-color: transparent !important;\n        }\n        #grid canvas {\n            position: absolute;\n            top: 0;\n            left: 0;\n            pointer-events: none;\n            width: 100%;\n            height: 100%;\n        }\n        @media (max-width: 768px) {\n            .color-btn,\n            .number-btn,\n            .equation-btn {\n                width: 25px;\n                height: 25px;\n                font-size: 18px;\n                padding: 6px;\n            }\n\n            .cc-container{\n                position: relative;\n                max-width: 360px;\n            }\n            #grid {\n                max-width: 600px;\n            }\n        }\n        @media (max-width: 480px) {\n            .color-btn,\n            .number-btn,\n            .equation-btn {\n                width: 22px;\n                height: 22px;\n                font-size: 12px;\n                padding: 4px;\n            }\n            #grid {\n                max-width: 300px;\n            }\n\n        .button-container {\n            margin-top: 20px;\n        }\n        }\n    <\/style>\n\n    <div class=\"color-counters-container\">\n        <div class=\"cc-container\">\n        <div class=\"toolbar\">\n            <div class=\"color-container\">\n                <button class=\"color-btn\" data-color=\"crimson\" style=\"background-color: crimson;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"royalblue\" style=\"background-color: royalblue;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"seagreen\" style=\"background-color: seagreen;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"darkkhaki\" style=\"background-color: darkkhaki;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"goldenrod\" style=\"background-color: goldenrod;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"rebeccapurple\" style=\"background-color: rebeccapurple;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"hotpink\" style=\"background-color: hotpink;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"peru\" style=\"background-color: peru;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"gray\" style=\"background-color: gray;\" draggable=\"true\"><\/button>\n                <button class=\"color-btn\" data-color=\"slateblue\" style=\"background-color: slateblue;\" draggable=\"true\"><\/button>\n            <\/div>\n            <div class=\"number-container\">\n                <button class=\"number-btn\" data-number=\"0\" draggable=\"true\">0<\/button>\n                <button class=\"number-btn\" data-number=\"1\" draggable=\"true\">1<\/button>\n                <button class=\"number-btn\" data-number=\"2\" draggable=\"true\">2<\/button>\n                <button class=\"number-btn\" data-number=\"3\" draggable=\"true\">3<\/button>\n                <button class=\"number-btn\" data-number=\"4\" draggable=\"true\">4<\/button>\n                <button class=\"number-btn\" data-number=\"5\" draggable=\"true\">5<\/button>\n                <button class=\"number-btn\" data-number=\"6\" draggable=\"true\">6<\/button>\n                <button class=\"number-btn\" data-number=\"7\" draggable=\"true\">7<\/button>\n                <button class=\"number-btn\" data-number=\"8\" draggable=\"true\">8<\/button>\n                <button class=\"number-btn\" data-number=\"9\" draggable=\"true\">9<\/button>\n            <\/div>\n            <div class=\"equation-container\">\n                <button class=\"equation-btn\" data-equation=\"+\" draggable=\"true\">+<\/button>\n                <button class=\"equation-btn\" data-equation=\"-\" draggable=\"true\">\u2212<\/button>\n                <button class=\"equation-btn\" data-equation=\"\u00d7\" draggable=\"true\">\u00d7<\/button>\n                <button class=\"equation-btn\" data-equation=\"\u00f7\" draggable=\"true\">\u00f7<\/button>\n                <button class=\"equation-btn\" data-equation=\"=\" draggable=\"true\">=<\/button>\n            <\/div>\n        <\/div>\n        <div id=\"grid\"><\/div>\n        <div class=\"button-container\">\n            <button id=\"reset-btn\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/reset-1.svg\" id=\"reset-image\" alt=\"Reset\" width=\"50\" height=\"50\">\n            <\/button>\n            <button id=\"toggle-pencil-eraser-btn\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/pencil.svg\" id=\"toggle-image\" alt=\"Pencil\" width=\"50\" height=\"50\">\n            <\/button>\n        <\/div>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use color counters, numbers, and operators to visualize basic math concepts.<\/p>\n","protected":false},"author":2,"featured_media":8678,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8657","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/color-counters.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8657","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=8657"}],"version-history":[{"count":14,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8657\/revisions"}],"predecessor-version":[{"id":8685,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8657\/revisions\/8685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8678"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}