我正在尝试使用没有外部库的javascript和HTML制作一个简单的测验系统。但我遇到了一些问题。该脚本提供了错误的解决方案。即使我选择了正确的复选框，它也只输出1个正确答案。我不知道我到底做错了什么，或者是否有其他方法可以做到这一点。
<div class="quizsection">
<button onclick="startQuiz()" id="startQuiz">Start Quiz</button>
<div id="questions"></div>
</div>
<script>
//Create Array with questions and solutions
var allQuestions = [{
question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer: 1
},
{
question: "Does England have a 4th of July?",
choices: ["Yes", "No", "I don't know"],
correctAnswer: 0
},
{
question: "What is Rupert the bear's middle name?",
choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
correctAnswer: 2
},
{
question: " What can you never eat for breakfast? ",
choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
correctAnswer: 0
},
{
question: "If there are three apples and you took two away, how many do you have?",
choices: ["One", "Two", "None"],
correctAnswer: 1
},
{
question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
choices: ["Milk", "Water", "Juice", "Cows can't drink"],
correctAnswer: 1
},
{
question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
correctAnswer: 2
},
{
question: "Can you spell 80 in two letters?",
choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
correctAnswer: 3
},
{
question: "What question must always be answered ''Yes''?",
choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
correctAnswer: 0
},
{
question: "How many sides does a circle have?",
choices: ["The back", "None. It's a circle", "Two", "Four"],
correctAnswer: 2
},
{
question: "What has a tail but no body?",
choices: ["A human", "A coin", "A cloud"],
correctAnswer: 1
},
{
question: "What word in the English language is always spelled incorrectly?",
choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
correctAnswer: 3
},
{
question: "When do you stop at green and go at red?",
choices: ["Watermelon!", "Traffic light!", "Garden"],
correctAnswer: 0
},
{
question: "What rotates but still remains in the same place?",
choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
correctAnswer: 2
},
{
question: "How can you lift an elephant with one hand?",
choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
correctAnswer: 3
}
];
//Function to start the quiz
function startQuiz(){
var i;
var j;
var k;
for(i=0; i<allQuestions.length; i++){
document.getElementById("questions").innerHTML +='<form id="question">Q'+(i+1)+': '+ allQuestions[i].question;
for(j=0; j<allQuestions[i].choices.length; j++){
document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="'+ allQuestions[i].choices[j] +'" id="value4" type="checkbox" />' + allQuestions[i].choices[j] + '<br/>';
}
document.getElementById("questions").innerHTML +='</form><br/><br/>';
}
document.getElementById("questions").innerHTML += '<button onclick="solveQuiz()">Solve Quiz</button>';
}
function solveQuiz(){
var x;
var txt = ' ';
var i = 0;
var correct = 0;
for(i = 0; i < document.forms[i].length;i++) {
x = document.forms[i];
if(x[i].checked) {
correctAnswer = allQuestions[i].correctAnswer;
if(x[i].value == allQuestions[i].choices[correctAnswer]){
correct += 1;
}
}
}
document.getElementById("questions").innerHTML += 'Correct answers: ' + correct;
}
</script>
答案 0 :(得分：5)
const canvas = document.getElementById("result");
const ctx = canvas.getContext('2d');
const width = 300;
const height = 311;
const image = new Image;
image.src = 'http://tosemdinheiro.com/wp-content/uploads/2012/10/carro.jpg';
image.onload = function(){ // wait for the image to load
ctx.canvas.width = width; // set size
ctx.canvas.height = height;
ctx.drawImage(image,0,0,width,height); // draw the image at size
// Dont know why you are doing the following so removed it
//const imageData = res_ctx.getImageData(0, 0, width, height);
// create new image
const imageGif = new Image;
imageGif.src = canvas.toDataURL(); // "image/png" is the default mime type
document.querySelector(".frames").appendChild(imageGif);
}
你可以用上面的块替换你的solveQuiz fn; 最好使用无线电而不是复选框;
function solveQuiz(){
var x;
var txt = ' ';
var i = 0;
var correct = 0;
for(i = 0; i < document.forms.length;i++) {
x = document.forms[i];
for(j = 0; j<x.length; j++){
if(x[j].checked) {
correctAnswer = allQuestions[i].correctAnswer;
if(x[j].value == allQuestions[i].choices[correctAnswer]){
correct += 1;
}
}
}
}
document.getElementById("questions").innerHTML += 'Correct answers: '+ correct;
}
答案 1 :(得分：2)
在您的函数startQuiz中，您生成了具有相同ID的更多表单，并且内部输入对于所有问题始终具有相同的ID。尝试将这些元素的id连接到计数器索引。