{"id":8722,"date":"2024-07-31T12:54:14","date_gmt":"2024-07-31T12:54:14","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8722"},"modified":"2024-07-31T15:30:19","modified_gmt":"2024-07-31T15:30:19","slug":"alphabet-tiles","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/alphabet-tiles","title":{"rendered":"Alphabet Tiles Teaching Tool"},"content":{"rendered":"\n<p>Looking for digital alphabet manipulatives? Our interactive alphabet tiles teaching tool is ready to assist you in the classroom! It features a grid interface for easy drag-and-drop of letters A-Z. Use these virtual alphabet tiles for students in all learning stages\u2014letter recognition, matching uppercase and lowercase letters, spelling words, and writing simple sentences! Additionally, you can quickly highlight letters using the pencil feature. Perfect, isn&#8217;t it? 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        .at-container {\n            display: flex;\n            align-items: center;\n            height: 100vh;\n            margin: 0;\n        }\n        .alphabet-tiles-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            background-color: #fff;\n            position: relative;\n        }\n        .alphabet-tiles-main-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n        table {\n            border-collapse: collapse;\n            width: 70%;\n            margin-top: 20px;\n            margin-left: auto;\n            margin-right: auto;\n            position: relative;\n            z-index: 1;\n        }\n        .table-cell {\n            width: 40px;\n            height: 40px;\n            font-weight: bold;\n            font-size: 25px;\n            text-align: center;\n            vertical-align: middle;\n            position: relative;\n            transition: transform 0.3s ease-in-out;\n            border: 1px solid #000;\n            cursor: pointer;\n            overflow: hidden;\n        }\n        .table-cell span {\n            display: inline-block;\n            width: 100%;\n            background-color: transparent;\n            white-space: nowrap;\n        }\n        .tile {\n            width: 40px;\n            height: 40px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 25px;\n            font-weight: 600;\n            cursor: pointer;\n            user-select: none;\n            margin: 2px;\n            border-radius: 5px;\n            position: relative;\n        }\n        .tile span {\n            display: inline-block;\n            line-height: 40px;\n            background-color: transparent;\n        }\n        .row-container {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            margin-top: 20px;\n        }\n        .controls {\n            margin: 20px auto;\n            display: flex;\n            justify-content: center;\n            gap: 10px;\n        }\n\n        .tg-btn, .tash-btn, .pencil-btn, .eraser-btn {\n            width: 50px;\n            height: 40px;\n            background-color: transparent;\n            border: none;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            cursor: pointer;\n            position: relative;\n        }\n\n        .tg-btn img, .tash-btn img, .pencil-btn img, .eraser-btn img {\n            width: 100%;\n            height: 100%;\n        }\n\n        .selected {\n            border-bottom: 3px solid blue;\n        }\n\n        canvas {\n            position: absolute;\n            top: 0;\n            left: 0;\n            z-index: 2;\n            pointer-events: none;\n        }\n\n        @media (max-width: 700px) {\n            table {\n                width: 100%;\n            }\n            .table-cell {\n                height: 30px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"at-container\">\n    <div class=\"alphabet-tiles-main-container\">\n        <div class=\"controls\">\n            <button class=\"tg-btn\" id=\"toggleCaseButton\" onclick=\"toggleCase()\">\n                <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/upper.png\" alt=\"Toggle Case\">\n            <\/button>\n            <button class=\"tash-btn\" onclick=\"clearGrid()\">\n                <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/trash.png\" alt=\"Clear Grid\">\n            <\/button>\n            <button class=\"pencil-btn\" onclick=\"enablePencil()\">\n                <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/pencil.png\" alt=\"Pencil\">\n            <\/button>\n            <button class=\"eraser-btn\" onclick=\"enableEraser()\">\n                <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/eraser.png\" alt=\"Eraser\">\n            <\/button>\n        <\/div>\n\n        <table id=\"gridContainer\">\n            <!-- Grid cells will be generated here -->\n        <\/table>\n        <canvas id=\"drawingCanvas\"><\/canvas>\n\n        <div class=\"row-container\" id=\"tileContainer\">\n            <!-- Tiles will be generated here -->\n        <\/div>\n    <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use alphabet tiles to teach letters, spell words, and structure sentences! <\/p>\n","protected":false},"author":2,"featured_media":8733,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8722","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/alphabet-tiles.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8722","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=8722"}],"version-history":[{"count":3,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8722\/revisions"}],"predecessor-version":[{"id":8729,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8722\/revisions\/8729"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8733"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}