Enable simple visual addition equations

lewdev · Aug 22, 2020 · 6e8156c · 6e8156c
1 parent ac5acdc
commit 6e8156c
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 17 deletions.
diff --git a/src/index.html b/src/index.html
@@ -5,14 +5,14 @@
   <meta name="author" content="Lewis Nakao">
   <meta itemprop="image" content="https://lewdev.github.io/apps/hw-gen/img/math-hw-gen.jpg">
   <!-- favicons -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/apps/hw-gen/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/apps/hw-gen/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/apps/hw-gen/icons/favicon-16x16.png">
-  <link rel="manifest" href="/apps/hw-gen/icons/site.webmanifest">
-  <link rel="mask-icon" href="/apps/hw-gen/icons/safari-pinned-tab.svg" color="#5bbad5">
-  <link rel="shortcut icon" href="/apps/hw-gen/icons/favicon.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+  <link rel="manifest" href="icons/site.webmanifest">
+  <link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
+  <link rel="shortcut icon" href="icons/favicon.ico">
   <meta name="msapplication-TileColor" content="#ffc40d">
-  <meta name="msapplication-config" content="/apps/hw-gen/icons/browserconfig.xml">
+  <meta name="msapplication-config" content="icons/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">
   <!-- Twitter -->
   <meta name="twitter:card" content="summary">

