如何让题库显示正确对应的答案？答案

【问题标题】：How do I get a question bank to display with the answers properly corresponding?如何让题库显示正确对应的答案？
【发布时间】：2021-11-10 20:02:50
【问题描述】：

这是我目前正在使用的 javascript。我目前正在底部的 buildQuiz 函数中设置实际的测验构建部分。我的计时器工作正常，我相信我已经正确设置了一切，但我不太确定如何执行让一切正常工作？

const questionBank = [
    {
        prompt: "What markup language is used for styling webpages?\n(a) HTML\n\ (b) CSS \n (c) Java",
        answer: "b"
    },
    {
        prompt: "What language uses the syntax let and const?\n(a) HTML\n\ (b) CSS \n (c) Javascript",
        answer: "c"
    },
    {
        prompt: "What markup language is used for the skeleton of a webpage?\n(a) CSS\n\ (b) Javascript \n (c) Python \n (d) HTML",
        answer: "d"
    },
];

let startBtn = document.getElementById("start");

let questions = document.getElementById("question");

function timer(){
    let sec = 15;
    let timer = setInterval(function(){
        document.getElementById('timer').innerHTML='00:'+sec;
        sec--;
        if (sec < 0) {
            clearInterval(timer);
            questions.innerHTML="Time's Up!";
        } 
        else {
          questions.innerHTML= "";
        }
    }, 1000);
}

startBtn.onclick = function beginQuiz(){
   timer();
   
}

这是我的 HTML 文件供参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Code Quiz</title>
</head>
<body>
    <header>Code Quiz</header>
    <div class="quiz-container">
      <button class="btn" id="start">Start</button>
      <p id="question"></p>
      <button class="btns" id="btn-a">A</button>
      <button class="btns" id="btn-b">B</button>
      <button class="btns" id="btn-c">C</button>
    </div>
    <div class="score-container">
        <p id="timer">00:15</p>
        <h1 class="score">Score: 0</h1>
    </div>
</body>
<script src="script.js"></script>
</html>

【问题讨论】：

to get everything working properly 什么不起作用？具有描述性。你试过了吗？究竟是什么问题？
我正在尝试让 questionBank 显示到 html 中的“问题”ID。我不确定要研究哪些概念才能显示它。我有提示，我有答案，我只需要它们显示在屏幕上。计时器完美运行。
你能把问题、答案和选择分开吗？ {提示：“什么标记语言用于样式化网页？答案：“b”，选择：{a：“HTML”，b：“CSS”，c：“Java”}}，如果是这样，那么你可以foreach循环题库并显示问题和选项
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript arrays function

【解决方案1】：

//Show the questions when the button is clicked.
startBtn.onclick = function beginQuiz(){
      timer();
   
      let questionBankHtml = '<div id="questionBankHtml">';

      questionBank.forEach(function(question) {
            questionBankHtml += `<p id="question">${question.prompt}</p>`
            questionBankHtml += '<button class="btns" id="btn-a">A</button>'
            questionBankHtml += '<button class="btns" id="btn-b">B</button>'
            questionBankHtml += '<button class="btns" id="btn-c">C/button>'

      }); 
      
      questionBankHtml += '</div>';
      document.getElementById("quizBlock").innerHTML = questionBankHtml;
}


HTML

<body>
    <header>Code Quiz</header>
    <div class="quiz-container">
      <div id="quizBlock"></div>
    </div>
    <div class="score-container">
        <p id="timer">00:15</p>
        <h1 class="score">Score: 0</h1>
    </div>
</body>

不过，请谨慎使用这种方法。单击按钮 A B 或 C 时，您将需要一种方法来确定正确的答案。您要发布表格吗？

或者，我建议您像这样构建数据：

const questionBank = [
    {
        id:1,
        prompt: "What markup language is used for styling webpages?",
        choices:{
            a:"HTML",
            b:"CSS",
            c:"Java"
        },
        answer: "b"
    },
    {
        id:2,
        prompt: "What language uses the syntax let and const?",
        choices:{
            a:"HTML",
            b:"CSS",
            c:"Javascript"
        },
        
        answer: "c"
    },
    {
        id:3,
        prompt: "What markup language is used for the skeleton of a webpage?",
        choices:{
            a:"CSS",
            b:"Javascript",
            c:"Python",
            d:"HTML"
        },
        answer: "d"
    },
];

使用此结构中的数据，您可以动态使用选项来显示按钮并根据“答案”检查对象的 ID

【讨论】：

谢谢！我将尝试这种方法。只是为了清晰和知识，是什么使您编写的 questionBank 结构更好？再次感谢！编辑：我的意思是问我需要更改什么才能使 id 与问题相符
多种原因：1、你有ABC和ABCD的选择。要动态填充按钮，您需要循环数据（不是字符串，或者您需要一堆逻辑来动态确定选择）。 2 当您开始验证用户是否单击 AB 或 C 或 D 时，您将想知道他们单击 ABCD 的“什么问题”，因此为每个问题提供一个 ID 将帮助您判断他们是否在问题上单击 C id 2 那么它是正确的。您是要在计时器之后还是在“提交”功能上自动验证答案？