{"id":8626,"date":"2024-07-01T12:15:20","date_gmt":"2024-07-01T12:15:20","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8626"},"modified":"2024-07-01T12:15:22","modified_gmt":"2024-07-01T12:15:22","slug":"elkonin-boxes","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/elkonin-boxes","title":{"rendered":"Elkonin Boxes Teaching Tool"},"content":{"rendered":"\n<p>Looking for fun Elkonin Boxes activities for your ELA classroom? Try our virtual Elkonin Boxes teaching tool! Each box represents one sound in a spoken word. Use this interactive tool to break down words into individual sounds (phonemes) by dragging circles into sound boxes (e.g., segmenting &#8220;cat&#8221; into \/c\/, \/a\/, and \/t\/). Teachers can also use letters to spell out words! It&#8217;s an excellent way to help kids with letter sounds, reading, spelling, and phonemic awareness. 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        .elkonin-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        .elkonin-main-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n\n        .elkonin-tool-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            margin: 0;\n            padding: 20px;\n        }\n\n        .circle-container {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            gap: 16px;\n            margin-bottom: 20px;\n            position: relative;\n        }\n\n        .control-panel {\n            margin-bottom: 20px;\n            display: flex;\n            gap: 12px;\n            flex-wrap: wrap; \/* Allow buttons to wrap on smaller screens *\/\n        }\n\n        .control-button {\n            display: flex;\n            align-items: center;\n            gap: 5px;\n            background-color: #fff;\n            border: 1px solid #000;\n            padding: 5px 20px;\n            cursor: pointer;\n            transition: background-color 0.3s, box-shadow 0.3s;\n            justify-content: center; \/* Center content inside buttons *\/\n        }\n\n        .control-button img {\n            width: 20px;\n            height: 20px;\n            transition: transform 0.3s;\n        }\n\n        .control-button:hover {\n            background-color: #d3d3d3;\n            box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), -3px -3px 6px rgba(255, 255, 255, 0.5);\n        }\n\n        .control-button:hover img {\n            transform: translateY(-2px);\n        }\n\n        .box-container {\n            display: flex;\n            flex-wrap: nowrap; \/* Ensure boxes stay in a single row *\/\n            justify-content: center;\n            max-width: 100%; \/* Ensure container doesn't exceed viewport width *\/\n            overflow: hidden; \/* Prevent horizontal scrolling *\/\n            margin-bottom: 20px;\n        }\n\n        .box-wrapper {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .box {\n            width: 65px;\n            height: 60px;\n            border: 2px solid #000;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: background-color 0.3s;\n            flex: 0 0 auto; \/* Prevent box from shrinking *\/\n        }\n\n        .box.dragover {\n            background-color: #d3d3d3;\n        }\n\n        .editable-container {\n            width: 65px; \/* Same width as box *\/\n            height: 40px; \/* Set the height to 40px *\/\n            margin-top: 5px;\n            display: none;\n        }\n\n        .editable {\n            width: 100%;\n            box-sizing: border-box;\n            font-size: 30px;\n            text-align: center;\n            font-weight: 900;\n            height: 40px;\n            resize: none;\n            border: 1px solid #000;\n        }\n\n        .circle {\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            cursor: pointer;\n            border: solid 3px;\n            position: relative;\n        }\n\n        .placeholder {\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            border: none; \/* Invisible border *\/\n            background-color: transparent; \/* Invisible background *\/\n            position: relative;\n        }\n\n        .popup {\n            display: none;\n            position: absolute;\n            background-color: white;\n            border: 1px solid #000;\n            padding: 10px;\n            box-shadow: 0 0 10px rgba(0,0,0,0.2);\n            z-index: 1000;\n        }\n\n        .popup.open {\n            display: block;\n        }\n\n        .color-option, .number-option {\n            cursor: pointer;\n            display: inline-block;\n            font-size: 18px;\n            font-weight: 500;\n            border: 1px solid #000;\n            border-radius: 50%;\n            height: 28px;\n            width: 28px;\n            text-align: center;\n        }\n\n        .color-option {\n            width: 30px;\n            height: 30px;\n            border-radius: 50%;\n        }\n\n        \/* Media Query for Small Screens *\/\n        @media (max-width: 600px) {\n            .elkonin-main-container {\n                padding: 10px;\n            }\n\n            .control-panel {\n                display: flex;\n                flex-wrap: nowrap;\n            }\n\n            .control-button {\n                font-size: 11px;\n                padding: 4px;\n            }\n\n            .control-button img {\n                width: 18px;\n                height: 18px;\n            }\n\n            .box-container {\n                flex-wrap: nowrap;\n                justify-content: center;\n            }\n\n            .box {\n                width: 36px; \/* Reduced size to fit within smaller screens *\/\n                height: 36px; \/* Reduced size to fit within smaller screens *\/\n            }\n\n            .editable-container {\n                width: 30px;\n                height: 30px;\n            }\n\n            .editable {\n                font-size: 12px;\n                height: 30px;\n            }\n\n            .circle, .placeholder {\n                width: 30px;\n                height: 30px;\n            }\n\n            .circle-container {\n               flex-wrap: nowrap;\n               gap: 6px;\n           }\n\n        }\n    <\/style>\n\n    <div class=\"elkonin-main-container\">\n        <div class=\"elkonin-tool-container\">\n            <div class=\"box-container\" id=\"box-container\">\n                <!-- Boxes will be generated here -->\n            <\/div>\n            \n            <div class=\"circle-container\" id=\"circle-container\">\n                <!-- Circles and placeholders will be generated here -->\n            <\/div>\n            \n            <div class=\"control-panel\">\n                <div id=\"box-count-trigger\" class=\"control-button\">\n                    <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/06\/box.svg\" alt=\"Box Icon\" title=\"Choose Boxes\">\n                    Boxes\n                <\/div>\n                <div id=\"box-count-popup\" class=\"popup\">\n                    <!-- Number options from 2 to 10 -->\n                    <div class=\"number-option\" data-value=\"2\">2<\/div>\n                    <div class=\"number-option\" data-value=\"3\">3<\/div>\n                    <div class=\"number-option\" data-value=\"4\">4<\/div>\n                    <div class=\"number-option\" data-value=\"5\">5<\/div>\n                    <div class=\"number-option\" data-value=\"6\">6<\/div>\n                    <div class=\"number-option\" data-value=\"7\">7<\/div>\n                    <div class=\"number-option\" data-value=\"8\">8<\/div>\n                <\/div>\n                <div id=\"circle-color-trigger\" class=\"control-button\">\n                    <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/color.svg\" alt=\"Color Icon\" title=\"Choose Color\">\n                    Colors\n                <\/div>\n                <div id=\"circle-color-popup\" class=\"popup\">\n                    <!-- 10 different color options -->\n                    <div class=\"color-option\" style=\"background-color: red;\"><\/div>\n                    <div class=\"color-option\" style=\"background-color: green;\"><\/div>\n                    <div class=\"color-option\" style=\"background-color: blue;\"><\/div>\n                    <div class=\"color-option\" style=\"background-color: yellow;\"><\/div>\n                    <div class=\"color-option\" style=\"background-color: purple;\"><\/div>\n                    <div class=\"color-option\" style=\"background-color: orange;\"><\/div>\n                    <div class=\"color-option\" style=\"background-color: pink;\"><\/div>\n                    <div class=\"color-option\" style=\"background-color: brown;\"><\/div>\n                <\/div>\n                <div id=\"reset-btn\" class=\"control-button\">\n                    <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/reset.svg\" alt=\"Reset Icon\">\n                <\/div>\n                <div id=\"toggle-textareas-btn\" class=\"control-button\">\n                    Use Letters\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Use Elkonin boxes (sound boxes) to break down words into individual sounds.<\/p>\n","protected":false},"author":2,"featured_media":8651,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8626","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/elkonin-boxes.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8626","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=8626"}],"version-history":[{"count":10,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8626\/revisions"}],"predecessor-version":[{"id":8686,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8626\/revisions\/8686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8651"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}