我的测验并没有取代之前的问题

Question

I am a beginner coder so the JavaScript code isn't very good.我是一个初学者编码器，所以 JavaScript 代码不是很好。 I am trying to make a math quiz and I have gotten the questions to appear and the next question to appear after I click the quiz button.我正在尝试进行数学测验，并且在单击测验按钮后，我已经得到了问题和下一个问题。 For some reason the next question appears underneath the previous question but I want it to replace the question instead.出于某种原因，下一个问题出现在上一个问题的下方，但我希望它代替该问题。 I have looked over my code numerous times and have asked a couple of my friends who are a bit more experienced and they can't find the problem either.我已经多次查看我的代码，并询问了我的几个更有经验的朋友，他们也找不到问题。

My HTML我的 HTML

<!DOCTYPE html>
<html>
<head>
    <title>Maths Quiz</title>
    <link rel="stylesheet" type="text/css" href="css/mathquiz.css">
</head>
<body>
<div id="quizquestions"></div>


<script type="text/javascript" src="js/mathquiz.js"></script>
</html>

let gameMode = prompt('Which gamemode would you like to play? There is easy, medium or hard.');//This value will be changed in the while loop below depending on the users answers  
let gameDifficulty=0;  //This will get changed. and will tell the program if they are using the easy, medium or hard array
let questionNumber = 0;  // This will be used to display each question without much code
let finishedQuestions = false;  // This will be set to true after all the questions are answered. It will stop the questions from being displayed.
let score = 0;  //this will be used to display their score and help the programm decide which message should be displayed at the end of the game
let currentQuestion;
let optionA;  
let optionB;
let optionC;
let optionD;
let option;
let options;
let box;
let questions = [ //this is my multidimentional array containing all the questions and answers
    [
        ['What is 5+9?', '12', '14', '16', '18', 'B'],//The letter at the end will help me find out if they selected the correct asnwer.
        ['What is 8-4?', '12', '2', '4', '6', 'C'],
        ['What is 9-3?', '6', '12', '27', '3', 'A'],
        ['What is 9+4?', '5', '13', '15', '16', 'B'],
        ['What is 34-9?', '33', '26', '25', '28', 'C'],
        ['What is 18+11?', '30', '27', '29', '32', 'C'],
        ['What is 78-21?', '57', '60', '63', '67', 'A'],
        ['What is 58+13?', '59', '64', '68', '71', 'D']
    ],
    [
        ['What is 5x3?', '10', '12', '15', '18', 'C'],
        ['What is 12/4?', '3', '4', '5', '2', 'A'],
        ['What is 8x6?', '42', '47', '48', '51', 'A'],
        ['What is 37+105?', '137', '153', '146', '142', 'D'],
        ['What is 9x8?', '69', '73', '68', '72', 'D'],
        ['What is 321-123?', '198', '189', '199', '188', 'A'],
        ['What is 12x9?', '99', '132', '108', '117', 'C'],
        ['What is 143/11?', '8', '10', '17', '14', 'D']
    ],
    [
        ['What is 45x32?', '1458', '1435', '1440', '1470', 'C'],
        ['What is 256/16?', '16', '19', '14', '22', 'A'],
        ['What is (5x6)^2+3?', '876', '967', '903', '954', 'C'],
        ['What is a+a=b b/a=a b<0 what is a?', '-1', '3', '2', '0', 'C'],
        ['What is 187+245+216?', '652', '648', '672', '649', 'C'],
        ['What is 87x24?', '2068', '2078', '2088', '2098', 'C'],
        ['What is ((9/3)(5x8))/6+57)?','66', '77', '88', '99', 'B'],
        ['What is (23x65)/23?', '60', '65', '70', '75', 'B']
    ]
];

if (gameMode == 'easy'){
    gameDifficulty = 0;
}
else if (gameMode == 'medium'){
    gameDifficulty = 1;
}
else{
    gameDifficulty = 2;
} //this will state which array the questions will come from


function questionBox(x){ // This allows me to add my buttons to the box. I can pass a id through x
    return document.getElementById(x);
}


