Add a twinning feature to div 2. Move input button to div 1.

data/quiltData.mjs

@@ -20,6 +20,8 @@ let articles = [
     testElement: '<p class="blueBackground">dogfish - dogfish - dogfish - dogfish </p>',
     inputs: [],
     predictedOutputs: [],
+    answerHtml:
+    `<button type="button" class="btn btn-primary btn-sm" onclick="dice.show5()" > five</button>`,
 },
 {
     backgroundColor: '#256',
@@ -33,9 +35,19 @@ let articles = [
     inputs: [[1, 2, 3], [11, 5, 9], [2, 11, 3]],
     predictedOutputs: [[3, 3, 3],  [11, 11, 11], [3, 3, 3]],
     challengeSource: 'https://codingbat.com/prob/p146256',
-
+    answerHtml: `
+    <div class="square-small">
+    <!-- /*==============================*/ -->
+    <form oninput="out1.value = grub(str1.value)">
+        <input class="core" type="textarea" name="str1" /><br>
+        <div class="core stripe"><output name="out1" for="str1">void</output></div>
+    </form>
+    <!-- /*==============================*/ -->
+</div>
+    `
 },
 
 ]
 
 
+console.log('end quiltdata.');

helpers/quilt/immediateOutputFromInput.js

@@ -0,0 +1,6 @@
+let grub = (s)=>{ 
+    let now = new Date();
+    now = now.toLocaleString();
+    console.log(`At {now} here is: {str1}`);
+    return s + "-" + s;
+  } 

helpers/quilt/maxEnd3.mjs

@@ -1,16 +1,18 @@
-window.addEventListener('DOMContentLoaded', (event) => {
+// window.addEventListener('DOMContentLoaded', (event) => {
 //     const btn = document.getElementById('maxEnd3Button');
 //     btn.addEventListener('click', alert('whipping'));
 let dice = {};
-
-dice.roll5 = function() {
+    dice.roll5 = function() {
     return Math.ceil(5 * Math.random());
 }
 
 dice.show5 = function() {
     // dice.el = document.getElementById('diceout');
-    dice.el.innerHTML = dice.roll5();
-    dice.el.style = `color: blue;`
+    console.log( dice.roll5());
 }
 
-});
+console.log('end maxEnd3.mjs.');
+
+// });
+
+// THIS does not NEED ANY SPECIAL WRAPPER; Its scope will be fine that way. The wrapper blocks its scope otherwise.

helpers/quiltMain.js

@@ -1,14 +1,15 @@
-document.addEventListener('DOMContentLoaded', (event) => {
+console.log('quiltmain Line 1.');
+
+window.addEventListener('load', (event) => {
     console.log('DOM fully loaded and parsed');
 
 
 
-console.log('start quiltmain.');
-console.log(articles[1].backgroundColor);
-console.log('Done.');
+console.log('quiltmain Line 8.');
 
 let divs = '';
-singleDiv = '';
+let singleDiv = '';
+let answerHtml = '';
 
 articles.forEach(element => {
 
@@ -18,6 +19,7 @@ articles.forEach(element => {
     `;
 
     singleDiv += `<div id="${element.title}">`;
+    singleDiv += element.answerHtml;
 
     singleDiv += `
     </article>

quilt.html

@@ -112,15 +112,18 @@
     </style>
 
 <script>
-    let dice = {};
-    dice.roll5 = function() {
-    return Math.ceil(5 * Math.random());
-}
-
-dice.show5 = function() {
-    // dice.el = document.getElementById('diceout');
-    console.log( dice.roll5());
-}
+    // TODO
+    // TODO
+    // TODO
+//     let dice = {};
+//     dice.roll5 = function() {
+//     return Math.ceil(5 * Math.random());
+// }
+
+// dice.show5 = function() {
+//     // dice.el = document.getElementById('diceout');
+//     console.log( dice.roll5());
+// }
 </script>
 </head>
 
@@ -161,8 +164,9 @@ <h2 class="text-right gutters">Making things in Madison, Wisconsin: <span class=
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <script src="./data/quiltData.mjs"></script>
     <script src="./helpers/quiltMain.js"></script>
+    <script src="./helpers/quilt/immediateOutputFromInput.js"></script>
     <script src="./helpers/quilt/maxEnd3.mjs"></script>
-    <script src="./helpers/quilt/maxEnd3Div.mjs"></script>
+    <!-- TODO TODO TODO <script src="./helpers/quilt/maxEnd3Div.mjs"></script> -->
 
 
 </body>