{"id":8621,"date":"2024-06-07T08:08:06","date_gmt":"2024-06-07T08:08:06","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8621"},"modified":"2024-06-07T11:59:05","modified_gmt":"2024-06-07T11:59:05","slug":"times-tables","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/times-tables","title":{"rendered":"Times Tables Teaching Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Introducing a fun and interactive times table teaching tool! Select times table charts from 1\u201310 and enjoy a fun drag-and-drop activity. Drag answers into the correct zones to complete multiplication facts. Wrong answers are highlighted in red to identify tricky times tables where kids might need a little more practice and support. This times table tool is perfect for one-on-one learning or a collaborative class activity\u2014each student tackles one fact! Start now for free!<\/p>\n\n\n\n<style>\n        .tc-main-container {\n            width: 100%;\n            max-width: 800px;\n        }\n    \n        .wj-main-container {\n            width: 100%;\n            padding: 20px;\n            background-color: white;\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            text-align: center;\n            margin: 20px auto;\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            min-height: 400px;\n        }\n    \n        .wj-main-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n        #tableButtons {\n           border: 1px solid #000;\n           border-radius: 5px;\n       }\n    \n        .table-buttons, #answers {\n            margin: 20px;\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            position: relative;\n        }\n\n        .hand-icon {\n            position: absolute;\n            width: 50px;\n            height: 50px;\n            background: url('https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/06\/hand.svg') no-repeat center center;\n            background-size: contain;\n            display: none;\n            top: 50px;\n            left: 206px\n        }\n\n        @keyframes dragHand {\n            0% {\n                transform: translate(0, 0);\n            }\n            100% {\n                transform: translate(130px, 100px); \/* Adjust these values based on your layout *\/\n            }\n        }\n\n        .hand-icon.animate {\n            display: block;\n            animation: dragHand 3s ease 0s infinite normal;\n        }\n\n        @keyframes pressButton {\n            0%, 100% {\n                transform: scale(1);\n            }\n            50% {\n                transform: scale(0.9);\n            }\n        }\n\n        .animate-button {\n            background-color: lightblue !important;\n            animation: pressButton 1s infinite;\n        }\n\n        .user-desc {\n            display: flex;\n            justify-content: center;\n            font: 14px Arial, sans-serif;\n            color: #090a4a;\n        }\n    \n        .user-selc {\n            display: flex;\n            justify-content: center;\n            font: 14px Arial, sans-serif;\n            color: #090a4a;\n            margin-top: 1.5rem;\n        }\n\n        .common-style {\n            margin: 5px;\n            padding: 8px;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border: 2px solid #000;\n            border-radius: 5px;\n            transition: background-color 0.3s, transform 0.3s;\n        }\n    \n        .common-style:hover {\n            background-color: #d3d3d3;\n            transform: scale(1.05);\n        }\n    \n        .table-buttons .selected {\n            background-color: blue;\n            color: white;\n        }\n    \n        .grid-container {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n            margin-top: 20px;\n            width: 100%;\n            max-width: 600px;\n            justify-content: center;\n        }\n    \n        .column {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n            width: calc(50% - 5px);\n        }\n    \n        .grid-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 8px;\n            border: 1px solid #000;\n            border-radius: 5px;\n        }\n    \n        .eq-display {\n            font-size: 24px;\n            font-weight: 700;\n        }\n    \n        .drop-zone {\n            width: 50px;\n            height: 50px;\n            border: 2px solid #000;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n    \n        .draggable.correct, .draggable.incorrect {\n            cursor: not-allowed;\n        }\n    \n        .correct {\n            background-color: #1ae721;\n            font-size: 25px;\n            font-weight: 700;\n        }\n    \n        .incorrect {\n            background-color: #ec4556;\n        }\n    \n        \/* Styling for circular answer buttons *\/\n        #answers .common-style {\n            width: 35px;\n            border-radius: 50%;\n            height: 35px;\n            font-weight: bold;\n            font-size: 1.2rem;\n        }\n    \n        .generate-btn {\n            background-color: #fff;\n        }\n    \n        .table-buttons .common-style {\n            width: 35px;\n            border-radius: 50%;\n            height: 35px;\n            font-weight: bold;\n            font-size: 1.2rem;\n            flex: 0 1 auto;\n        }\n    \n        @media (max-width: 768px) {\n            .grid-container {\n                display: grid;\n                grid-template-columns: 1fr;\n                justify-items: center;\n            }\n    \n            .column {\n                width: 100%;\n            }\n    \n            .grid-item {\n                font-size: 0.9rem;\n                padding: 5px;\n            }\n    \n            .drop-zone {\n                width: 40px;\n                height: 40px;\n            }\n            \n            .table-buttons .common-style {\n                width: 40px;\n                height: 40px;\n                font-size: 1rem;\n            }\n    \n            #answers .common-style {\n                width: 30px;\n                height: 30px;\n                font-size: 1rem;\n            }\n\n            .hand-icon {\n                display: none !important; \/* Hide on smaller screens *\/\n            }\n        }\n    \n        @media (max-width: 600px) {\n            .tc-main-container {\n                width: 100%;\n            }\n    \n            .column {\n                width: 100%;\n            }\n    \n            .grid-item {\n                font-size: 0.8rem;\n                padding: 5px;\n            }\n    \n            .drop-zone {\n                width: 40px;\n                height: 40px;\n            }\n    \n            .common-style {\n                font-size: 0.7rem;\n                padding: 5px;\n            }\n    \n            \/* Smaller circular answer buttons for mobile *\/\n            #answers .common-style {\n                width: 25px;\n                height: 25px;\n                font-size: 0.9rem;\n            }\n    \n            \/* Smaller circular select buttons for mobile *\/\n            .table-buttons .common-style {\n                width: 30px;\n                height: 30px;\n                font-size: 0.9rem;\n            }\n\n            \/* Hide hand-icon on small screens *\/\n            .hand-icon {\n                display: none !important;\n            }\n        }\n    <\/style>\n\n    <div class=\"tc-main-container\">\n        <div class=\"wj-main-container\">\n            <div id=\"answers\"><\/div>\n            <span class=\"user-desc\">Drag the Correct Answer on Drop Zone<\/span>\n            <div class=\"grid-container\" id=\"timesTableGrid\">\n                <div class=\"column\" id=\"first-column\"><\/div>\n                <div class=\"column\" id=\"second-column\"><\/div>\n            <\/div>\n            <span class=\"user-selc\">Select Table That You Want to Play<\/span>\n            <div class=\"table-buttons\" id=\"tableButtons\">\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 1)\">1<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 2)\">2<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 3)\">3<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 4)\">4<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 5)\">5<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 6)\">6<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 7)\">7<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 8)\">8<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 9)\">9<\/button>\n                <button class=\"common-style generate-btn\" onclick=\"selectButton(this, 10)\">10<\/button>\n            <\/div>\n            <div class=\"hand-icon\" id=\"handIcon\"><\/div>\n        <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Select times tables 1\u201310 and complete multiplication facts.<\/p>\n","protected":false},"author":2,"featured_media":8623,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8621","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/06\/times-table.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8621","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=8621"}],"version-history":[{"count":9,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8621\/revisions"}],"predecessor-version":[{"id":8647,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8621\/revisions\/8647"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8623"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}