264 lines
7.8 KiB
HTML
264 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Quiz</title>
|
|
|
|
<style>
|
|
body {
|
|
font-family: sf pro text, -apple-system, BlinkMacSystemFont, Roboto,
|
|
segoe ui, Helvetica, Arial, sans-serif, apple color emoji,
|
|
segoe ui emoji, segoe ui symbol;
|
|
font-weight: 400;
|
|
line-height: 22.4px;
|
|
font-size: 16px;
|
|
}
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
ul,
|
|
ol {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
code {
|
|
background-color: #fff;
|
|
border: 1px solid #d1d7dc;
|
|
color: #b4690e;
|
|
font-size: 90%;
|
|
padding: 0.2rem 0.4rem;
|
|
}
|
|
.quiz-content {
|
|
padding: 2.4rem;
|
|
word-break: break-word;
|
|
max-width: 86rem;
|
|
margin: 0 auto;
|
|
}
|
|
.quiz-container {
|
|
margin: 0 auto;
|
|
max-width: 84rem;
|
|
padding: 0;
|
|
}
|
|
.question {
|
|
margin-bottom: 5rem;
|
|
}
|
|
.question span {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
.question-prompt {
|
|
margin-top: 0.8rem;
|
|
font-weight: 700;
|
|
}
|
|
.question-answer {
|
|
margin-top: 1.6rem;
|
|
padding-left: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.question-answer label {
|
|
max-width: 80rem;
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: flex;
|
|
min-width: 18rem;
|
|
border: solid #1c1d1f 2px;
|
|
}
|
|
.question-answer div {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
.question-answer div:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.question-answer input {
|
|
display: none;
|
|
}
|
|
.question-answer span {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-right: 1.6rem;
|
|
top: 0;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
border: 0.2rem solid #1c1d1f;
|
|
position: relative;
|
|
}
|
|
.selected {
|
|
background: #1c1d1f;
|
|
box-shadow: 0 0 0 0.4rem #fff inset;
|
|
}
|
|
.score {
|
|
position: fixed;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onload="main()">
|
|
<div id="score" class="score">
|
|
<span>Score: N/A of N/A</span>
|
|
</div>
|
|
<div id="quiz-container" class="quiz-content"></div>
|
|
|
|
<script>
|
|
const quizData = __data_placeholder__;
|
|
var correct = 0;
|
|
var total = 0;
|
|
const questionData = quizData.questions
|
|
const passPercent = quizData.pass_percent
|
|
|
|
function main() {
|
|
total = questionData.length;
|
|
|
|
var questions = [];
|
|
for (var i = 0; i < questionData.length; i++) {
|
|
var question = questionData[i];
|
|
var questionText = question.prompt.question;
|
|
var answers = question.prompt.answers;
|
|
var correctAnswer = question.correct_response[0];
|
|
var correctAnswerText = answers[correctAnswer.charCodeAt(0) - 97];
|
|
var questionObj = {
|
|
question: questionText,
|
|
correctAnswer: correctAnswerText,
|
|
answers: answers,
|
|
id: question.id,
|
|
};
|
|
questions.push(questionObj);
|
|
}
|
|
|
|
updateScore();
|
|
|
|
// display the questions
|
|
var questionsContainer = document.getElementById("quiz-container");
|
|
for (var i = 0; i < questions.length; i++) {
|
|
var question = questions[i];
|
|
var questionElement = document.createElement("form");
|
|
questionElement.className = "question";
|
|
questionElement.innerHTML =
|
|
"<span>Question " +
|
|
(i + 1) +
|
|
":</span>" +
|
|
'<div class="question-prompt">' +
|
|
question.question +
|
|
"</div>";
|
|
questionElement.id = question.id;
|
|
questionElement.classList.add("quiz-container");
|
|
var answersElement = document.createElement("ul");
|
|
answersElement.className = "answers";
|
|
for (var j = 0; j < question.answers.length; j++) {
|
|
var answer = question.answers[j];
|
|
var answerElement = document.createElement("li");
|
|
answerElement.className = "answer";
|
|
answerElement.innerHTML =
|
|
'<label for="input-' +
|
|
question.id +
|
|
"-" +
|
|
j +
|
|
'"><div onclick="select(' +
|
|
question.id +
|
|
", " +
|
|
j +
|
|
')"><span></span><input id="input-' +
|
|
question.id +
|
|
"-" +
|
|
j +
|
|
'" type="radio" name="question' +
|
|
i +
|
|
'" value="' +
|
|
j +
|
|
'">' +
|
|
answer +
|
|
"</input></div></label>";
|
|
answerElement.classList.add("question-answer");
|
|
answersElement.appendChild(answerElement);
|
|
}
|
|
|
|
questionElement.appendChild(answersElement);
|
|
|
|
// add a submit button
|
|
var submitButton = document.createElement("button");
|
|
submitButton.className = "submit";
|
|
submitButton.innerHTML = "Submit";
|
|
submitButton.classList.add("submit-button");
|
|
|
|
submitButton.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
var questionElement = e.target.parentElement;
|
|
var questionId = questionElement.id;
|
|
var question = questions.filter(function (q) {
|
|
return q.id == questionId;
|
|
})[0];
|
|
|
|
// set the border color of all answers to black
|
|
var answers = questionElement.getElementsByClassName("answer");
|
|
for (var i = 0; i < answers.length; i++) {
|
|
console.log(answers[i]);
|
|
answers[i].children[0].style.borderColor = "#1c1d1f";
|
|
}
|
|
|
|
var answer = questionElement.querySelector(
|
|
'input[type="radio"]:checked'
|
|
);
|
|
if (answer) {
|
|
var answerIndex = answer.value;
|
|
var answerText = question.answers[answerIndex];
|
|
if (answerText == question.correctAnswer) {
|
|
answer.parentElement.parentElement.style.borderColor =
|
|
"limegreen";
|
|
// alert("Correct!");
|
|
correct++;
|
|
updateScore();
|
|
} else {
|
|
answer.parentElement.parentElement.style.borderColor = "red";
|
|
// alert("Incorrect!");
|
|
}
|
|
} else {
|
|
alert("Please select an answer.");
|
|
}
|
|
});
|
|
|
|
// add button
|
|
questionElement.appendChild(submitButton);
|
|
|
|
questionsContainer.appendChild(questionElement);
|
|
}
|
|
}
|
|
|
|
function select(question, answer) {
|
|
var questionElement = document.getElementById(question);
|
|
var answers = questionElement.getElementsByClassName("answer");
|
|
for (var i = 0; i < answers.length; i++) {
|
|
var span = answers[i].children[0].children[0].children[0];
|
|
var input = answers[i].children[0].children[0].children[1];
|
|
span.classList.remove("selected");
|
|
input.checked = false;
|
|
}
|
|
var span = answers[answer].children[0].children[0].children[0];
|
|
var input = answers[answer].children[0].children[0].children[1];
|
|
span.classList.add("selected");
|
|
input.checked = true;
|
|
}
|
|
|
|
function updateScore() {
|
|
var scoreElem = document.getElementById("score");
|
|
const score = (correct / total) * 100;
|
|
scoreElem.innerHTML = "Score: " + score + "/" + passPercent + "%";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|