{"id":8663,"date":"2024-07-01T12:17:13","date_gmt":"2024-07-01T12:17:13","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8663"},"modified":"2024-07-01T12:39:32","modified_gmt":"2024-07-01T12:39:32","slug":"roman-numeral-cards","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/roman-numeral-cards","title":{"rendered":"Roman Numeral Cards Teaching Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Want to make learning Roman numerals fun for your class? Try this interactive Roman numeral cards teaching tool! It features a deck of 20 cards (4 each of I, V, X, L, and C). Drag and drop cards in the activity area and double-click to reveal them. Build different numbers and quickly write down equivalent decimal numbers using the pencil (e.g., show how the X Roman numeral represents the decimal number 10). You can also create fun Roman numeral puzzles and games in seconds! Start now for free!<\/p>\n\n\n\n<style>\n    .roman-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      height: 100vh;\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: white;\n      position: relative;\n    }\n\n    .roman-main-container:hover {\n      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n    }\n\n    .roman-container {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n      font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n      width: 100%;\n    }\n\n    .tool-bar-container {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 5px;\n      margin: 0 0 10px 0;\n      width: 100%;\n    }\n\n    .tool-bar {\n      display: flex;\n      justify-content: center;\n      margin: 5px;\n    }\n\n    .tool {\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n      margin: 0 5px;\n      border: 2px solid #000;\n      border-radius: 8%;\n      background-color: white;\n    }\n\n    .tool.selected {\n      background-color: #0D6EFD;\n    }\n\n    .playing-area {\n      width: 100%;\n      height: 40vh;\n      border: 2px solid #000;\n      position: relative;\n      margin-top: 20px;\n      box-sizing: border-box;\n      max-width: 600px;\n    }\n\n    #cardDeck {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      flex-wrap: wrap;\n      margin: 10px;\n      width: 100%;\n      max-width: 700px;\n      position: relative;\n      z-index: 1;\n    }\n\n    .card {\n      width: 12vw;\n      max-width: 40px;\n      height: 16vw;\n      max-height: 70px;\n      border: 1px solid #000;\n      margin: 5px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.5em;\n      cursor: pointer;\n      position: absolute;\n      background-size: cover;\n      background-position: center;\n      background-color: #ededf9;\n      border-radius: 5px;\n    }\n\n    .card.masked {\n      background-image: url('https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/mask.svg');\n      color: transparent;\n    }\n\n    .canvas {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n      .small-screen-instructions {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        margin-top: 65px;\n        background-color: #f9f9f9; \/* Light background *\/\n        padding: 10px; \/* Some padding *\/\n        border-radius: 10px; \/* Rounded corners *\/\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); \/* Soft shadow *\/\n      }\n\n      .instruction {\n        font-size: 12px;\n        margin: 2px 0;\n        color: #333; \/* Dark text color *\/\n      }\n    @media (min-width: 600px) {\n      .tool-bar {\n        justify-content: center;\n      }\n\n      .tool {\n        width: 50px;\n        height: 50px;\n      }\n\n      .card {\n        width: 45px;\n        height: 60px;\n      }\n\n      .playing-area {\n        height: 50vh;\n        max-width: 700px;\n      }\n    }\n\n    @media (max-width: 600px) {\n      .roman-main-container {\n        height: 90vh;\n      }\n\n      .tool-bar {\n        justify-content: center;\n      }\n\n      .tool {\n        width: 30px;\n        height: 30px;\n      }\n\n      .card {\n        width: 18vw;\n        max-width: 34px;\n        height: 24vw;\n        max-height: 50px;\n      }\n\n      .playing-area {\n        height: 25vh;\n        width: 100%;\n        max-width: 500px;\n      }\n\n      .hand-icon {\n        display: none;\n      }\n\n      .small-screen-instructions {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        margin-top: 50px;\n        background-color: #f9f9f9; \/* Light background *\/\n        padding: 10px; \/* Some padding *\/\n        border-radius: 10px; \/* Rounded corners *\/\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); \/* Soft shadow *\/\n      }\n\n      .instruction {\n        font-size: 12px;\n        margin: 2px 0;\n        color: #333; \/* Dark text color *\/\n      }\n    }\n<\/style>\n\n\n  <div class=\"roman-main-container\">\n    <div class=\"roman-container\">\n      <div class=\"tool-bar-container\">\n        <div class=\"tool-bar\">\n          <img decoding=\"async\" id=\"pencil\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/pencil.svg\" alt=\"Pencil\" class=\"tool\">\n          <img decoding=\"async\" id=\"eraser\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/eraser.svg\" alt=\"Eraser\" class=\"tool\">\n          <img decoding=\"async\" id=\"clear\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/reset-1.svg\" alt=\"Trash Can\" class=\"tool\">\n        <\/div>\n        <div class=\"playing-area\" id=\"playingArea\"><\/div>\n        <div class=\"card-deck\" id=\"cardDeck\"><\/div>\n        <div class=\"small-screen-instructions\">\n          <p class=\"instruction\">Drag a Card Into the Playing Area &#038; Double-tap the Card to Reveal the Value.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Play with roman numeral cards I, V, X, L, and C to represent various numbers.<\/p>\n","protected":false},"author":2,"featured_media":8687,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8663","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/roman-numeral-cards.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8663","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=8663"}],"version-history":[{"count":13,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8663\/revisions"}],"predecessor-version":[{"id":8695,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8663\/revisions\/8695"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8687"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}