时间戳

首页 > 解决方案 > 如何更改 JavaScript 测验以发出通过和失败消息而不是分数

javascript - 如何更改 JavaScript 测验以发出通过和失败消息而不是分数

问题描述

我创建了一个简单的测验，如下所示：

var myQuestions = [
    {
        question: "Question1 would go here",
        answers: {
            a: 'Yes',
            b: 'No',
        },
        correctAnswer: 'b'
    },
    {
        question: "Question2 would go here",
        answers: {
            a: 'Yes',
            b: 'No',
        },
        correctAnswer: 'b'
    }
];

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');

generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);

function generateQuiz(questions, quizContainer, resultsContainer, submitButton){

    function showQuestions(questions, quizContainer){
        // we'll need a place to store the output and the answer choices
        var output = [];
        var answers;

        // for each question...
        for(var i=0; i<questions.length; i++){
            
            // first reset the list of answers
            answers = [];

            // for each available answer...
            for(letter in questions[i].answers){

                // ...add an html radio button
                answers.push(
                    '<label>'
                        + '<input type="radio" name="question'+i+'" value="'+letter+'">'
                        + questions[i].answers[letter]
                    + '</label>'
                );
            }

            // add this question and its answers to the output
            output.push(
                '<div class="question">' + questions[i].question + '</div>'
                + '<div class="answers">' + answers.join('') + '</div>'
            );
        }

        // finally combine our output list into one string of html and put it on the page
        quizContainer.innerHTML = output.join('');
    }


    function showResults(questions, quizContainer, resultsContainer){
        
        // gather answer containers from our quiz
        var answerContainers = quizContainer.querySelectorAll('.answers');
        
        // keep track of user's answers
        var userAnswer = '';
        var numCorrect = 0;
        
        // for each question...
        for(var i=0; i<questions.length; i++){

            // find selected answer
            userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;
            
            // if answer is correct
            if(userAnswer===questions[i].correctAnswer){
                // add to the number of correct answers
                numCorrect++;
                
                // color the answers green
                answerContainers[i].style.color = 'lightgreen';
            }
            // if answer is wrong or blank
            else{
                // color the answers red
                answerContainers[i].style.color = 'red';
            }
        }

        // show number of correct answers out of total
        resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
    }

    // show questions right away
    showQuestions(questions, quizContainer);
    
    // on submit, show results
    submitButton.onclick = function(){
        showResults(questions, quizContainer, resultsContainer);
    }

}
<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>

但是，我试图让它做三件事：

  1. 我不想显示测验的分数，而是希望为通过显示一条消息，为失败显示一条消息。

  2. 我希望如果所有问题都正确回答，那么它就是通过，否则它就是失败。

  3. 在所有问题都有答案之前，我不希望用户提交测验。

对上述修改的任何帮助将不胜感激。谢谢

标签： javascriptjquery

解决方案

尝试这个：

我正在使用表单的内置required和onsubmit事件html来确保用户回答了所有问题。

如果您需要对此答案做任何其他事情，请发送评论。

var myQuestions = [
    {
        question: "Question1 would go here",
        answers: {
            a: 'Yes',
            b: 'No',
        },
        correctAnswer: 'b'
    },
    {
        question: "Question2 would go here",
        answers: {
            a: 'Yes',
            b: 'No',
        },
        correctAnswer: 'b'
    }
];

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');

generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);

function generateQuiz(questions, quizContainer, resultsContainer, submitButton){

    function showQuestions(questions, quizContainer){
        // we'll need a place to store the output and the answer choices
        var output = [];
        var answers;

        // for each question...
        for(var i=0; i<questions.length; i++){
            
            // first reset the list of answers
            answers = [];

            // for each available answer...
            for(letter in questions[i].answers){

                // ...add an html radio button
                answers.push(
                    '<label>'
                        + '<input type="radio" name="question'+i+'" value="'+letter+'" required="true">'
                        + questions[i].answers[letter]
                    + '</label>'
                );
            }

            // add this question and its answers to the output
            output.push(
                '<div class="question">' + questions[i].question + '</div>'
                + '<div class="answers">' + answers.join('') + '</div>'
            );
        }

        // finally combine our output list into one string of html and put it on the page
        quizContainer.innerHTML = output.join('');
        quizContainer.innerHTML += `<input id="submit" type="submit" value="Get Results">`;
    }


    function showResults(questions, quizContainer, resultsContainer){
    
        
        // gather answer containers from our quiz
        var answerContainers = quizContainer.querySelectorAll('.answers');
        
        // keep track of user's answers
        var userAnswer = '';
        var numCorrect = 0;
        
        // for each question...
        for(var i=0; i<questions.length; i++){

            // find selected answer
            userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;
            
            // if answer is correct
            if(userAnswer===questions[i].correctAnswer){
                // add to the number of correct answers
                numCorrect++;
                
                // color the answers green
                answerContainers[i].style.color = 'lightgreen';
            }
            // if answer is wrong or blank
            else{
                // color the answers red
                answerContainers[i].style.color = 'red';
            }
        }

        // show number of correct answers out of total
        resultsContainer.innerHTML = numCorrect == myQuestions.length ? "Pass" : "Fail"
    }

    // show questions right away
    showQuestions(questions, quizContainer);
  document.querySelector("#quiz").addEventListener("submit", e => {
    showResults(questions, quizContainer, resultsContainer);
  });

}
<form id="quiz" action="javascript:void(0);">
<input id="submit" type="submit" value="Get Results">
</form>

<div id="results"></div>

推荐阅读