我想创建测验
发布于2023-03-24 16:23 阅读(90) 评论(0) 点赞(30) 收藏(2)
i want to create quiz using 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>
this is my quiz.html code but I can't get questions in the browser. how can shows questions in the browser and get result?
How to create quiz like fill in blanks, reorder question, etc...
also I want to put this code in Wordpress custom plugin. how I create a custom plugin in Wordpress for the quiz?
解决方案
如何创建填空、重新排序问题等测验...
您应该将正确答案存储在 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 正确数组与用户/玩家答案数组进行比较。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/516816/a262374bb5f10e68147c/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力