{"id":8719,"date":"2024-07-31T12:50:49","date_gmt":"2024-07-31T12:50:49","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8719"},"modified":"2024-07-31T12:50:51","modified_gmt":"2024-07-31T12:50:51","slug":"multiplication-chart-1-to-12","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/multiplication-chart-1-to-12","title":{"rendered":"Multiplication Chart 1 to 12 Teaching Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Teaching times tables up to 12? Try this virtual multiplication chart 1 to 12 for teachers! It is designed to make learning multiplication facts engaging and fun. Students can click any box to display related facts and even highlight multiple boxes with colors to explore properties like commutativity, identity, and zero. Help kids actively engage with this online multiplication chart 1\u201312 in math centers or at home to boost conceptual understanding, beyond rote memorization! Start now for free!<\/p>\n\n\n\n<style>\n        .mc12-main-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: 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            box-sizing: border-box;\n        }\n\n        .mc12-main-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n\n        .wj-mc12-tool {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            width: 100%;\n            max-width: 600px;\n            margin: 0;\n            padding: 10px;\n            box-sizing: border-box;\n        }\n\n        #colorContainer {\n            display: flex;\n            flex-direction: row;\n            flex-wrap: wrap;\n            justify-content: center;\n            margin-top: 20px;\n            width: 100%;\n        }\n\n        table.wj-tool-table {\n            border-collapse: collapse;\n            margin: 20px 0;\n            cursor: pointer;\n            width: 100%;\n        }\n\n        .wj-td, .wj-th {\n            border: 1px solid #000;\n            padding: 5px;\n            text-align: center;\n            font-size: 14px;\n            word-wrap: break-word;\n        }\n\n        .number {\n            font-size: 16px;\n            font-weight: 500;\n        }\n\n        .highlight {\n            background-color: yellow;\n        }\n\n        .highlight-header {\n            background-color: lightblue;\n        }\n\n        button, .color-button {\n            margin: 5px;\n            padding: 5px 10px;\n            box-sizing: border-box;\n            border-radius: 5px;\n            transition: background-color 0.3s, color 0.3s;\n        }\n\n        .color-button {\n            width: 30px;\n            height: 30px;\n            border: 1px solid #000;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        #toggleHighlight, #clearChart {\n            height: 30px;\n            border: 1px solid #000;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 12px;\n            padding: 0 5px;\n            width: auto;\n            box-sizing: border-box;\n        }\n\n        .wj-control-btn {\n            display: flex;\n            flex-direction: row;\n            justify-content: flex-start;\n        }\n\n        .selected {\n            border: 2px solid #000;\n            width: 30px;\n            height: 30px;\n        }\n\n        .active-button {\n            background-color: #4f52c3;\n            color: #fff;\n            border-color: #4f52c3;\n        }\n\n        #equation {\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            font-size: 24px;\n            font-weight: 700;\n            color: #090a4a;\n            text-align: center;\n            width: 100%;\n        }\n\n        @media (max-width: 480px) {\n            .mc12-main-container {\n                padding: 10px;\n            }\n\n            .wj-mc12-tool {\n                padding: 5px;\n                max-width: 100%;\n            }\n\n            .wj-td, .wj-th {\n                font-size: 12px;\n                padding: 3px;\n            }\n\n            .number {\n                font-size: 14px;\n            }\n\n            button, .color-button {\n                margin: 3px;\n                padding: 3px 5px;\n                border-radius: 5px;\n            }\n\n            .color-button {\n                width: 25px;\n                height: 25px;\n            }\n\n            #toggleHighlight, #clearChart {\n                height: 25px;\n                font-size: 10px;\n            }\n\n            .selected {\n                width: 25px;\n                height: 25px;\n            }\n\n            #equation {\n                font-size: 20px;\n            }\n        }\n\n        @media (max-width: 360px) {\n            .mc12-main-container {\n                padding: 5px;\n            }\n\n            .wj-mc12-tool {\n                max-width: 100%;\n            }\n\n            .wj-td, .wj-th {\n                font-size: 10px;\n                padding: 2px;\n            }\n\n            .number {\n                font-size: 12px;\n            }\n\n            button, .color-button {\n                margin: 2px;\n                padding: 2px 4px;\n                border-radius: 5px;\n            }\n\n            .color-button {\n                width: 20px;\n                height: 20px;\n            }\n\n            #toggleHighlight, #clearChart {\n                height: 20px;\n                font-size: 8px;\n            }\n\n            .selected {\n                width: 20px;\n                height: 20px;\n            }\n\n            #equation {\n                font-size: 18px;\n            }\n        }\n    <\/style>\n\n    <div class=\"mc12-main-container\">\n        <div class=\"wj-mc12-tool\">\n            <div id=\"colorContainer\">\n                <button id=\"toggleHighlight\" class=\"toggle-button\">Enable Multiple Selection<\/button>\n                <button class=\"color-button\" style=\"background-color: yellow;\" data-color=\"yellow\"><\/button>\n                <button class=\"color-button\" style=\"background-color: lightblue;\" data-color=\"lightblue\"><\/button>\n                <button class=\"color-button\" style=\"background-color: lightgreen;\" data-color=\"lightgreen\"><\/button>\n                <button class=\"color-button\" style=\"background-color: lightcoral;\" data-color=\"lightcoral\"><\/button>\n                <button class=\"color-button\" style=\"background-color: lightpink;\" data-color=\"lightpink\"><\/button>\n                <button class=\"color-button\" style=\"background-color: lightgoldenrodyellow;\" data-color=\"lightgoldenrodyellow\"><\/button>\n                <button class=\"color-button\" style=\"background-color: lightgray;\" data-color=\"lightgray\"><\/button>\n                <button id=\"clearChart\" class=\"clear-button\">Clear Chart<\/button>\n            <\/div>\n            <table id=\"multiplicationChart\" class=\"wj-tool-table\"><\/table>\n            <div id=\"equation\"><\/div>\n        <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Teach multiplication facts up to 12 using this online multiplication chart.<\/p>\n","protected":false},"author":2,"featured_media":8715,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8719","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/multiplication-chart-1-to-12.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8719","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=8719"}],"version-history":[{"count":3,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8719\/revisions"}],"predecessor-version":[{"id":8728,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8719\/revisions\/8728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8715"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}