Add number chart. Move index to separate

jerjou · Sep 2, 2020 · a039864 · a039864
1 parent 678bad2
commit a039864
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 52 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,22 @@
+body {
+  line-height: 1.5em;
+}
+li {
+  margin: 0;
+}
+ul ul {
+  padding-top: 0;
+}
+h2, h3 {
+  border-bottom: 1px solid rgba(0,0,0,.5);
+}
+input[type=number] {
+  width: 5rem;
+  display: inline;
+  font-weight: bold;
+  margin:0;
+  padding: .1rem .5rem;
+}
+label {
+  display: inline;
+}
diff --git a/index.html b/index.html
@@ -5,56 +5,10 @@
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="mercury.css" type="text/css">
+  <link rel="stylesheet" href="index.css" type="text/css">
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-174588210-1"></script>
 <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','UA-174588210-1');</script>
-<style>
-body {
-  line-height: 1.5em;
-}
-li {
-  margin: 0;
-}
-ul ul {
-  padding-top: 0;
-}
-h2, h3 {
-  border-bottom: 1px solid rgba(0,0,0,.5);
-}
-input[type=number] {
-  width: 5rem;
-  display: inline;
-  font-weight: bold;
-  margin:0;
-  padding: .1rem .5rem;
-}
-label {
-  display: inline;
-}
-</style>
-  <script>
-    // Use scroll wheel to change numbers
-    window.addEventListener('wheel', e => {
-      let el = e.target;
-      if (!el.matches('input[type=number]')) return;
-      if (el.step === 'any') return;
-      let numIters = ~~Math.abs(Math.round(e.deltaY));
-      if (e.deltaY < 0) {
-        for (let i = 0; i< numIters; i++) el.stepUp();
-      } else {
-        for (let i = 0; i< numIters; i++) el.stepDown();
-      }
-      e.preventDefault();
-    });
-    window.addEventListener('click', e => {
-      if (e.target.tagName !== 'A') return;
-      let form = e.target.closest('form');
-      if (form) {
-        e.preventDefault();
-        form.action = e.target.href;
-        form.submit();
-      }
-    });
-  </script>
+<script async src="index.js"></script>
 </head>
 <body>
   <ul><h2>My homeschooling toolbox</h2>
@@ -91,6 +45,11 @@
       I found myself explaining how heat works in liquids / gasses a couple times, and felt the lack
       of a visual aid, so I made one.
     </li>
+    <li>
+      <a href="number-chart.html">Number Chart</a>
+      <br />
+      We hung a number chart on the wall similar to this one, but we drew it ourselves.
+    </li>
   </ul>
 
   <ul><h3>Resources</h3><i>Other resources that we use</i>
@@ -113,8 +72,9 @@
       </ul>
     </li>
 
-    <li>Art: <a href="https://www.youtube.com/user/ArtforKidsHub">ArtForKidsHub</a>
-    </li>
+    <li>Math: We're going to try "Singapore Math". For example,
+      <a href="https://archive.org/details/primarymathemati00sing">this textbook</a>.</li>
+    <li>Art: <a href="https://www.youtube.com/user/ArtforKidsHub">ArtForKidsHub</a></li>
 
     <li>Engineering<ul>
         <li><a href="https://www.youtube.com/channel/UCWBkudOTaVbvkCBc0pyZFMA">How it's made</a></li>

diff --git a/index.js b/index.js
@@ -0,0 +1,24 @@
+// Use scroll wheel to change numbers
+window.addEventListener('wheel', e => {
+  let el = e.target;
+  if (!el.matches('input[type=number]')) return;
+  if (el.step === 'any') return;
+  let numIters = ~~Math.abs(Math.round(e.deltaY));
+  if (e.deltaY < 0) {
+    for (let i = 0; i< numIters; i++) el.stepUp();
+  } else {
+    for (let i = 0; i< numIters; i++) el.stepDown();
+  }
+  e.preventDefault();
+});
+
+// Link to pages that have parameters
+window.addEventListener('click', e => {
+  if (e.target.tagName !== 'A') return;
+  let form = e.target.closest('form');
+  if (form) {
+    e.preventDefault();
+    form.action = e.target.href;
+    form.submit();
+  }
+});
diff --git a/math.js b/math.js
@@ -55,23 +55,25 @@ function checkAnswers(e) {
 
 function generateProblems(numProbs, min, max, mix) {
   let form = $el('form', {className: 'problem'});
+  let maxlength = numDigits(max);
 
   for (let i = 0; i < numProbs; i++) {
     let sum = makeSum(min, max, qs.getI('setSize', 2));
     let equation;
     if (Math.random() < mix) {
       equation = $el('label', {innerHTML: `${sum.slice(1).join(' + ')} =`});
-      equation.appendChild($el('input', {solution: sum[0], type:'text'}));
+      equation.appendChild($el('input', {solution: sum[0], type:'text', maxlength: maxlength}));
     } else {
       equation = $el('label', {innerHTML: `${sum.slice(0, -1).join(' &#x2212; ')} =`});
-      equation.appendChild($el('input', {solution: sum[sum.length-1], type:'text'}));
+      equation.appendChild($el('input', {solution: sum[sum.length-1], type:'text', maxlength: maxlength}));
     }
     // Icons for right and wrong
     equation.appendChild($el('i', {className: 'cil-check right'}));
     equation.appendChild($el('i', {className: 'cil-x wrong'}));
 
     form.appendChild(equation);
   }
+  // TODO: use a delegated event handler
   [...form.querySelectorAll('input[type=text]')].forEach(input => {
     input.addEventListener('blur', checkAnswers);
     input.addEventListener('focus', () => input.closest('label').classList.add('active'));

diff --git a/number-chart.html b/number-chart.html
@@ -0,0 +1,30 @@
+<style>
+body {
+  display:grid;
+  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
+}
+.num {
+  font-size: 2rem;
+  padding: 1rem;
+  box-sizing: border-box;
+  border: 1px solid rgba(0,0,0,.5);
+  text-align: center;
+  cursor: default;
+}
+.num:hover {
+  color: green;
+  border-color: green;
+}
+</style>
+<body>
+</body>
+<script>
+  let $el = (t, props) => {
+    let el = document.createElement(t);
+    Object.assign(el, props);
+    return el;
+  };
+  document.body.append(
+    ...[...Array(100).keys()]
+    .map(n => $el('div', {className: 'num', innerText: n})));
+</script>