window.onload = function(){ makeScenario = function(scenario){ //Create output Element let $trueOutputElement = $("
  • "); //Create Control Element const isAccordion = true; if(isAccordion){ $controlElement = $("") .addClass("accordion-control") .append(scenario.name); $trueOutputElement.append($controlElement); } //Mature Content rating if(scenario.adult == true){ $adultText = $("

    ") .addClass("adult") .append(`(question for those over the age of 18... or those mature enough)`) $outputElement.append($adultText); $outputElement.addClass("adult-scenario"); } //description $descriptionElement = $(`

    ${scenario.description}

    `); //option list $optionElement = $(""); for(option of scenario.options){ //Create radio button $inputTag = $("") .attr("type", "radio") .attr("name", `radio-${scenario.name}`); //Populate list element $newOption = $("
  • ") .append($inputTag) .append(option) $optionElement.append($newOption); } //Other Question if (scenario.other){ $inputTag = $("") .attr("type", "radio") .attr("name", `radio-${scenario.name}`); $otherElement = $("
  • Other...
  • ") .prepend($inputTag); $optionElement.append($otherElement); } //Default question, always shows up $whyElement = $("

    Why would you choose this awnser?

    "); //Awnser space for the default element $whyResponseElement = $("") $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 = $("

    " + scenario.question + "

    ") .append($("") .attr("placeholder", "Enter response here")); $outputElement.append($question); } //Submission button $submitElement = $("") .attr("type", "submit") .append("Submit"); $outputElement.append($("

    ")); $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(); }); }); }