Refactored scenarios.js to be more readable

questions.html

@@ -31,7 +31,7 @@
       <li>Date of Birth<br ./>
       <input type="date" name="" value=""></li>
       <li>Gender<br ./>
-      <input type="date" name="" value=""></li>
+      <input type="text" name="" value=""></li>
       <li>Where did you find our server?<br ./>
       <input type="text" name="" value=""></li>
       <li>What made you interested in us?<br ./>
@@ -46,6 +46,8 @@
       <input type="text" name="" value=""></li>
       <li>Have you heard of /r/place?<br ./>
       <input type="text" name="" value=""></li>
+
+      <input type="submit">
     </ul>
 
     <h2>What Questions</h2>

resources/questions/scenarios.js

@@ -1,44 +1,80 @@
 
 window.onload = function(){
-  addScenario = function(scenario){
+  makeScenario = function(scenario){
 
-    let $liElement = $("<li id=\"scenarios-"+scenario.name+"\"></li>")
+    //output element, that other elements are attached to
+    let $outputElement = $("<li></li>")
+    $outputElement.attr("id", "scenarios-"+scenario.name);
 
+    //Mature Content rating
     if(scenario.adult == true){
-      $adultText = $("<p class=\"adult\">(question for those over the age of 18... or those mature enough)</p>");
+      $adultText = $("<p>(question for those over the age of 18... or those mature enough)</p>");
-      $liElement.append($adultText);
+      $adultText.addClass("adult");
-    }
-    $description = $("<p>" + scenario.description +"</p>");
 
-    $options = $("<ul></ul>");
+      $outputElement.append($adultText);
+      $outputElement.addClass("adult-scenario");
+    }
+
+    //description
+    $descriptionElement = $("<p>" + scenario.description +"</p>");
+
+    //option list
+    $optionElement = $("<ul></ul>");
     for(option of scenario.options){
-      $options.append($("<li><input type=\"radio\" name=\"radio-"+scenario.name+"\">" + option + "</radio></li>"));
+      //Create radio button
+      $inputTag = $("<input>");
+      $inputTag.attr("type", "radio");
+      $inputTag.attr("name", "radio-"+scenario.name);
+
+      //Populate list element
+      $newOption = $("<li></li>");
+      $newOption.append($inputTag);
+      $newOption.append(option);
+      $optionElement.append($newOption);
+
     }
+    //Other Question
     if (scenario.other){
-      $options.append("<li>Other... <input type=text></li>");
+      $otherElement = $("<li>Other... <input type=text></li>");
+      $optionElement.append($otherElement);
     }
 
-    $why = $("<p>Why would you choose this awnser?</p>");
+    //Default question, always shows up
-    $whyResponse = $("<textArea placeholder=\"Enter response here\"></textArea>")
+    $whyElement = $("<p>Why would you choose this awnser?</p>");
 
-    $liElement.append($description);
+    //Awnser space for the default element
-    $liElement.append($options);
+    $whyResponseElement = $("<textArea></textArea>")
-    $liElement.append($why);
+    $whyResponseElement.attr("placeholder", "Enter response here");
-    $liElement.append($whyResponse);
 
+    //Populate outputElement
+    $outputElement.append($descriptionElement);
+    $outputElement.append($optionElement);
+    $outputElement.append($whyElement);
+    $outputElement.append($whyResponseElement);
+
+    //Extra Question
     if(scenario.question){
       $question = $("<p>" + scenario.question + "</p>");
-      $questionResponse = $("<textArea placeholder=\"Enter response here\"></textArea>")
+      $questionResponse = $("<textArea></textArea>");
-      $liElement.append($question);
+      $questionResponse.attr("placeholder", "Enter response here");
-      $liElement.append($questionResponse);
+
+      $outputElement.append($question);
+      $outputElement.append($questionResponse);
     }
 
-    $("#scenarios").append($liElement);
+    //Submission button
+    $submitElement = $("<input>");
+    $submitElement.attr("type", "submit");
+    $submitElement.append("Submit");
+    $outputElement.append($("<br /><br />"));
+    $outputElement.append($submitElement);
+
+    return $outputElement;
   }
 
   $.getJSON("./resources/questions/scenarios.json", "", function(data){
     for(const scenario of data.scenarios){
-      addScenario(scenario);
+      $("#scenarios").append(makeScenario(scenario));
     }
   });
 }

resources/questions/scenarios.json

@@ -1,7 +1,7 @@
 {
   "scenarios": [
     {
-      "name": "base raid",
+      "name": "base-raid",
       "description":
         "You find your base raided: All of your stuff is missing, chests are empty. What would be your first action?",
       "options": [
@@ -15,7 +15,7 @@
       "other": true
     },
     {
-      "name": "Rule 1",
+      "name": "rule-1",
       "description":
         "Someone is breaking Rule #1 and well... being a dick. They are angry about (having their base raided/being harrassed by another member/their family treating them unfairly/griefers destroying their base), and are swearing, insulting people, and generally making chat a negative enviornment. What is your first action?",
       "options":[
@@ -30,7 +30,7 @@
       "other": true
     },
     {
-      "name": "Harrassment",
+      "name": "harrassment",
       "description":
         "One of your friends is upset. Someone has been harrassing them, asking for innapropriate pictures, constantly private messaging them without their consent. <br/>Your friend is visibly uncomfortable, what would be your first action?",
       "options":[