我想创建测验答案

【问题标题】：I want to create quiz我想创建测验
【发布时间】：2020-05-12 05:22:00
【问题描述】：

我想使用 javascript 创建测验。

<!DOCTYPE html>
<html>
<head>
    <script>
        function generateQuiz(questions, quizContainer, resultsContainer, submitButton){
    function showQuestions(questions, quizContainer){
    }
    function showResults(questions, quizContainer, resultsContainer){
        }
    showQuestions(questions, quizContainer);
    submitButton.onclick = function(){
        showResults(questions, quizContainer, resultsContainer);
    }
}
var myQuestions = [
    {
        question: "What is 10/2?",
        answers: {
            a: '3',b: '5',c: '115'
        },
        correctAnswer: 'b'
    },
    {
        question: "What is 30/3?",
        answers: {
            a: '3',b: '5',c: '10'
        },
        correctAnswer: 'c'
    }
];
function showQuestions(questions, quizContainer){
    var output = [];
    var answers;
    for(var i=0; i<questions.length; i++){      
        answers = [];
        for(letter in questions[i].answers){
            answers.push(
                '<label>'
                    + '<input type="radio" name="question'+i+'" value="'+letter+'">'
                    + letter + ': '
                    + questions[i].answers[letter]
                + '</label>'
            );
        }
        output.push(
            '<div class="question">' + questions[i].question + '</div>'
            + '<div class="answers">' + answers.join('') + '</div>'
        );
    }
    quizContainer.innerHTML = output.join('');
}
showQuestions(questions, quizContainer);
function showResults(questions, quizContainer, resultsContainer){
    var answerContainers = quizContainer.querySelectorAll('.answers');
    var userAnswer = '';
    var numCorrect = 0;
    for(var i=0; i<questions.length; i++){
        userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;
        if(userAnswer===questions[i].correctAnswer){
            numCorrect++;
            answerContainers[i].style.color = 'lightgreen';
        }
        else{
            answerContainers[i].style.color = 'red';
        }
    }
    resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
}
submitButton.onclick = function(){
    showResults(questions, quizContainer, resultsContainer);
}
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');
generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
    </script>
</head>
<body>
<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>
</body>
</html>

这是我的 quiz.html 代码，但我无法在浏览器中提问。如何在浏览器中显示问题并获得结果？

如何创建测验，如填空、重新排序问题等......

我还想将此代码放入 Wordpress 自定义插件中。如何在 Wordpress 中为测验创建自定义插件？

【问题讨论】：

也许显示您获得此代码的源网址，因为它不是您自己的，这将是一个开始。测验代码的概念可能超出您的理解水平？
simplestepscode.com/javascript-quiz-tutorial

标签： javascript html jquery wordpress

【解决方案1】：

如何创建测验，如填空、重新排序问题等......

您应该将正确答案存储在 const 变量中，您应该为“空白”变量使用字符串数组，并通过索引/问题编号引用它们：

const answers = [ "Cygnus", "Rainbows", "42" ];
const questions = [ "What spacecraft has NASA launched several times to supply the ISS?", "What is the name of those optical atmospheric phenomena that produce an almost continuous spectrum of light in the sky when sunlight passes through water drops?", "What is the meaning of life itself?" ];

从这里很简单，你知道问题和答案是通过数组索引配对的：

// ans - hypothetical variable that contains the text of the user's answer
let answer0 = (ans.includes(answer[0])) ? "Well done!" : "Wrong!";

或者您可以通过以下方式对答案进行更严格的限制：

let answer0 = (ans === answer[0]) ? "Well done!" : "Wrong!";

关于“重新排序问题”，我将始终使用数组，但将 const 正确数组与用户/玩家答案数组进行比较。

【讨论】：