function displayQuestion(){
    box = questionBox("quizquestions"); //this will allow me to add the questions and answers into the box I created in HTML.
    if(questionNumber >= 8) {
        console.log(score);
        return false;
    }
    
    currentQuestion = questions[gameDifficulty][questionNumber][0];
    optionA = questions[gameDifficulty][questionNumber][1];//gameDifficulty will stay the same throughout the game and is set when asking which difficulty you want to play
    optionB = questions[gameDifficulty][questionNumber][2];//questionNumber will change everytime you answer a questions it is used to select the next set of questions in the multidimentional array
    optionC = questions[gameDifficulty][questionNumber][3];
    optionD = questions[gameDifficulty][questionNumber][4];
    box.innerHTML += "<h2>"+currentQuestion+"</h2><br>";//This will display the variable defined above.
    box.innerHTML += "<input type = 'radio' name = 'option' value = 'A'> "+optionA+"<br>";//The imput type defines what kind of button it is.
    box.innerHTML += "<input type = 'radio' name = 'option' value = 'B'> "+optionB+"<br>";//the name and value will help me check weather they clicked the correct answer
    box.innerHTML += "<input type = 'radio' name = 'option' value = 'C'> "+optionC+"<br>";//the <br> is used to make all the questions on separate lines. This makes the page look more tidy
    box.innerHTML += "<input type = 'radio' name = 'option' value = 'D'> "+optionD+"<br><br><br>";
    box.innerHTML += "<button onclick='checkOptions ()'>Check </button>";//This is just a regular button. 
}

function checkOptions(){
let correctAnswer = questions[gameDifficulty][questionNumber][5];
    options = document.getElementsByName("option");
    for(let i=0; i<options.length; i++){
        if (options[i].checked){
            option = options[i].value;
        }
    }
    if (option == correctAnswer){
        score++;
    }
    questionNumber++;
    displayQuestion();
}

window.addEventListener("load", displayQuestion, false);

Answer 1

Reset your box.innerHTML to empty before adding anything:在添加任何内容之前将 box.innerHTML 重置为空：

function displayQuestion(){
    box = questionBox("quizquestions"); //this will allow me to add the questions and answers into the box I created in HTML.
    if(questionNumber >= 8) {
        console.log(score);
        return false;
    }
    
    currentQuestion = questions[gameDifficulty][questionNumber][0];
    optionA = questions[gameDifficulty][questionNumber][1];//gameDifficulty will stay the same throughout the game and is set when asking which difficulty you want to play
    optionB = questions[gameDifficulty][questionNumber][2];//questionNumber will change everytime you answer a questions it is used to select the next set of questions in the multidimentional array
    optionC = questions[gameDifficulty][questionNumber][3];
    optionD = questions[gameDifficulty][questionNumber][4];
    box.innerHTML = ""; // THIS IS THE CHANGE
    box.innerHTML += "<h2>"+currentQuestion+"</h2><br>";//This will display the variable defined above.
    box.innerHTML += "<input type = 'radio' name = 'option' value = 'A'> "+optionA+"<br>";//The imput type defines what kind of button it is.
    box.innerHTML += "<input type = 'radio' name = 'option' value = 'B'> "+optionB+"<br>";//the name and value will help me check weather they clicked the correct answer
    box.innerHTML += "<input type = 'radio' name = 'option' value = 'C'> "+optionC+"<br>";//the <br> is used to make all the questions on separate lines. This makes the page look more tidy
    box.innerHTML += "<input type = 'radio' name = 'option' value = 'D'> "+optionD+"<br><br><br>";
    box.innerHTML += "<button onclick='checkOptions ()'>Check </button>";//This is just a regular button. 
}

The change I made is marked with THIS IS THE CHANGE我所做的更改标有 THIS IS THE CHANGE

我的测验并没有取代之前的问题

问题描述

1 个解决方案

解决方案1
0 2020-11-04 05:13:31

我的测验并没有取代之前的问题

问题描述

1 个解决方案

解决方案1 0 2020-11-04 05:13:31

解决方案1
0 2020-11-04 05:13:31