diff --git a/src/js/hw-gen.js b/src/js/hw-gen.js
@@ -12,9 +12,9 @@ const HwGen = (() => {
     const z = solution(x, y, mathSymbol);
     return { x, y, z };
   };
-  const generate = (xSize, ySize, mathSymbol, count) => {
+  const generate = (xSize, ySize, mathSymbol, count, useAllPossible1Digit) => {
     const arr = [];
-    if (xSize === 1 && ySize === 1) {
+    if (useAllPossible1Digit) {
       singleDigits.map(x => singleDigits.map(y => arr.push({ x, y, z: solution(x, y, mathSymbol) })));
       arr.sort(() => Math.random() - 0.5); //shuffle
       arr.sort(() => Math.random() - 0.5); //shuffle
@@ -32,7 +32,7 @@ const HwGen = (() => {
     const worksheetCount = worksheetCountSelect ? parseInt(worksheetCountSelect.value) : 1;
     output.innerHTML = Object.keys(hwMap).map(cat => {
       return `<tr><td colspan="4" class="text-light bg-secondary"><h4 class="mb-0">${cat}</h4></td></tr>` + hwMap[cat].map((hwSet, i) => {
-        const {title, xSize, ySize, mathSymbol, outputFunc, count, name, long} = hwSet;
+        const {title, xSize, ySize, mathSymbol, outputFunc, count, name, long, useAllPossible1Digit} = hwSet;
         const eq = genEquation(xSize, ySize, mathSymbol);
         const eqStr = outputFunc(eq, -1, 0, long);
         return `<tr>
@@ -41,7 +41,7 @@ const HwGen = (() => {
         </td>
         <td>
           <a href="./?set=${name}&worksheets=${worksheetCount}" onclick="HwGen.setWs('${name}', ${worksheetCount}); return false;">${title}</a>
-          <div>${xSize === 1 && ySize === 1 ? 64 : count} Problems</div.
+          <div>${useAllPossible1Digit ? 64 : count} Problems</div.
         </td>
         <td class="pr-0">e.g.</td>
         <td style="width:10rem;">
@@ -59,14 +59,14 @@ const HwGen = (() => {
       , worksheetCountSelect = document.getElementById("worksheetCount")
       , hwSet = hwSets[selectedSet]
       , allAnswerKeys = []
-      , { title, count, columns, xSize, ySize, mathSymbol, outputFunc, answerKey, long } = hwSet
+      , { title, count, columns, xSize, ySize, mathSymbol, outputFunc, answerKey, long, useAllPossible1Digit } = hwSet
     ;
     worksheetCount = worksheetCountSelect ? parseInt(worksheetCountSelect.value) : 1
     worksheetsDiv.innerHTML = "";
     for (let i = 0; i < worksheetCount; i++) {
       const worksheet = worksheetOrig.cloneNode(true)
         , output = worksheet.querySelector(".output")
-        , arr = generate(xSize, ySize, mathSymbol, count)
+        , arr = generate(xSize, ySize, mathSymbol, count, useAllPossible1Digit)
         , titleDiv = worksheet.querySelector(".title")
         , outputStr = arr.map((eq, i) => outputFunc(eq, i, columns, long)).join("")
         , emoji = randArr(emojis)
@@ -76,7 +76,7 @@ const HwGen = (() => {
         <div class="row">${arr.map(answerKey).map((a, i) => 
       `<div class="text-nowrap col-${Math.floor(12 / columns)}">${i + 1}.) ${a}</div>`).join("")}</div></div>`);
       titleDiv.innerHTML = `${emoji} ${title} #${i + 1}`;
-      output.innerHTML = `<tr${long ? ' class="long"' : ''}>` + outputStr + '</tr>';
+      output.innerHTML = `<tr${long ? ' class="long"' : ''}>${outputStr}</tr>`;
       worksheetsDiv.appendChild(worksheet);
     }
     hwSetInfoDiv.innerHTML = `${worksheetCount} worksheets *Answer key on last page.`;

diff --git a/src/js/hw-sets.js b/src/js/hw-sets.js
@@ -26,6 +26,18 @@ const verticalEq = (eq, i, columns, mathSym, long) => `
     </td>
     <td class="answer"><input type="text" class="answer-input down"/></td>
     ${((i + 1) % columns) === 0 ? '</tr><tr>' : ''}`
+  , visualAddition = (eq, i, columns, mathSym, emoji) => `
+    <td rowspan="2" style="height: 10rem;"><div class="number" style="height: 12rem;">${i + 1}.)</div></td>
+    <td class="text-center align-middle">${strXTimes(`<span class="emoji mr-2 text-lg">${emoji}</span>`, eq.x)}</td>
+    <td class="text-center align-middle" rowspan="2">+</td>
+    <td class="text-center align-middle">${strXTimes(`<span class="emoji mr-2 text-lg">${emoji}</span>`, eq.y)}</td>
+    <td class="text-center align-middle" rowspan="2">=</td>
+    <td class="answer align-bottom" rowspan="2"><input type="text" class="answer-input down"/></td>
+    </tr><tr>
+    <td class="text-center align-bottom"><input type="text" class="answer-input down"/></td>
+    <td class="text-center align-bottom"><input type="text" class="answer-input down"/></td>
+    <td></td>
+    ${((i + 1) % 5) === 0 ? `</tr></tbody><div class="page-break"></div><table><tbody><tr>` : '</tr><tr style="border-top: 3px solid gray;">'}`
   /**
    * Solve:
    *   x mathSym ___ = y
@@ -53,14 +65,32 @@ const hwSets = {
   "addition": {
     title: "Addition 1-digit Equations", category: "Addition",
     count: 20, columns: 3,
+    useAllPossible1Digit: true,
     xSize: 1, ySize: 1,
     mathSymbol: "+",
     outputFunc: (eq, i, columns) => horizontalEq(eq, i, columns, "+"),
     answerKey: eq => eq.z,
   },
+  "addition-visual-1": {
+    title: "Addition Visual Equations Level 1 (1-6)", category: "Addition",
+    count: 10, columns: 1,
+    xSize: .6, ySize: .6,
+    mathSymbol: "+",
+    outputFunc: (eq, i) => visualAddition(eq, i, 0, "+", randArr(countable)),
+    answerKey: eq => eq.z,
+  },
+  "addition-visual-2": {
+    title: "Addition Visual Equations Level 2", category: "Addition",
+    count: 10, columns: 1,
+    xSize: 1, ySize: 1,
+    mathSymbol: "+",
+    outputFunc: (eq, i) => visualAddition(eq, i, 0, "+", randArr(countable)),
+    answerKey: eq => eq.z,
+  },
   "addition-find-addends": {
     title: "Addition Find Addend Equations", category: "Addition",
     count: 20, columns: 3,
+    useAllPossible1Digit: true,
     xSize: 1, ySize: 1, mathSymbol: "+",
     outputFunc: (eq, i, columns) => horizontalEqX_Y(eq, i, columns, "+"),
     answerKey: eq => eq.y,
@@ -104,6 +134,7 @@ const hwSets = {
     title: "Subtraction 1-digit Equations", category: "Subtraction",
     count: 64, columns: 3,
     xSize: 1, ySize: 1,
+    useAllPossible1Digit: 1,
     mathSymbol: "+",
     outputFunc: (eq, i, columns) => horizontalEqZX_(eq, i, columns, "-"),
     answerKey: eq => eq.y,
@@ -147,6 +178,7 @@ const hwSets = {
     title: "Multiplication 1-digit Equations", category: "Multiplication",
     count: 64, columns: 3,
     xSize: 1, ySize: 1,
+    useAllPossible1Digit: 1,
     mathSymbol: "*",
     outputFunc: (eq, i, columns) => horizontalEq(eq, i, columns, "&times;"),
     answerKey: eq => eq.z,
@@ -155,6 +187,7 @@ const hwSets = {
     title: "Multiplication Find Multiple Equations", category: "Multiplication",
     count: 20, columns: 3,
     xSize: 1, ySize: 1,
+    useAllPossible1Digit: 1,
     mathSymbol: "*",
     outputFunc: (eq, i, columns) => horizontalEqX_Y(eq, i, columns, "&times;"),
     answerKey: eq => eq.z,
@@ -187,6 +220,7 @@ const hwSets = {
     title: "Division 1-digit Equations", category: "Division",
     count: 64, columns: 3,
     xSize: 1, ySize: 1,
+    useAllPossible1Digit: 1,
     mathSymbol: "*",
     outputFunc: (eq, i, columns) => horizontalEqZX_(eq, i, columns, "&divide;"),
     answerKey: eq => eq.y,

diff --git a/src/js/util.js b/src/js/util.js
@@ -1,11 +1,13 @@
 const emojis = "⚽️ 🏀 🏈 ⚾️ 🥎 🎾 🏐 🏉 🥏 🎱 🪀 🏓 🏸 🏒 🏑 🥍 🏏 🥅 ⛳️ 🚗 🚕 🚙 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🚚 🚛 🚜 🚲 🛵 🏍 🛺 🚨 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚞 🚝 🚄 🚅 🚈 🚂 🚆 🚇 🚊 🚉 ✈️ 🛫 🛬 🛩 🛰 🚀 🛸 🚁 🛶 ⛵️ 🚤 🛥 🛳 ⛴ 🚢 ⚓️ ⛽️ 🚧 🚦 🚥 🗺 🗿 🗽 🗼 🏰 🏯 🏟 🎡 🎢 🎠 ⛲️ ⛱ 🏖 🏝 🏜 🌋 ⛰ 🏔 🗻 🏕 ⛺️ 🏠 🏡 🏘 🏚 🏗 🏭 🏢 🏬 🏣 🏤 🏥 🏦 🏨 🏪 🏫 🏩 💒 🏛 ⛪️ 🕌 🕍 🛕 🕋 ⛩ 🛤 🛣 🗾 🎑 🏞 🌅 🌄 🌠 🎇 🎆 🌇 🌆 🏙 🌃 🌌 🌉 🌁 🎪 🥁 🎮 🧩 🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🍆 🥑 🥦 🥬 🥒 🌶 🌽 🥕 🧄 🧅 🥔 🍠 🥐 🥯 🍞 🥖 🥨 🧀 🥚 🍳 🧈 🥞 🧇 🥓 🥩 🍗 🍖 🦴 🌭 🍔 🍟 🍕 🥪 🥙 🧆 🌮 🌯 🥗 🥘 🍝 🍜 🍲 🍛 🍣 🍱 🥟 🦪 🍤 🍙 🍚 🍘 🍥 🥠 🥮 🍢 🍡 🍧 🍨 🍦 🥧 🧁 🍰 🎂 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🌰 🥜 🍯 🥛 🧃 🥤 🕹 🔨 ⚒ 🛠 🧸 🎁 🎈 📓 📔 📒 📕 📗 📘 📙 📚 📖 🖋 🖌 🖍 ✏️ 🔎 ❤️ 🧡 💛 💚 💙 💜 🧑‍🎄 🐈‍⬛ 😺 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦅 🦉 🦇 🐺 🐗 🐴 🦄 🐝 🐛 🦋 🐌 🐞 🐜 🦟 🦗 🕷 🕸 🦂 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦞 🦀 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐅 🐆 🦓 🦍 🦧 🐘 🦛 🦏 🐪 🐫 🦒 🦘 🐃 🐂 🐄 🐎 🐖 🐏 🐑 🦙 🐐 🦌 🐕 🐩 🦮 🐕‍🦺 🐈 🐓 🦃 🦚 🦜 🦢 🦩 🕊 🐇 🦝 🦨 🦡 🦦 🦥 🐁 🐀 🐿 🦔 🐾 🐉 🐲 🌵 🎄 🌲 🌳 🌴 🌱 🌿 ☘️ 🍀 🎍 🎋 🍃 🍂 🍁 🍄 🐚 🌾 💐 🌷 🌹 🌺 🌸 🌼 🌻 🌞 🌝 🌛 🌚 🌙 🌎 🌍 🌏 🪐 💫 ⭐️ 🌟 ✨ ⚡️ ☄️ 💥 🔥 🌪 🌈 ☀️ 🌤 ❄️ ☃️ ⛄️".split(" ");
+const countable = "⚽️ 🏀 🏈 ⚾️ 🥎 🎾 🏐 🚗 🚕 🚙 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🚚 🚛 🚜 🚲 🛵 🏍 🛺 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚞 🚝 🚄 🚅 🚈 🚂 🚆 🚇 🚊 ✈️ 🛩 🛰 🚀 🛸 🚁 🛶 ⛵️ 🚤 ⛴ 🚢 ⚓️ ⛽️ 🚧 🚦 🗿 🗽 🗼 🏰 🏯 🎡 🎢 🎠 ⛲️ ⛱ 🏖 🏝 🏜 🌋 ⛰ 🏔 🗻 🏕 ⛺️ 🏠 🏡 🏗 🏭 🏢 🏬 🏣 🏥 🏦 🏨 🏪 🏫 💒 🏛 ⛪️ 🕌 🕍 🛕 🕋 ⛩ 🌅 🌄 🌠 🎆 🌉 🌁 🎪 🥁 🎮 🧩 🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🍆 🥑 🥦 🥬 🥒 🌶 🌽 🥕 🧄 🧅 🥔 🍠 🥐 🥯 🍞 🥖 🥨 🧀 🥚 🍳 🧈 🥞 🧇 🥓 🥩 🍗 🍖 🦴 🌭 🍔 🍟 🍕 🥪 🥙 🧆 🌮 🌯 🥗 🥘 🍝 🍜 🍲 🍛 🍣 🍱 🥟 🦪 🍤 🍙 🍚 🍘 🥠 🥮 🍢 🍡 🍧 🍨 🍦 🥧 🧁 🍰 🎂 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🌰 🥜 🍯 🥛 🧃 🥤 🕹 🔨 ⚒ 🛠 🧸 🎁 🎈 📓 📔 📒 📕 📗 📘 📙 📚 📖 🖋 🖌 🖍 ✏️ 🔎 ❤️ 🧡 💛 💚 💙 💜 🧑‍🎄 🐈‍⬛ 😺 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦅 🦉 🦇 🐺 🐗 🐴 🦄 🐝 🐛 🦋 🐌 🐞 🐜 🦟 🦗 🕷 🕸 🦂 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦞 🦀 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐅 🐆 🦓 🦍 🦧 🐘 🦛 🦏 🐪 🐫 🦒 🦘 🐃 🐂 🐄 🐎 🐖 🐏 🐑 🦙 🐐 🦌 🐕 🐩 🦮 🐕‍🦺 🐈 🐓 🦃 🦚 🦜 🦢 🦩 🐇 🦝 🦨 🦡 🦦 🦥 🐁 🐀 🦔 🐉 🐲 🌵 🎄 🌲 🌳 🌴 🌱 🌿 ☘️ 🍀 🎍 🎋 🍃 🍁 🍄 🐚 🌾 💐 🌷 🌹 🌺 🌸 🌼 🌻 🌞 🌝 🌛 🌚 🌙 🌎 🌍 🌏 🪐 💫 ⭐️ 🌟 ✨ ⚡️ ☄️ 💥 🔥 🌪 🌈 ☀️ ❄️ ☃️ ⛄️".split(" ");
 const rand = max => Math.floor(Math.random() * max);
 const randRange = (min, max) => rand(max - min) + min;
 const randArr = arr => arr[rand(arr.length)];
 const singleDigits = [2,3,4,5,6,7,8,9];
 const randNoOnes = () => randArr(singleDigits);
 const randRangeByDigits = digits => {
   if (digits === 1) return randNoOnes();
+  if (digits < 1) return randRange(1, digits * 10);
   const start = Math.pow(10, digits - 1);
   const end = Math.pow(10, digits) - 1;
   return randRange(start, end);
@@ -36,4 +38,7 @@ const setUrlParam = param => {
   const url = document.location.href.split("?")[0];
   window.history.pushState({ param: param }, param, url + (param ? "?" + param : ""));
   return false;
-};
+};
+const strXTimes = (str, x) => {
+  return new Array(x).fill().map((a, i) => str + (i > 0 && i % 4 === 0 ? '<br/>' : '')).join("")
+};
diff --git a/src/style.css b/src/style.css
@@ -1,4 +1,4 @@
-
+.text-lg { font-size: 2rem; }
 .page-break { page-break-after: always; }
 body { margin: 1.5rem; }
 .worksheets { font-size: 2rem; }
@@ -27,8 +27,10 @@ img.emoji {
   white-space: nowrap;
 }
 .example .number { display: none; }
+.example .emoji { font-size: 1rem; border-top: 0; }
 .example > td.answer { text-align: left; padding-left:0; }
-.example > td { border: 0; text-align: right; }
+tr.example > td { padding:.75rem; text-align: right; border-top: 0 !important; }
+.example > td { border: 0; text-align: right;  }
 .example > td .equation { width: 4rem !important; }
 .example > td.pb-5 { padding-bottom: 0 !important; padding-top: 0; }
 .example .answer-input.down, .example .answer-input { width: 2rem; }