civ/resources/questions/scenarios.js

110 lines
3 KiB
JavaScript
Raw Normal View History

2017-06-15 19:28:54 +00:00
window.onload = function(){
makeScenario = function(scenario){
2017-06-15 19:28:54 +00:00
2017-06-18 21:21:33 +00:00
//Create output Element
2017-06-19 07:04:02 +00:00
let $trueOutputElement = $("<li></li")
2017-06-18 21:12:56 +00:00
$trueOutputElement.attr("id", `scenarios-${scenario.name}`);
2017-06-19 06:26:27 +00:00
let $outputElement = $("<div class=\"accordion-panel\"></div>");
2017-06-18 21:21:33 +00:00
//Create Control Element
2017-06-16 18:24:47 +00:00
const isAccordion = true;
if(isAccordion){
$controlElement = $("<button></button>")
.addClass("accordion-control")
2017-06-18 21:21:33 +00:00
.append(scenario.name);
2017-06-16 18:24:47 +00:00
$trueOutputElement.append($controlElement);
}
2017-06-18 21:21:33 +00:00
//Mature Content rating
if(scenario.adult == true){
2017-06-19 07:04:02 +00:00
$adultText = $("<p></p>")
.addClass("adult")
2017-06-18 21:21:33 +00:00
.append(`(question for those over the age of 18... or those mature enough)`)
$outputElement.append($adultText);
$outputElement.addClass("adult-scenario");
}
2017-06-15 19:28:54 +00:00
//description
2017-06-18 21:21:33 +00:00
$descriptionElement = $(`<p>${scenario.description}</p>`);
//option list
$optionElement = $("<ul></ul>");
for(option of scenario.options){
//Create radio button
2017-06-18 21:21:33 +00:00
$inputTag = $("<input>")
.attr("type", "radio")
.attr("name", `radio-${scenario.name}`);
//Populate list element
2017-06-18 21:21:33 +00:00
$newOption = $("<li></li>")
.append($inputTag)
.append(option)
$optionElement.append($newOption);
}
//Other Question
if (scenario.other){
2017-06-19 07:04:02 +00:00
$inputTag = $("<input>")
.attr("type", "radio")
.attr("name", `radio-${scenario.name}`);
$otherElement = $("<li>Other... <input type=text></li>")
.prepend($inputTag);
$optionElement.append($otherElement);
}
2017-06-15 19:28:54 +00:00
//Default question, always shows up
$whyElement = $("<p>Why would you choose this awnser?</p>");
//Awnser space for the default element
$whyResponseElement = $("<textArea></textArea>")
$whyResponseElement.attr("placeholder", "Enter response here");
//Populate outputElement
$outputElement.append($descriptionElement);
$outputElement.append($optionElement);
$outputElement.append($whyElement);
$outputElement.append($whyResponseElement);
//Extra Question
if(scenario.question){
2017-06-18 21:21:33 +00:00
$question = $("<p>" + scenario.question + "</p>")
.append($("<textArea></textArea>")
.attr("placeholder", "Enter response here"));
$outputElement.append($question);
}
//Submission button
2017-06-18 21:21:33 +00:00
$submitElement = $("<input>")
.attr("type", "submit")
.append("Submit");
$outputElement.append($("<br /><br />"));
$outputElement.append($submitElement);
2017-06-16 18:24:47 +00:00
$trueOutputElement.append($outputElement);
return $trueOutputElement;
}
2017-06-15 19:28:54 +00:00
$.getJSON("./resources/questions/scenarios.json", "", function(data){
2017-06-16 18:24:47 +00:00
$accordionElement = $("#scenarios");
$accordionElement.addClass("accordion")
for(const scenario of data.scenarios){
2017-06-16 18:24:47 +00:00
$accordionElement.append(makeScenario(scenario))
}
2017-06-16 18:24:47 +00:00
$(".accordion").on('click', '.accordion-control', function(e){
e.preventDefault;
$(this)
.next('.accordion-panel')
.not(':animated')
.slideToggle();
});
});
2017-06-16 18:24:47 +00:00
}