{"id":8614,"date":"2024-06-07T07:59:48","date_gmt":"2024-06-07T07:59:48","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8614"},"modified":"2024-10-25T05:48:02","modified_gmt":"2024-10-25T05:48:02","slug":"place-value-chart","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/place-value-chart","title":{"rendered":"Place Value Chart Teaching Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Looking for online place value manipulatives? Try this interactive place value chart teaching tool! Drag and drop digits (0\u20139) into any place and visualize place values up to millions. The tool automatically shows the number and its written form. It helps kids understand zeros as placeholders and see how the position of a digit changes its value. Clear the chart with just a click if you wish to start fresh with a new number. Say goodbye to boring place value drills! Start now for free!<\/p>\n\n\n\n<style>\n        .place-value-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            overflow: hidden;\n        }\n\n        .place-value-main-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n\n        .wj-pvalue-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            width: 100%;\n            max-width: 600px;\n        }\n\n        #place-value-chart {\n            display: flex;\n            margin-bottom: 20px;\n        }\n\n        .column {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            border: 1px solid #000;\n            width: 80px;\n            text-align: center;\n        }\n\n        #millions-col {\n            background-color: #4b00ff24;\n        }\n\n        #hundred-thousands-col {\n            background-color: #d32f2fa6;\n        }\n\n        #ten-thousands-col {\n            background-color: #1976D2;\n        }\n\n        #thousands-col {\n            background-color: #388E3C;\n        }\n\n        #hundreds-col {\n            background-color: #FBC02D;\n        }\n\n        #tens-col {\n            background-color: #F57C00;\n        }\n\n        #ones-col {\n            background-color: #c2185bbf;\n        }\n\n        .fixed-text {\n            width: 100%;\n            writing-mode: vertical-rl;\n            transform: rotate(180deg);\n            white-space: nowrap;\n            font-size: 0.8em;\n            height: 180px;\n            display: flex;\n            align-items: center;\n            justify-content: normal;\n            margin-bottom: 12px;\n        }\n\n        #numbers {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n        }\n\n        .number {\n            font: 48px mukta, sans-serif;\n            font-weight: 700;\n            padding: 8px;\n            margin: 5px;\n            cursor: pointer;\n        }\n\n        .drop-zone {\n           display: inline;\n           font: 39px mukta, sans-serif;\n           font-weight: 700;\n           width: 100%;\n           height: 62px;\n           text-align: center;\n           border: 1px solid #000;\n           background-color: #fff;\n        }\n\n        #composed-number {\n            font: 38px mukta, sans-serif;\n            font-weight: 400;\n        }\n\n        #result {\n            text-align: center;\n        }\n\n        .clear-button {\n            margin-top: 10px;\n            cursor: pointer;\n            border: none;\n            background: none;\n        }\n\n        .clear-button img {\n            width: 24px;\n            height: 24px;\n        }\n\n        @media (max-width: 768px) {\n            .place-value-main-container {\n                max-width: 100%;\n                padding: 10px;\n            }\n\n            .wj-pvalue-container {\n                width: 100%;\n            }\n\n            .number {\n                font-size: 36px;\n                padding: 5px;\n                margin: 3px;\n            }\n\n            .column {\n                width: 50px;\n            }\n\n            .fixed-text {\n                font-size: 0.5em;\n                height: 100px;\n            }\n\n            .drop-zone {\n                font-size: 28px;\n                height: 45px;\n            }\n\n            #composed-number {\n                font-size: 28px;\n            }\n\n            .clear-button img {\n                width: 20px;\n                height: 20px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .number {\n                font-size: 24px;\n                padding: 3px;\n                margin: 2px;\n            }\n\n            .column {\n                width: 40px;\n            }\n\n            .fixed-text {\n                font-size: 0.4em;\n                height: 80px;\n            }\n\n            .drop-zone {\n                font-size: 24px;\n                height: 35px;\n            }\n\n            #composed-number {\n                font-size: 24px;\n            }\n\n            .clear-button img {\n                width: 18px;\n                height: 18px;\n            }\n        }\n    <\/style>\n\n    <div class=\"place-value-main-container\">\n        <div class=\"wj-pvalue-container\">\n            <div id=\"numbers\">\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">0<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">1<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">2<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">3<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">4<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">5<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">6<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">7<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">8<\/div>\n                <div class=\"number\" draggable=\"true\" ondragstart=\"drag(event)\">9<\/div>\n            <\/div>\n            <div id=\"place-value-chart\">\n                <div class=\"column\" id=\"millions-col\">\n                    <div class=\"fixed-text\">Millions<\/div>\n                    <div class=\"drop-zone\" id=\"millions\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div>\n                <\/div>\n                <div class=\"column\" id=\"hundred-thousands-col\">\n                    <div class=\"fixed-text\">Hundred Thousands<\/div>\n                    <div class=\"drop-zone\" id=\"hundred-thousands\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div>\n                <\/div>\n                <div class=\"column\" id=\"ten-thousands-col\">\n                    <div class=\"fixed-text\">Ten Thousands<\/div>\n                    <div class=\"drop-zone\" id=\"ten-thousands\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div>\n                <\/div>\n                <div class=\"column\" id=\"thousands-col\">\n                    <div class=\"fixed-text\">Thousands<\/div>\n                    <div class=\"drop-zone\" id=\"thousands\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div>\n                <\/div>\n                <div class=\"column\" id=\"hundreds-col\">\n                    <div class=\"fixed-text\">Hundreds<\/div>\n                    <div class=\"drop-zone\" id=\"hundreds\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div>\n                <\/div>\n                <div class=\"column\" id=\"tens-col\">\n                    <div class=\"fixed-text\">Tens<\/div>\n                    <div class=\"drop-zone\" id=\"tens\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div>\n                <\/div>\n                <div class=\"column\" id=\"ones-col\">\n                    <div class=\"fixed-text\">Ones<\/div>\n                    <div class=\"drop-zone\" id=\"ones\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div>\n                <\/div>\n            <\/div>\n            <div id=\"result\">\n                <p><span id=\"composed-number\">0<\/span><\/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                <p><span id=\"written-number\">Zero<\/span><\/p>\n            <\/div>\n            <button class=\"clear-button\" onclick=\"clearAll()\">\n                <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/06\/reset.svg\" alt=\"reset\" title=\"Reset\">\n            <\/button>\n        <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Explore place values up to millions with an interactive place value chart.<\/p>\n","protected":false},"author":2,"featured_media":8619,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8614","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/06\/place-value-chart.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8614","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=8614"}],"version-history":[{"count":7,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8614\/revisions"}],"predecessor-version":[{"id":8639,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8614\/revisions\/8639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8619"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}