From 7e71d6ef04fd74884f46fdf8bb135a8950452cae Mon Sep 17 00:00:00 2001
From: Lewis Nakao <lewdev@gmail.comm>
Date: Sun, 23 Aug 2020 12:05:22 -1000
Subject: [PATCH] Add more spacing for long multiplication equations.

---
 README.md         | 18 ++++++++++++++----
 src/js/hw-gen.js  |  4 ++--
 src/js/hw-sets.js | 17 ++++++++---------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 5570120..5001296 100644
--- a/README.md
+++ b/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
\ No newline at end of file
diff --git a/src/js/hw-gen.js b/src/js/hw-gen.js
index 620ae6f..1b25763 100644
--- a/src/js/hw-gen.js
+++ b/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}">
diff --git a/src/js/hw-sets.js b/src/js/hw-sets.js
index 407c9ca..596bccf 100644
--- a/src/js/hw-sets.js
+++ b/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": {