{"id":8709,"date":"2024-07-31T12:44:03","date_gmt":"2024-07-31T12:44:03","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8709"},"modified":"2024-07-31T12:44:11","modified_gmt":"2024-07-31T12:44:11","slug":"number-chart-1-to-50","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/number-chart-1-to-50","title":{"rendered":"Number Chart 1 to 50 Teaching Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Explore our FREE virtual number chart 1\u201350 tool for teachers! It will help you teach counting forward and backward, number patterns, and even modeling addition and subtraction within 50. Project this online number chart 1\u201350 tool in the classroom and plan various number activities for kids. Hide numbers and challenge students to identify missing numbers, demonstrate counting on or counting back strategies, show counting from any random number, and more! Exciting, right? Dive in! Start now for free!<\/p>\n\n\n\n<style>\n        .hc-main-container {\n            width: 800px;\n        }\n\n        .fifty-chart-container {\n            display: flex;\n            flex-direction: column;\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            margin: auto;\n            overflow: hidden;\n        }\n\n        .fifty-chart-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n\n        .fifty-chart-table {\n            border-collapse: collapse;\n            width: 100%;\n            max-width: 800px;\n            margin: auto;\n        }\n\n        .fifty-chart-table td {\n            width: 50px;\n            height: 50px;\n            text-align: center;\n            vertical-align: middle;\n            position: relative;\n            font-size: 20px;\n            font-weight: 550;\n            border: 2px solid #000;\n            cursor: pointer;\n            padding: 0;\n        }\n\n        .inner {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            height: 100%;\n            color: #000000;\n        }\n\n        .controls-row {\n            display: flex;\n            width: 100%;\n            flex-wrap: wrap;\n            justify-content: center;\n            align-items: center;\n            margin-top: 5px;\n        }\n\n        .color-controls, .controls {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: flex-start;\n            margin-bottom: 20px;\n        }\n\n        .controls {\n            justify-content: flex-end;\n        }\n\n        .controls button, .color-controls button {\n            margin: 5px;\n            padding: 5px;\n            cursor: pointer;\n            width: 100px;\n            border: 2px solid #000;\n            border-radius: 10px;\n        }\n\n        .color-controls button {\n            width: 40px;\n            height: 40px;\n            border: 2px solid transparent;\n            cursor: pointer;\n        }\n\n        .selected {\n            border: 2px solid #000 !important;\n        }\n        #selcted-border{\n            border: 2px solid #000 !important;\n        }\n\n        #toggle-hide-show, #toggle-up-down, #toggle-clear {\n            background-color: #fff;\n            font-size: 16px;\n            font-weight: 600;\n        }\n\n        .color-ffff { background-color: #ffff; border: 2px solid #000; } \/* Always have black border *\/\n        .color-000000 { background-color: #000000; }\n        .color-FFFF00 { background-color: #FFFF00; }\n        .color-FF0000 { background-color: #FF0000; }\n        .color-fd72af { background-color: #fd72af; }\n        .color-2e4704b3 { background-color: #2e4704b3; }\n        .color-FF7F00 { background-color: #ff7f00; }\n\n        @media (max-width: 600px) {\n            .hc-main-container {\n                width: 100%;\n            }        \n\n            .fifty-chart-container {\n                width: 100%;\n                padding: 10px;\n            }\n\n            .fifty-chart-table td {\n                width: 30px;\n                height: 30px;\n                font-size: 14px;\n            }\n\n            .controls button, .color-controls button {\n                width: 40px;\n                height: 40px;\n                margin: 5px;\n            }\n\n            .controls button {\n                width: auto;\n                padding: 5px 10px;\n                font-size: 12px;\n            }\n\n            .color-controls button {\n                width: 30px;\n                height: 30px;\n            }\n        }\n    <\/style>\n\n    <div class=\"hc-main-container\">\n        <div class=\"fifty-chart-container\">\n            <div class=\"controls-row\">\n                <div class=\"color-controls\">\n                    <button class=\"color-ffff selected\" id=\"selcted-border\" onclick=\"selectColor('#ffff', this)\"><\/button>\n                    <button class=\"color-000000\" onclick=\"selectColor('#000000', this)\"><\/button>\n                    <button class=\"color-FFFF00\" onclick=\"selectColor('#FFFF00', this)\"><\/button>\n                    <button class=\"color-FF0000\" onclick=\"selectColor('#FF0000', this)\"><\/button>\n                    <button class=\"color-fd72af\" onclick=\"selectColor('#fd72af', this)\"><\/button>\n                    <button class=\"color-2e4704b3\" onclick=\"selectColor('#2e4704b3', this)\"><\/button>\n                    <button class=\"color-FF7F00\" onclick=\"selectColor('#ff7f00', this)\"><\/button>\n                <\/div>\n            <\/div>\n        \n            <table class=\"fifty-chart-table\" id=\"fifty-chart\">\n                <!-- Table rows and cells will be inserted here by JavaScript -->\n            <\/table>\n        \n            <div class=\"controls-row\">\n                <div class=\"controls\">\n                    <button id=\"toggle-hide-show\" onclick=\"toggleHideShow()\">Hide<\/button>\n                    <button id=\"toggle-up-down\" onclick=\"toggleUpDown()\">50 \u2192 1<\/button>\n                    <button id=\"toggle-clear\" onclick=\"clearGrid()\">Clear<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Project this virtual number chart 1\u201350 in class to teach number relationships!<\/p>\n","protected":false},"author":2,"featured_media":8716,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8709","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/number-chart-1-to-50.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8709","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=8709"}],"version-history":[{"count":3,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8709\/revisions"}],"predecessor-version":[{"id":8726,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8709\/revisions\/8726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8716"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}