Quiz App
Category: HTML
Questions Count:
* {
box-sizing: border-box;
}
body {
font-family: Tahoma, Arial;
}
.quiz-app {
margin: 20px auto;
width: 800px;
background-color: #f8f8f8;
padding: 15px;
}
.quiz-app .quiz-info {
display: flex;
background-color: #fff;
padding: 20px;
}
.quiz-app .quiz-info .category {
flex: 1;
}
.quiz-app .quiz-info .count {
flex: 1;
text-align: right;
}
.quiz-app .quiz-area {
background-color: #fff;
padding: 20px;
margin-top: 15px;
}
.quiz-app .quiz-area h2 {
margin: 0;
}
.quiz-app .answers-area {
background-color: #fff;
padding: 0 20px 20px;
}
.quiz-app .answers-area .answer {
background-color: #f9f9f9;
padding: 15px;
}
.quiz-app .answers-area .answer:not(:last-child) {
border-bottom: 1px solid #dfdfdf;
}
.quiz-app .answers-area .answer input[type="Radio"]:checked + label {
color: #0075ff;
}
.quiz-app .answers-area .answer label {
cursor: pointer;
font-weight: bold;
color: #777;
font-size: 14px;
margin-left: 5px;
position: relative;
top: -1px;
}
.quiz-app .submit-button {
background-color: #0075ff;
display: block;
width: 100%;
padding: 15px;
border: none;
color: #fff;
font-weight: bold;
font-size: 18px;
cursor: pointer;
border-radius: 6px;
margin: 20px auto;
}
.quiz-app .submit-button:focus {
outline: none;
}
.quiz-app .bullets {
border-top: 1px solid #dfdfdf;
background-color: #fff;
display: flex;
padding: 20px;
}
.quiz-app .bullets .spans {
flex: 1;
display: flex;
}
.quiz-app .bullets .spans span {
width: 20px;
height: 20px;
background-color: #ddd;
margin-right: 5px;
border-radius: 50%;
}
.quiz-app .bullets .spans span.on {
background-color: #0075ff;
}
.quiz-app .results span {
font-weight: bold;
}
.quiz-app .results span.bad {
color: #dc0a0a;
}
.quiz-app .results span.good {
color: #009688;
}
.quiz-app .results span.perfect {
color: #0075ff;
}
// Select Elements
let countSpan = document.querySelector(".count span");
let bullets = document.querySelector(".bullets");
let bulletsSpanContainer = document.querySelector(".bullets .spans");
let quizArea = document.querySelector(".quiz-area");
let answersArea = document.querySelector(".answers-area");
let submitButton = document.querySelector(".submit-button");
let resultsContainer = document.querySelector(".results");
let countdownElement = document.querySelector(".countdown");
// Set Options
let currentIndex = 0;
let rightAnswers = 0;
let countdownInterval;
function getQuestions() {
let myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
let questionsObject = JSON.parse(this.responseText);
let qCount = questionsObject.length;
// Create Bullets + Set Questions Count
createBullets(qCount);
// Add Question Data
addQuestionData(questionsObject[currentIndex], qCount);
// Start CountDown
countdown(3, qCount);
// Click On Submit
submitButton.onclick = () => {
// Get Right Answer
let theRightAnswer = questionsObject[currentIndex].right_answer;
// Increase Index
currentIndex++;
// Check The Answer
checkAnswer(theRightAnswer, qCount);
// Remove Previous Question
quizArea.innerHTML = "";
answersArea.innerHTML = "";
// Add Question Data
addQuestionData(questionsObject[currentIndex], qCount);
// Handle Bullets Class
handleBullets();
// Start CountDown
clearInterval(countdownInterval);
countdown(3, qCount);
// Show Results
showResults(qCount);
};
}
};
myRequest.open("GET", "html_questions.json", true);
myRequest.send();
}
getQuestions();
function createBullets(num) {
countSpan.innerHTML = num;
// Create Spans
for (let i = 0; i < num; i++) {
// Create Bullet
let theBullet = document.createElement("span");
// Check If Its First Span
if (i === 0) {
theBullet.className = "on";
}
// Append Bullets To Main Bullet Container
bulletsSpanContainer.appendChild(theBullet);
}
}
function addQuestionData(obj, count) {
if (currentIndex < count) {
// Create H2 Question Title
let questionTitle = document.createElement("h2");
// Create Question Text
let questionText = document.createTextNode(obj["title"]);
// Append Text To H2
questionTitle.appendChild(questionText);
// Append The H2 To The Quiz Area
quizArea.appendChild(questionTitle);
// Create The Answers
for (let i = 1; i <= 4; i++) {
// Create Main Answer Div
let mainDiv = document.createElement("div");
// Add Class To Main Div
mainDiv.className = "answer";
// Create Radio Input
let radioInput = document.createElement("input");
// Add Type + Name + Id + Data-Attribute
radioInput.name = "question";
radioInput.type = "radio";
radioInput.id = `answer_${i}`;
radioInput.dataset.answer = obj[`answer_${i}`];
// Make First Option Selected
if (i === 1) {
radioInput.checked = true;
}
// Create Label
let theLabel = document.createElement("label");
// Add For Attribute
theLabel.htmlFor = `answer_${i}`;
// Create Label Text
let theLabelText = document.createTextNode(obj[`answer_${i}`]);
// Add The Text To Label
theLabel.appendChild(theLabelText);
// Add Input + Label To Main Div
mainDiv.appendChild(radioInput);
mainDiv.appendChild(theLabel);
// Append All Divs To Answers Area
answersArea.appendChild(mainDiv);
}
}
}
function checkAnswer(rAnswer, count) {
let answers = document.getElementsByName("question");
let theChoosenAnswer;
for (let i = 0; i < answers.length; i++) {
if (answers[i].checked) {
theChoosenAnswer = answers[i].dataset.answer;
}
}
if (rAnswer === theChoosenAnswer) {
rightAnswers++;
}
}
function handleBullets() {
let bulletsSpans = document.querySelectorAll(".bullets .spans span");
let arrayOfSpans = Array.from(bulletsSpans);
arrayOfSpans.forEach((span, index) => {
if (currentIndex === index) {
span.className = "on";
}
});
}
function showResults(count) {
let theResults;
if (currentIndex === count) {
quizArea.remove();
answersArea.remove();
submitButton.remove();
bullets.remove();
if (rightAnswers > count / 2 && rightAnswers < count) {
theResults = `
Good, ${rightAnswers} From ${count}`;
} else if (rightAnswers === count) {
theResults = `
Perfect, All Answers Is Good`;
} else {
theResults = `
Bad, ${rightAnswers} From ${count}`;
}
resultsContainer.innerHTML = theResults;
resultsContainer.style.padding = "10px";
resultsContainer.style.backgroundColor = "white";
resultsContainer.style.marginTop = "10px";
}
}
function countdown(duration, count) {
if (currentIndex < count) {
let minutes, seconds;
countdownInterval = setInterval(function () {
minutes = parseInt(duration / 60);
seconds = parseInt(duration % 60);
minutes = minutes < 10 ? `0${minutes}` : minutes;
seconds = seconds < 10 ? `0${seconds}` : seconds;
countdownElement.innerHTML = `${minutes}:${seconds}`;
if (--duration < 0) {
clearInterval(countdownInterval);
submitButton.click();
}
}, 1000);
}
}
Commentaires
Enregistrer un commentaire