我正在为一个大学项目做一个基于JavaScript，html的测验。我不得不重新制作它，因为它没有响应，因为我把它放在一个单一的页面上，宽度为200%，使用当前标签和不透明度来隐藏和显示测验。我已经重新制作了2个页面，索引和测验页面。我还没有开始对媒体查询，只是想让它工作，我不能像6个月前做的那样好地使用 Bootstrap 。没有控制台错误，也没有任何突出的地方。
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代码

<!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>

型
问题数组示例

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',
    ]
},

型
最初的html都在一个页面上，它被设置为200%，并使用当前/活动标签沿着与过渡隐藏测验部分.然后onclick按钮，它会隐藏信息页面，然后测验会滑过，用户可以填写5个问题，并会提供一个分数和选项再试一次，这将重置分数并允许用户重新开始.所有的问题都在questions.js中收听并显示预览.
之前的代码会添加自己，然后在每个问题后单击下一步，然后它会显示下一个。我知道可能有更好的方法来制作一个测验应用程序，但我正在考虑是否最好重写测验功能并重新开始或尝试使其工作。