初学者:一个非常短的项目有问题

Beginner: problem with a very short project

提问人:Dave Dwone 提问时间:11/15/2023 最后编辑:VLAZDave Dwone 更新时间:11/15/2023 访问量:63

问:

我的应用程序在这里有问题,因为我只是一个初学者,我希望有人可以帮助我。我有这个代码(下面),我希望网站在抽认卡上问一个随机问题,如果答案是正确的,则传递给下一个问题,如果答案是错误的,请您重做问题。谁能帮我修复这段代码以使其工作?

function generateFlashcard() {
    const minNumber = parseInt(document.getElementById("minNumber").value);
    const maxNumber = parseInt(document.getElementById("maxNumber").value);

    const num1 = Math.floor(Math.random() * (maxNumber - minNumber + 1)) + minNumber;
    const num2 = Math.floor(Math.random() * 12) + 1;

    const answer = num1 * num2;

    document.getElementById("flashcard").innerText = `${num1} x ${num2} = ?`;
    document.getElementById("answer").innerText = "";
    document.getElementById("userInput").value = "";

    document.getElementById("nextButton").disabled = true;
}

function checkAnswer() {
    const userInput = parseInt(document.getElementById("userInput").value);
    const currentFlashcard = document.getElementById("flashcard").innerText;
    const answer = eval(currentFlashcard.replace("?", ""));

    if (!isNaN(userInput) && userInput === answer) {
        document.getElementById("answer").innerText = "Correct!";
        document.getElementById("nextButton").disabled = false;
        document.getElementById("userInput").value = "";
    } else {
        document.getElementById("answer").innerText = "Incorrect. Try again.";
        document.getElementById("userInput").value = "";
    }
}

function clearAnswer() {
    document.getElementById("answer").innerText = "";
}

generateFlashcard();

document.getElementById("submitIcon").addEventListener("click", function() {
    checkAnswer();
});
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

#flashcard {
    font-size: 24px;
    padding: 20px;
    border: 2px solid #333;
    margin: 20px;
    display: inline-block;
}

#answer {
    margin-top: 10px;
    font-size: 18px;
    color: green;
}

#customization {
    margin-top: 20px;
}

#userInputContainer {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#userInput {
    flex: 1;
    margin-right: 5px;
}

#submitIcon {
    cursor: pointer;
}
<div id="flashcard">Click below to show a new flashcard</div>
<div id="answer"></div>
<div id="customization">
    <label for="minNumber">Min Number:</label>
    <input type="number" id="minNumber" value="1" min="1" max="12">

    <label for="maxNumber">Max Number:</label>
    <input type="number" id="maxNumber" value="12" min="1" max="12">

    <button id="nextButton" onclick="generateFlashcard()" disabled>Next Question</button>
</div>
<div id="userInputContainer">
    <input type="number" id="userInput" placeholder="Enter your answer" oninput="clearAnswer()">
    <img src="https://img.icons8.com/ios-glyphs/30/000000/checked.png" id="submitIcon" alt="Submit">
</div>

JavaScript HTML CSS 数学

评论


答: 暂无答案