From 45df16fb2fd810c8ad3c493d2af4fe42de200b91 Mon Sep 17 00:00:00 2001
From: alisolarflare <alisunderstorm@gmail.com>
Date: Fri, 16 Jun 2017 12:24:47 -0600
Subject: [PATCH] Put scenarios into animated accordion

---
 questions.html                              |  31 ++++++++++++++++++--
 resources/questions/images/64pxWhiteBox.png | Bin 0 -> 576 bytes
 resources/questions/scenarios.js            |  30 +++++++++++++++----
 resources/questions/style.css               |   6 ++++
 4 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 resources/questions/images/64pxWhiteBox.png

diff --git a/questions.html b/questions.html
index a714ad9..6b159a7 100644
--- a/questions.html
+++ b/questions.html
@@ -19,7 +19,16 @@
 
     <h1>Our Little Interview</h1>
 
-    <h2>The Who Questions</h2>
+    <nav>
+      <ul>
+        <li><a href="#who">The Who Questions</a></li>
+        <li><a href="#what">The What Questions</a></li>
+        <li><a href="#why">The Why Questions</a></li>
+        <li><a href="#how">The How Questions</a></li>
+      </ul>
+    </nav>
+    
+    <h2 id="who">The Who Questions</h2>
     <p>
       Welcome to the server! It seems like you're interested
       in becoming an official member, so before we accept you
@@ -50,7 +59,7 @@
       <input type="submit">
     </ul>
 
-    <h2>What Questions</h2>
+    <h2 id="what">The What Questions</h2>
     <p>
       Every server has rules, although our rules are a bit more
       straight forward than usual. This section tests your knowledge
@@ -64,7 +73,7 @@
       <li><em>Consider this a basic filter</em></li>
     </ul>
 
-    <h2>Why Questions</h2>
+    <h2 id="why">The Why Questions</h2>
     <p>
       Our server runs on a case by case basis, so naturally,
       instead of testing you on the rules of the land, it'd be
@@ -93,6 +102,22 @@
       developer or post to #feedback on Discord.
     </em>
   </p>
+  <h2 id="how">The How Questions</h2>
+  <p>
+    Congratulations! By filling out this form, you have been given
+    a few basic permissions. Feel free to roam around spawn, view
+    our dynamic map, join our discord channel, and discover our
+    custom coded Civilization View.
+    <br />
+    We'll let you know when the moderators have finished reviewing
+    your application. Till then, have fun!
+  </p>
+  <p id="application-status">Your application is awaiting approval</p>
+
+  <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
+  <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
+  <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
+  <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
 
   </body>
 </html>
diff --git a/resources/questions/images/64pxWhiteBox.png b/resources/questions/images/64pxWhiteBox.png
new file mode 100644
index 0000000000000000000000000000000000000000..afe3fde4f600d3a1e5189ba48e09a5d681cf06a4
GIT binary patch
literal 576
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1SD0tpLGH$#^NA%Cx&(BWL^R}Ea{HEjtmSN
z`?>!lvI6;>1s;*b3=DjSL74G){)!Z!hO3?~jv*P&Z_h`U9ai9B33y+BIah67fef>g
ze$JiCzo#Bl@ZDzr=y_wr-&FqJFN3GtDzK?)Nlw3U`1Hr`oBUcEU%nLy58lqYtp8Vv
z;Mr9NN-o&!316>nQ2ToBeJ2f0AJK=Gr#@*ra7C$p?|}_+2BkduXBNL?^QoO>{c_6D
z2G1pXrn%ndn&I}vyxC`JgXh7Lo5ydl&nQ{*-B%{H!Sn1#m&4atX6V$cXL%=eAmvG2
zM0W{;+U^s#l_D5s#N^fU`NX~B)Lh-DdB9L5Ti@X5jAtr(tji3ZuDH{CU`nEeZmq0=
zsvz6B8>~K+vy9bsnU;kt-}reOL-01E%2!+ovmVU)`M-X_VxM`tm}UgcJ$CLk6HJ}T
zp#ze;8#E6WME$Z#;0o?Lb(h1(aG7PNH_WQao$5>0u&GVIJ)e1U?2}wU9R?q_ckNp}
z*b_E=*ekRnn_=>-$DM8KISpP$yq|4xieYlo%T4`T`3-ts<g?AxVw~(zsoT9z)ZlC8
zyCuP5%**;7wpN<lZCL60uc|T8HenUV{B<hkEX(rueval)ZG5?)vSNLlf5NX7{$dx`
zaQWmf-!W^Ku7U3Tx^gWZ)i?In%HQxDU%XsnYo>jzSXlkG+~2H^*5tj@tc~9WjCBT2
LS3j3^P6<r_`f>QJ

literal 0
HcmV?d00001

diff --git a/resources/questions/scenarios.js b/resources/questions/scenarios.js
index b0480ce..bf0db46 100644
--- a/resources/questions/scenarios.js
+++ b/resources/questions/scenarios.js
@@ -3,9 +3,17 @@ window.onload = function(){
   makeScenario = function(scenario){
 
     //output element, that other elements are attached to
-    let $outputElement = $("<li></li>")
-    $outputElement.attr("id", "scenarios-"+scenario.name);
-
+    let $trueOutputElement = $("<li></li>")
+    $trueOutputElement.attr("id", "scenarios-"+scenario.name);
+    let $outputElement = $("<div class=\"accordion-panel\"></div>")
+    //Determines whether this is a jQuery Accordion
+    const isAccordion = true;
+    if(isAccordion){
+      $controlElement = $("<button></button>");
+      $controlElement.addClass("accordion-control");
+      $controlElement.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>");
@@ -69,12 +77,24 @@ window.onload = function(){
     $outputElement.append($("<br /><br />"));
     $outputElement.append($submitElement);
 
-    return $outputElement;
+    $trueOutputElement.append($outputElement);
+    return $trueOutputElement;
   }
 
   $.getJSON("./resources/questions/scenarios.json", "", function(data){
+    $accordionElement = $("#scenarios");
+    $accordionElement.addClass("accordion")
     for(const scenario of data.scenarios){
-      $("#scenarios").append(makeScenario(scenario));
+      $accordionElement.append(makeScenario(scenario))
     }
+
+    $(".accordion").on('click', '.accordion-control', function(e){
+      e.preventDefault;
+      $(this)
+        .next('.accordion-panel')
+        .not(':animated')
+        .slideToggle();
+    });
   });
+
 }
diff --git a/resources/questions/style.css b/resources/questions/style.css
index 6cb8c28..2fc2b49 100644
--- a/resources/questions/style.css
+++ b/resources/questions/style.css
@@ -5,7 +5,13 @@ li, li p{
 .aside{
   color: rgb(250, 250, 250);
 }
+
+
 #scenarios li p.adult{
   font-family: monospace  ;
   color: rgb(240, 0, 100);
 }
+
+.accordion-panel {
+  display:none;
+}