Fix the scoping problem of the buttonable function.

data/quiltData.mjs

@@ -1,9 +1,18 @@
 console.log('start quiltdata.');
 
+
+/*****
+Don't arbitrarily edit the title!
+
+It is important that you use the same string for the following three things:
+TITLE & javascriptfile & the id of the div for inserting the solution code
+For example, if the title is maxEnd3, the file is maxEnd3.mjs and the div will be <div id="maxEnd"></div>
+******/
 let articles = [
 {
     backgroundColor: '#493',
     textColor: '#ddf',
+    title: 'Hotdogging',
     question: 'How do you grab a div?',
     strategy: 'GetElementById()!',
     form: '<form><h1>Placeholder</h1><button>click</button></form>',
@@ -15,6 +24,7 @@ let articles = [
 {
     backgroundColor: '#256',
     textColor: '#db5',
+    title: 'maxEnd3',
     question: 'Given an array of ints length 3, figure out which is larger, the first or last element in the array, and set all the other elements to be that value. Return the changed array.',
     strategy: 'GetElementById()!',
     form: '<form><h1>Placeholder</h1><button>click</button></form>',

helpers/quilt/maxEnd3.mjs

@@ -0,0 +1,16 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+//     const btn = document.getElementById('maxEnd3Button');
+//     btn.addEventListener('click', alert('whipping'));
+let dice = {};
+
+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;`
+}
+
+});

helpers/quilt/maxEnd3Div.mjs

@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+
+    let anchor = document.getElementById('maxEnd3');
+    let webform = `
+        <h3>Notice the distribution of results as you repeatedly roll a dice with sides of</h3>
+        <div class="btn-group">
+            <button type="button" class="btn btn-primary btn-sm" onclick="dice.show5()" > five</button>
+            <button type="button" class="btn btn-danger btn-sm" onclick="dice.show7()" > seven</button>
+        </div>
+        <h3 id="diceout" style="color:transparent">null 99</h3>
+
+        `;
+    anchor.innerHTML = webform;
+});

helpers/quilt/test.js

@@ -0,0 +1 @@
+return("we hit a succesful test");

helpers/quiltMain.js

@@ -13,9 +13,12 @@ singleDiv = '';
 articles.forEach(element => {
 
     singleDiv = `<article style="background-color:${element.backgroundColor}; color: ${element.textColor};"><div class='gutters';>
-    <h2 >How\'s this?</h2>
-    <p>The background-color is: ${element.backgroundColor}</p></div>
+    <h2 >${element.title}</h2>
+    <p>Challenge description: ${element.question}</p></div>
     `;
+
+    singleDiv += `<div id="${element.title}">`;
+
     singleDiv += `
     </article>
     `;

quilt.html

@@ -18,15 +18,15 @@
 
             /* For tablets: */
             .gutters {
-            padding-left: 9rem;
-            padding-right: 9rem;
+                padding-left: 9rem;
+                padding-right: 9rem;
             }
         }
 
         @media only screen and (min-width: 1000px) {
             .gutters {
-            padding-left: 19rem;
-            padding-right: 19rem;
+                padding-left: 19rem;
+                padding-right: 19rem;
             }
         }
 
@@ -111,10 +111,17 @@
         }
     </style>
 
-
-    <script src="./data/quiltData.mjs"></script>
-    <script src="./helpers/quiltMain.js"></script>
-
+<script>
+    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>
 
 
@@ -127,12 +134,11 @@ <h1>Let's Go:</h1>
                     <p>Write Javascript!<br>Sharpen the edge!<br>Timebox these activities!</p>
                 </div>
             </div>
-            <div class="cleared"></div>
         </div>
     </header>
 
     <article>
-        <p id="articlesAnchor">lou</p>
+        <p id="articlesAnchor">Install Javascript for proper display.</p>
     </article>
 
     <footer class="card">
@@ -153,6 +159,11 @@ <h2 class="text-right gutters">Making things in Madison, Wisconsin: <span class=
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         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/maxEnd3.mjs"></script>
+    <script src="./helpers/quilt/maxEnd3Div.mjs"></script>
+
 
 </body>