{"id":7711,"date":"2024-04-15T06:16:29","date_gmt":"2024-04-15T06:16:29","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=7711"},"modified":"2024-05-24T11:51:25","modified_gmt":"2024-05-24T11:51:25","slug":"multiplication-chart","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/multiplication-chart","title":{"rendered":"Multiplication Chart Teaching Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Introduce times tables effortlessly with this virtual multiplication chart teaching tool! Simply select any cell and the corresponding multiplication fact pops up instantly. It&#8217;s customizable with colorful highlights and can select multiple facts at once, making is easy to show and discuss patterns in the multiplication table. It&#8217;s a handy tool at your fingertips, designed to simplify classroom teaching. Best of all, it&#8217;s free for teachers and perfect for engaging students! Start now for free!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<style>\n.wj-mp-main-container{\n    width: 1115px;\n}\n.wj-mp-container {\n    display: flex;\n    width: 80%;\n    height: auto;\n    overflow: scroll;\n    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); \/* Shadow for 3D effect *\/\n    border-radius: 10px; \/* Optional: smoothes out the corners *\/\n    padding: 20px; \/* Optional: space inside the container *\/\n    background-color: #fff; \/* Background color *\/\n    margin-bottom: 6rem;\n}\n.wj-mp-container:hover {\n    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n}\n\n#multiplication-chart-table {\n    border-collapse: collapse;\n    text-align: center;\n}\n\n#multiplication-chart-table td, #multiplication-chart-table th {\n    border: 1px solid black;\n    padding: 5px;\n}\n\n.highlight {\n    background-color: yellow;\n}\n\n.highlight-cell {\n    background-color: lightblue;\n    cursor: pointer;\n}\n\n.header {\n    background-color: lightgrey;\n    font-weight: bold;\n}\n\n#result-display {\n    display: flex;\n    justify-content: center;\n    margin-top: 20px;\n    font-size: 20px;\n}\n\n#color-palette {\n    margin: 10px 0;\n    justify-content: space-around;\n}\n\n.color-swatch {\n    width: 80%;\n    height: 35px;\n    cursor: pointer;\n    border: 1px solid #000;\n    border-radius: 20%;\n    margin-bottom: 6px;\n    position: relative;\n    bottom: 8px;\n}\n\n#clear-button {\n    padding: 10px 20px;\n    margin: 10px 0;\n    font-size: 16px;\n    cursor: pointer;\n}\n\n.wj-mp-container label {\n    white-space: nowrap;\n}\n\n#multiple-selection{\n    position: relative;\n    bottom: 24px;\n    left: 13.5rem;\n}\n\n.selected-swatch {\n    border: 2px solid #000; \/* Makes the selected color stand out *\/\n}\n\n\/* Media Query for smaller screens *\/\n@media only screen and (max-width: 768px) {\n.wj-mp-main-container{\n    width: 100%;\n} \n\n.wj-mp-container {\n    width: 100%;\n    }\n}\n\n\n<\/style>\n\n<div class=\"wj-mp-main-container\"><\/div>\n<div class=\"wj-mp-main-container\">\n\t<div class=\"wj-mp-container\">\n\t\t<div id=\"color-palette\" style=\"width:5%;float:left;min-width: 100px;\">\n\t\t    <div class=\"color-swatch\" style=\"background-color: #FFC0CB;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #FFA07A;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #20B2AA;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #87CEFA;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #9370DB;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #FFD700;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #FFA500;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #98FB98;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #AFEEEE;\"><\/div>\n\t\t    <div class=\"color-swatch\" style=\"background-color: #DDA0DD;\"><\/div>\n\t\t    <button id=\"clear-button\">Clear<\/button>\n\t\t    <label for=\"multiple-selection-lable\">Enable Multiple Selection:<\/label>\n\t\t\t<input type=\"checkbox\" id=\"multiple-selection\">\n\t\t<\/div>\n\n\t\t<div style=\"width:100%;float: left;\">\n\n\n\t\t    <table id=\"multiplication-chart-table\"><\/table>\n\t\t    <div id=\"result-display\"><\/div>\n\t    <\/div>\n    <\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Teach times tables effectively with this virtual multiplication chart tool.<\/p>\n","protected":false},"author":2,"featured_media":8373,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-7711","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/05\/multiplication-chart.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/7711","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=7711"}],"version-history":[{"count":65,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/7711\/revisions"}],"predecessor-version":[{"id":8606,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/7711\/revisions\/8606"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8373"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=7711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}