Cleaned stuff up a bit

resources/questions/scenarios.js

@@ -2,45 +2,48 @@
 window.onload = function(){
   makeScenario = function(scenario){
 
-    //output element, that other elements are attached to
+    //Create output Element
     let $trueOutputElement = $("<li></li>")
     $trueOutputElement.attr("id", `scenarios-${scenario.name}`);
 
-
     let $outputElement = $("<div class=\"accordion-panel\"></div>")
-    //Determines whether this is a jQuery Accordion
+
+    //Create Control Element
     const isAccordion = true;
     if(isAccordion){
       $controlElement = $("<button></button>");
-      $controlElement.addClass("accordion-control");
+        .addClass("accordion-control");
-      $controlElement.append(scenario.name);
+        .append(scenario.name);
+
       $trueOutputElement.append($controlElement);
     }
+
     //Mature Content rating
     if(scenario.adult == true){
-      $adultText = $("<p>(question for those over the age of 18... or those mature enough)</p>");
+      $adultText = $("<p>)</p>");
-      $adultText.addClass("adult");
+        .addClass("adult");
+        .append(`(question for those over the age of 18... or those mature enough)`)
 
       $outputElement.append($adultText);
       $outputElement.addClass("adult-scenario");
     }
 
     //description
-    $descriptionElement = $("<p>" + scenario.description +"</p>");
+    $descriptionElement = $(`<p>${scenario.description}</p>`);
 
     //option list
     $optionElement = $("<ul></ul>");
     for(option of scenario.options){
       //Create radio button
-      $inputTag = $("<input>");
+      $inputTag = $("<input>")
-      $inputTag.attr("type", "radio");
+        .attr("type", "radio")
-      $inputTag.attr("name", `radio-${scenario.name}`);
+        .attr("name", `radio-${scenario.name}`);
 
       //Populate list element
-      $newOption = $("<li></li>");
+      $newOption = $("<li></li>")
-      $newOption.append($inputTag);
+        .append($inputTag)
-      $newOption.append(option);
+        .append(option)
-      $optionElement.append($newOption);
+        .append($newOption);
 
     }
     //Other Question
@@ -64,18 +67,19 @@ window.onload = function(){
 
     //Extra Question
     if(scenario.question){
-      $question = $("<p>" + scenario.question + "</p>");
+      $question = $("<p>" + scenario.question + "</p>")
-      $questionResponse = $("<textArea></textArea>");
+        .append($("<textArea></textArea>")
-      $questionResponse.attr("placeholder", "Enter response here");
+          .attr("placeholder", "Enter response here"));
 
       $outputElement.append($question);
       $outputElement.append($questionResponse);
     }
 
     //Submission button
-    $submitElement = $("<input>");
+    $submitElement = $("<input>")
-    $submitElement.attr("type", "submit");
+      .attr("type", "submit")
-    $submitElement.append("Submit");
+      .append("Submit");
+
     $outputElement.append($("<br /><br />"));
     $outputElement.append($submitElement);
 

resources/spawn/progress-table.js

@@ -1,13 +1,17 @@
 window.onload = function(){
   const addRow = function(building){
+
+    //Populate First table cell: Building Name
     $nameElement = $("<td></td>")
       .attr("id", `${building.id}-progress.name`)
       .append(building.name);
 
+    //Populate table cell: Use
     $useElement = $("<td></td>")
       .attr("id", `${building.id}-progress.use`)
       .append(building.use)
 
+    //Populate table cell: Designed
     $designedElement = $("<td></td>")
       .attr("id", `${building.id}-progress.designed`)
       .addClass("checkboxCell")
@@ -16,6 +20,7 @@ window.onload = function(){
           .attr("id", `${building.id}.designed?`)
           .attr("checked", building.designed));
 
+    //Populate table cell: Started
     $startedElement = $("<td></td>")
       .attr("id", `${building.id}-progress.stated`)
       .addClass("checkboxCell")
@@ -24,6 +29,7 @@ window.onload = function(){
           .attr("id", `${building.id}.started?`)
           .attr("checked", building.started));
 
+    //Populate table cell: Completed
     $completedElement = $("<td></td>")
       .attr("id", `${building.id}-progress.completed`)
       .addClass("checkboxCell")
@@ -32,6 +38,7 @@ window.onload = function(){
         .attr("id", `${building.id}.completed?`)
         .attr("checked", building.completed));
 
+    //Populate table cell: Populated
     $populatedElement = $("<td></td>")
       .attr("id", `${building.id}-progress.populated`)
       .addClass("checkboxCell")
@@ -40,7 +47,7 @@ window.onload = function(){
         .attr("id", `${building.id}.populated?`)
         .attr("checked", building.populated));
 
-
+    //Create entire row, appending all elements
     $outputRow = $("<tr></tr>")
       .attr("id", `${building.id}-progress`)
       .append($nameElement)
@@ -49,6 +56,8 @@ window.onload = function(){
       .append($startedElement)
       .append($completedElement)
       .append($populatedElement);
+
+    //return the entire row
     return $outputRow;
   }
   console.info("loading");