Javascript quiz errors. Quiz questions no longer displaying

Issue

I am working on a javascript, html based quiz for a uni project. I have to rework it as it was not responsive as i put it all on a single page that was 200% width and used current tags and opacity to hide and display the quiz. I have remade it to 2 pages, index and quiz pages. I haven't started on the media queries just trying to get it working, i cant use bootstrap as well as i made this around 6 months ago. There are no console errors, or anything that sticks out.

Preview working code on jsfiddle

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; i < question.length; i++) {
        question[i].setAttribute('onclick', 'questionSelected(this)');
    }
}

// Function to display correct or incorrect answer selected
function questionSelected(answer) {
    let userAnswer = answer.textContent;
    let correctAnswer = questions[questionCount].answer;
    let allQuestions = quizQuestions.children.length;

    if (userAnswer === correctAnswer) {
        answer.classList.add('correct');
        userScore += 1;
        headerScore();
    } else {

        answer.classList.add('incorrect');
        for (let i = 0; i < allQuestions; i++) {
            if (quizQuestions.children[i].textContent == correctAnswer) {
                quizQuestions.children[i].setAttribute('class', 'question correct');
            }
        }
    }
    // Add disable tag for question childeren
    for (let i = 0; i < allQuestions; i++) {
        quizQuestions.children[i].classList.add('disabled');
    }

    nextBtn.classList.add('current');
}

const nextBtn = document.querySelector('.next-btn');

// Next question button
nextBtn.onclick = () => {
    if (questionCount < questions.length - 1) {
        questionCount++;
        showQuestions(questionCount);
        questionNumb++;
        quizCounter(questionNumb);
        nextBtn.classList.remove('current');
    } else {
        showResultBox();
    }
};

// Function to count quiz question
function quizCounter(i) {
    const quizTotal = document.querySelector('.quiz-total');
    quizTotal.textContent = `${i} of ${questions.length} Questions`;
}

// Function to display user score in header
function headerScore() {
    const headerScoreText = document.querySelector('.header-score');
    headerScoreText.textContent = `Score ${userScore} / ${questions.length}`;
}

// Function to display user score in results
function showResultBox() {
    quizBox.classList.remove('current');
    resultBox.classList.add('current');

    const scoreText = document.querySelector('.score-text');
    scoreText.textContent = `You Scored ${userScore} Out Of ${questions.length}`;
}

HTML CODE

<!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 questions -->
<script defer src="assets/js/questions.js"></script>
<!-- Main script code for quiz -->
<script defer src="assets/js/script.js"></script>

</html>

Example of questions array

let questions = [{
    numb: 1,
    question: 'When squatting which muscle is not used?',
    answer: 'D. Biceps',
    options: [
        'A. Glutes',
        'B. Quads',
        'C. Hamstrings',
        'D. Biceps',
    ]
},
{
    numb: 2,
    question: 'Which exercise targets the lats when working out?',
    answer: 'D. Cable Pull Down',
    options: [
        'A. Hyperextensions',
        'B. Overhead Press',
        'C. Box Squats',
        'D. Cable Pull Down',
    ]
},

Originally the html was all on a single page, it was set to 200% and used current/active tags along with transitions to hide the quiz part. then onclick button it would hide the info page and then the quiz would slide over and user can fill out the 5 questions and would provide a score and option to try again, which would reset the score and allow user to start again. all the questions are listen in questions.js and shown a preview about.

The code before would add itself and then after each question click next and then it would display the next. I know there are probably better ways to make a quiz app but I'm seeing if that if its best to rewrite the quiz functions and start again or try to make this work.

Solution

You will need to call showQuestions and pass the index of the question you want to show, like

showQuestions(0);

You also need to have questions in the first place, so let's define them:

let questions = [
    {
       options: ["a", "b", "c", "d"],
       numb: 1,
       question: "huh?"
    },
    {
       options: ["aa", "bb", "cc", "dd"],
       numb: 2,
       question: "huhhuhu?"
    },
    {
       options: ["aaa", "bbb", "ccc", "ddd"],
       numb: 3,
       question: "com' on, man?"
    },
];

The above is just dummy data, it's your responsibility to make sure those values are proper. But from the way things are used, we can see that questions must be an array, whose elements are objects and each such objects have an options array as a field, a numb field representing the question number to be displayed and a question text. I have modified only your Javascript to this:

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');

let questions = [
    {
       options: ["a", "b", "c", "d"],
       numb: 1,
       question: "huh?"
    },
    {
       options: ["aa", "bb", "cc", "dd"],
       numb: 2,
       question: "huhhuhu?"
    },
    {
       options: ["aaa", "bbb", "ccc", "ddd"],
       numb: 3,
       question: "com' on, man?"
    },
];

// 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; i < question.length; i++) {
        question[i].setAttribute('onclick', 'questionSelected(this)');
    }
}

// Function to display correct or incorrect answer selected
function questionSelected(answer) {
    let userAnswer = answer.textContent;
    let correctAnswer = questions[questionCount].answer;
    let allQuestions = quizQuestions.children.length;

    if (userAnswer === correctAnswer) {
        answer.classList.add('correct');
        userScore += 1;
        headerScore();
    } else {

        answer.classList.add('incorrect');
        for (let i = 0; i < allQuestions; i++) {
            if (quizQuestions.children[i].textContent == correctAnswer) {
                quizQuestions.children[i].setAttribute('class', 'question correct');
            }
        }
    }
    // Add disable tag for question childeren
    for (let i = 0; i < allQuestions; i++) {
        quizQuestions.children[i].classList.add('disabled');
    }

    nextBtn.classList.add('current');
}

const nextBtn = document.querySelector('.next-btn');

// Next question button
nextBtn.onclick = () => {
    if (questionCount < questions.length - 1) {
        questionCount++;
        showQuestions(questionCount);
        questionNumb++;
        quizCounter(questionNumb);
        nextBtn.classList.remove('current');
    } else {
        showResultBox();
    }
};

// Function to count quiz question
function quizCounter(i) {
    const quizTotal = document.querySelector('.quiz-total');
    quizTotal.textContent = `${i} of ${questions.length} Questions`;
}

// Function to display user score in header
function headerScore() {
    const headerScoreText = document.querySelector('.header-score');
    headerScoreText.textContent = `Score ${userScore} / ${questions.length}`;
}

// Function to display user score in results
function showResultBox() {
    quizBox.classList.remove('current');
    resultBox.classList.add('current');

    const scoreText = document.querySelector('.score-text');
    scoreText.textContent = `You Scored ${userScore} Out Of ${questions.length}`;
}

showQuestions(0);

Fiddle: https://jsfiddle.net/0bze513t/1/

And this is how it looks alike to me:

Answered By - Lajos Arpad