Javascript 我想创建一个小测验_Javascript_Html_Jquery_Wordpress

Javascript 我想创建一个小测验

javascript html jquery wordpress

Javascript 我想创建一个小测验,javascript,html,jquery,wordpress,Javascript,Html,Jquery,Wordpress,我想使用javascript创建测验 <!DOCTYPE html> <html> <head> <script> function generateQuiz(questions, quizContainer, resultsContainer, submitButton){ function showQuestions(questions, quizContainer){ } function sh

我想使用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>

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

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

此外，我想把这个代码在Wordpress自定义插件。如何在Wordpress中为测验创建自定义插件

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

您应该存储常量变量的正确答案，应该使用一个字符串数组作为空白字符串，并通过索引/问题编号引用它们：

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 correct数组和user/player应答数组。

可能会显示获得此代码的源url，因为它不是您自己的。测验代码中的概念可能超出了您的理解水平？