Quiz App

JS quiz app for school project

by djcave

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">
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <title>InPhysical Quiz</title>
</head>

<body>
    <section class="quiz-section">
        <!-- Quiz Box holds code for each question -->
        <div class="quiz-box">
            <!-- Page Header -->
            <h2>InPhysical Quiz!</h2>
            <!-- Quiz Title -->
            <div class="quiz-header">
                <span>Fitness and Exercise Quiz</span>
                <!-- Heading score for the quiz -->
                <span class="header-score">Score 0 / 5</span>
            </div>
            <!-- Quiz question -->
            <h2 class="question-title">When squatting which muscle is not used?</h2>
            <!-- Div Class holding quiz question answers -->
            <div class="quiz-questions"></div>
            <!-- Quiz Footer -->
            <div class="quiz-footer">
                <!-- Quiz Question counter -->
                <span class="quiz-total">1 of 5 Questions</span>
                <!-- Next button for nex quiz question -->
                <button class="next-btn">Next</button>
            </div>
        </div>
        <!-- HTML for quiz results -->
        <div class="result-box">
            <!-- Quiz result title -->
            <h2>Quiz Results!</h2>
            <!-- Quiz results container -->
            <div class="results-container">
                <!-- Shows user score -->
                <span class="score-text">You Scored 0 Out Of 5</span>
            </div>
            <!-- Try again and Home buttom for user -->
            <div class="buttons">
                <button class="try-again-btn">Try Again!</button>
                <button class="home-button">Home</button>
            </div>
        </div>
    </section>
</body>
<!-- Script link for quiz...

CSS

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
 body{
     font-family: 'Outfit', sans-serif;
     color: #f5f5f5;
     background: #17181A;
     margin: 0;
     padding: 0;
     overflow: hidden;
}
/* Main css to hold image background */
 .main{
     background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0, 0, 0, .6)), url("../images/background-image.jpg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     transition: .25s ease;
     height: 100vh;
}
/* Add current tag for js to blur background */
 .main.current{
     filter: blur(1rem);
}
/* Quiz container for overflow display */
 .quiz-container{
     display: flex;
     height: 100%;
     width: 100%;
}
/* Title for display page */
 .cover-container h1{
     font-size: 5rem;
     color: #f5f5f5;
     margin-bottom: 2.5rem;
     text-shadow: 2px 2px 2px black;
     margin: 0;
}
/* Container box for quiz display */
 .cover-container{
     width: 100%;
     align-items: center;
     justify-content: center;
     display: flex;
     margin: 0 auto;
}
/* Colum display */
 .quiz-colum{
     display:flex;
     flex-direction: column;
}
/* Center items in quiz */
 .quiz-center{
     justify-content: center;
     align-items: center;
}
/* Start quiz button */
 .quiz-btn{
     background-color: #007DA7;
     color: #f5f5f5;
     width: 17.5rem;
     text-align: center;
     text-decoration: none;
     font-size: 1.5rem;
     margin-bottom: 1rem;
     padding: 1.5rem 0;
     border-radius: 1rem;
     text-shadow: 2px 2px 2px black;
     letter-spacing: 0.1rem;
     border: 2px solid #f5f5f5;
}
/* Start button hover over button */
 .quiz-btn:hover{
     box-shadow: 0 0 15px #f5f5f5;
     cursor: pointer;
     transition: transform 200ms;
     transform: scale(1.05);
}
/* Display page welcome text */
 .cover-container p{
     color: #f5f5f5;
     text-align: center;
     width: 50%;
     letter-spacing: 0.1rem;
    ...

JavaScript

const continueBtn = document.querySelector('.continue-btn');
const quizSection = document.querySelector('.quiz-section');
const quizBox = document.querySelector('.quiz-box');
const resultBox = document.querySelector('.result-box');
const tryAgainBtn = document.querySelector('.try-again-btn');
const homeBtn = document.querySelector('.home-button');

// Try again onclick current tag target and reset counters for user to try quiz again
tryAgainBtn.onclick = () => {
    quizBox.classList.add('current');
    nextBtn.classList.remove('current');
    resultBox.classList.remove('current');

    questionCount = 0;
    questionNumb = 1;
    userScore = 0;
    showQuestions(questionCount);
    quizCounter(questionNumb);
    headerScore();
};

// Homepage button targetting for current tag
homeBtn.onclick = () => {
    quizSection.classList.remove('current');
    nextBtn.classList.remove('current');
    resultBox.classList.remove('current');

    questionCount = 0;
    questionNumb = 1;
    userScore = 0;
    showQuestions(questionCount);
    quizCounter(questionNumb);
};

// Display Question counter as 0
let questionCount = 0;
// Display Number of Questions Beggining with 1
let questionNumb = 1;
// Display user score as begginer 0
let userScore = 0;

const quizQuestions = document.querySelector('.quiz-questions');

// Function to show each question and targets array in questions.js
function showQuestions(i) {
    const questionText = document.querySelector('.question-title');
    questionText.textContent = `${questions[i].numb}. ${questions[i].question}`;

    let quizTag = `<div class="question"><span>${questions[i].options[0]}</span></div>
    <div class="question"><span>${questions[i].options[1]}</span></div>
    <div class="question"><span>${questions[i].options[2]}</span></div>
    <div class="question"><span>${questions[i].options[3]}</span></div>`;

    quizQuestions.innerHTML = quizTag;

    const question = document.querySelectorAll('.question');
    for (let i = 0;...