Put scenarios into animated accordion

This commit is contained in:
alisolarflare 2017-06-16 12:24:47 -06:00
parent 05c0a134b2
commit 45df16fb2f
4 changed files with 59 additions and 8 deletions

View file

@ -19,7 +19,16 @@
<h1>Our Little Interview</h1> <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> <p>
Welcome to the server! It seems like you're interested Welcome to the server! It seems like you're interested
in becoming an official member, so before we accept you in becoming an official member, so before we accept you
@ -50,7 +59,7 @@
<input type="submit"> <input type="submit">
</ul> </ul>
<h2>What Questions</h2> <h2 id="what">The What Questions</h2>
<p> <p>
Every server has rules, although our rules are a bit more Every server has rules, although our rules are a bit more
straight forward than usual. This section tests your knowledge straight forward than usual. This section tests your knowledge
@ -64,7 +73,7 @@
<li><em>Consider this a basic filter</em></li> <li><em>Consider this a basic filter</em></li>
</ul> </ul>
<h2>Why Questions</h2> <h2 id="why">The Why Questions</h2>
<p> <p>
Our server runs on a case by case basis, so naturally, Our server runs on a case by case basis, so naturally,
instead of testing you on the rules of the land, it'd be instead of testing you on the rules of the land, it'd be
@ -93,6 +102,22 @@
developer or post to #feedback on Discord. developer or post to #feedback on Discord.
</em> </em>
</p> </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> </body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

View file

@ -3,9 +3,17 @@ window.onload = function(){
makeScenario = function(scenario){ makeScenario = function(scenario){
//output element, that other elements are attached to //output element, that other elements are attached to
let $outputElement = $("<li></li>") let $trueOutputElement = $("<li></li>")
$outputElement.attr("id", "scenarios-"+scenario.name); $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 //Mature Content rating
if(scenario.adult == true){ if(scenario.adult == true){
$adultText = $("<p>(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>");
@ -69,12 +77,24 @@ window.onload = function(){
$outputElement.append($("<br /><br />")); $outputElement.append($("<br /><br />"));
$outputElement.append($submitElement); $outputElement.append($submitElement);
return $outputElement; $trueOutputElement.append($outputElement);
return $trueOutputElement;
} }
$.getJSON("./resources/questions/scenarios.json", "", function(data){ $.getJSON("./resources/questions/scenarios.json", "", function(data){
$accordionElement = $("#scenarios");
$accordionElement.addClass("accordion")
for(const scenario of data.scenarios){ 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();
}); });
});
} }

View file

@ -5,7 +5,13 @@ li, li p{
.aside{ .aside{
color: rgb(250, 250, 250); color: rgb(250, 250, 250);
} }
#scenarios li p.adult{ #scenarios li p.adult{
font-family: monospace ; font-family: monospace ;
color: rgb(240, 0, 100); color: rgb(240, 0, 100);
} }
.accordion-panel {
display:none;
}