Javascript 测验错误。测验问题不再显示

问题描述 投票：0回答：1

我正在为一个大学项目开发一个基于 javascript、html 的测验。我必须重新设计它，因为它没有响应，因为我将所有内容放在宽度为 200% 的单个页面上，并使用当前标签和不透明度来隐藏和显示测验。我把它改成了两页，索引页和测验页。我还没有开始媒体查询，只是想让它工作，我不能使用引导程序，就像我大约 6 个月前做的那样。没有控制台错误或任何突出的问题。

在 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% 并使用当前/活动标签以及过渡来隐藏测验部分。然后单击按钮，它将隐藏信息页面，然后测验将滑过，用户可以填写 5 个问题，并提供分数和重试选项，这将重置分数并允许用户重新开始。所有问题都在 questions.js 中收听并显示预览。

之前的代码会添加自身，然后在每个问题之后单击“下一步”，然后它会显示下一个。我知道可能有更好的方法来制作测验应用程序，但我正在看看是否最好重写测验功能并重新开始或尝试使其工作。

javascript html css function javascript-objects
1个回答
0
投票

您需要致电

showQuestions
并传递您想要显示的问题的索引，例如

showQuestions(0);

首先您还需要有 

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?"
    },
];

以上只是虚拟数据，您有责任确保这些值正确。但从使用方式来看，

questions
一定是一个数组，其元素是对象，每个对象都有一个
options
数组作为字段，
numb
字段代表要显示的题号和问题文本。我只修改了你的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');

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

小提琴：https://jsfiddle.net/0bze513t/1/

这对我来说是这样的：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.