{"id":8611,"date":"2024-06-07T07:52:59","date_gmt":"2024-06-07T07:52:59","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8611"},"modified":"2024-06-10T17:56:34","modified_gmt":"2024-06-10T17:56:34","slug":"hundreds-chart","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/hundreds-chart","title":{"rendered":"Hundreds Chart Teaching Tool"},"content":{"rendered":"\n<p>Teaching numbers 1\u2013100? Try our interactive hundreds chart teaching tool! It&#8217;s perfect for visualizing counting forward and backward, skip counting patterns, and basic arithmetic operations. Teachers can use this 100 chart in various ways\u2014ask students to identify missing numbers (like even or odd) by shading boxes black or illustrate number patterns (like multiples of 10) using different colors. Isn&#8217;t that amazing? Make learning numbers fun for your class! 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.hc-main-container {\n    width: 800px;\n}\n\n.hundreds-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.hundreds-chart-container:hover {\n    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n}\n\n.hundreds-chart-table {\n    border-collapse: collapse;\n    width: 100%;\n    max-width: 800px;\n    margin: auto;\n}\n\n.hundreds-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-radius: 50%;\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-EDEDF9 { background-color: #ededf9; 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    .hundreds-chart-container {\n        width: 100%;\n        padding: 10px;\n    }\n\n    .hundreds-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=\"hundreds-chart-container\">\n        <div class=\"controls-row\">\n            <div class=\"color-controls\">\n                <button class=\"color-EDEDF9 selected\" id=\"selcted-border\" onclick=\"selectColor('#ededf9', 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=\"hundreds-chart-table\" id=\"hundreds-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()\">100 \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>Use a virtual hundreds chart to teach numbers 1-100, counting, and more. <\/p>\n","protected":false},"author":2,"featured_media":8613,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8611","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/06\/hundreds-chart.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8611","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=8611"}],"version-history":[{"count":3,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8611\/revisions"}],"predecessor-version":[{"id":8648,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8611\/revisions\/8648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8613"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}