100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
|
|
window.onload = function(){
|
|
makeScenario = function(scenario){
|
|
|
|
//output element, that other elements are attached to
|
|
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>");
|
|
$adultText.addClass("adult");
|
|
|
|
$outputElement.append($adultText);
|
|
$outputElement.addClass("adult-scenario");
|
|
}
|
|
|
|
//description
|
|
$descriptionElement = $("<p>" + scenario.description +"</p>");
|
|
|
|
//option list
|
|
$optionElement = $("<ul></ul>");
|
|
for(option of scenario.options){
|
|
//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){
|
|
$otherElement = $("<li>Other... <input type=text></li>");
|
|
$optionElement.append($otherElement);
|
|
}
|
|
|
|
//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){
|
|
$question = $("<p>" + scenario.question + "</p>");
|
|
$questionResponse = $("<textArea></textArea>");
|
|
$questionResponse.attr("placeholder", "Enter response here");
|
|
|
|
$outputElement.append($question);
|
|
$outputElement.append($questionResponse);
|
|
}
|
|
|
|
//Submission button
|
|
$submitElement = $("<input>");
|
|
$submitElement.attr("type", "submit");
|
|
$submitElement.append("Submit");
|
|
$outputElement.append($("<br /><br />"));
|
|
$outputElement.append($submitElement);
|
|
|
|
$trueOutputElement.append($outputElement);
|
|
return $trueOutputElement;
|
|
}
|
|
|
|
$.getJSON("./resources/questions/scenarios.json", "", function(data){
|
|
$accordionElement = $("#scenarios");
|
|
$accordionElement.addClass("accordion")
|
|
for(const scenario of data.scenarios){
|
|
$accordionElement.append(makeScenario(scenario))
|
|
}
|
|
|
|
$(".accordion").on('click', '.accordion-control', function(e){
|
|
e.preventDefault;
|
|
$(this)
|
|
.next('.accordion-panel')
|
|
.not(':animated')
|
|
.slideToggle();
|
|
});
|
|
});
|
|
|
|
}
|