Add more spacing for long multiplication equations.

README.md

@@ -1,17 +1,27 @@
 # hw-gen
 Generate print-friendly homework worksheets for math practice.
 
-<p align="center"><a href="https://lewdev.github.io/apps/hw-gen/">
+<p style="text-align:center"><a href="https://lewdev.github.io/apps/hw-gen/">
   <img src="https://lewdev.github.io/apps/hw-gen/icons/apple-touch-icon.png"/>
   <br/>
   📝 Math Homework Generator 📝</a>
 </p>
 
-## Features
+# Features
 * 🈚 Free w/no ads
 * 🖨️ Print-friendly
 * 🗝️ Answer key on last page.
-* 📝 19 Worksheet types
+* 📝 Many worksheet types, all randomized for near-infinite iterations 
 * 👨‍💻 Open source
 * 🔢 1-digit equations are all possible equations not including 1.
-* 😀 Random emojis using Twemoji featured on each worksheet in case worksheets mix up.
+* 😀 Emojis using [Twemoji](https://twemoji.twitter.com)
+
+# Next Features
+* Make each number more spaced apart so they align.
+* Top navigation when viewing worksheets (nav pages, toggle answer key, re-randomize)
+* Word Problems
+* Long division
+* Fractions and Decimals
+* Order of Operations
+* Measuring Area, Perimeter, and Volume
+* Measurement conversions

src/js/hw-gen.js

@@ -59,7 +59,7 @@ const HwGen = (() => {
       , worksheetCountSelect = document.getElementById("worksheetCount")
       , hwSet = hwSets[selectedSet]
       , allAnswerKeys = []
-      , { title, count, columns, xSize, ySize, mathSymbol, outputFunc, answerKey, long, useAllPossible1Digit } = hwSet
+      , { title, count, columns, xSize, ySize, mathSymbol, outputFunc, answerKey, long, answerSpace, useAllPossible1Digit } = hwSet
     ;
     worksheetCount = worksheetCountSelect ? parseInt(worksheetCountSelect.value) : 1
     worksheetsDiv.innerHTML = "";
@@ -68,7 +68,7 @@ const HwGen = (() => {
         , output = worksheet.querySelector(".output")
         , arr = generate(xSize, ySize, mathSymbol, count, useAllPossible1Digit)
         , titleDiv = worksheet.querySelector(".title")
-        , outputStr = arr.map((eq, i) => outputFunc(eq, i, columns, long)).join("")
+        , outputStr = arr.map((eq, i) => outputFunc(eq, i, columns, long, answerSpace)).join("")
         , emoji = randArr(emojis)
       ;
       allAnswerKeys.push(`<div class="answer-key-table col-${long ? 6 : 4}">

src/js/hw-sets.js

@@ -1,9 +1,9 @@
-const verticalEq = (eq, i, columns, mathSym, long) => `
+const verticalEq = (eq, i, columns, mathSym, long, answerSpace) => `
   <td class="text-muted number text-right">${i + 1}.)</td>
   <td class="pb-5">
     <div class="equation">${eq.x}</div>
     <div class="equation">${mathSym} ${eq.y}</div>
-    <div class="equation"><input type="text" class="answer-input"/></div>
+    <div class="equation" ${answerSpace ? `style="margin-bottom:${answerSpace}rem;"`:''}><input type="text" class="answer-input"/></div>
   </td>
   ${((i + 1) % columns) === 0 ? `</tr><tr${long ? ' class="long"' : ''}>` : ''}`
   /**
@@ -34,9 +34,8 @@ const verticalEq = (eq, i, columns, mathSym, long) => `
     <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>
+    <td class="text-center align-bottom" style="border-top:0;"><input type="text" class="answer-input down"/></td>
+    <td class="text-center align-bottom" style="border-top:0;"><input type="text" class="answer-input down"/></td>
     ${((i + 1) % 5) === 0 ? `</tr></tbody><div class="page-break"></div><table><tbody><tr>` : '</tr><tr style="border-top: 3px solid gray;">'}`
   /**
    * Solve:
@@ -202,18 +201,18 @@ const hwSets = {
   },
   "multiplication-2-2": {
     title: "Muliplication 2-digit Equations", category: "Multiplication",
-    count: 44, columns: 4, long: true,
+    count: 28, columns: 4, long: true, answerSpace: 6,
     xSize: 2, ySize: 2,
     mathSymbol: "*",
-    outputFunc: (eq, i, columns, long) => verticalEq(eq, i, columns, "&times;", long),
+    outputFunc: (eq, i, columns, long, answerSpace) => verticalEq(eq, i, columns, "&times;", long, answerSpace),
     answerKey: eq => eq.z,
   },
   "multiplication-3": {
     title: "Muliplication 3-digit Equations", category: "Multiplication",
-    count: 44, columns: 4, long: true,
+    count: 24, columns: 4, long: true, answerSpace: 10,
     xSize: 3, ySize: 3,
     mathSymbol: "*",
-    outputFunc: (eq, i, columns, long) => verticalEq(eq, i, columns, "&times;", long),
+    outputFunc: (eq, i, columns, long, answerSpace) => verticalEq(eq, i, columns, "&times;", long, answerSpace),
     answerKey: eq => eq.z,
   },
   "division": {