Question

我有一个包含10个对象的数组。每个包含一个问题字符串，一个correctAnswer字符串和一个包含4个答案字符串的对象：

const DB = [
{
  question: "some question",
  answers: ["a", "variety", "of", "choices"],
  correctAnswer: "variety"
}, ...

我有一个通过单选按钮输入捕获用户答案的功能，并将其保存在变量中：

function feedbackPage(){
  $('.js-quizform-questions').on('click', '.js-button-next', function(event){
    event.preventDefault()
    let yourAnswer = getFeedback()
    $('.js-feedback-page').show().html(evalCorrectAnswer(DB))
  })
}

您会看到evalCorrectAnswer到达上述数据库进行验证。目前我只能显示和验证硬编码的第一个答案，这是动态生成的，如下所示：

function generateQuestionElement(item) {
  return `
    <h2>${item[0].question}</h2>
    <form id='form'>
        <fieldset>
            <div class='css-answers'>
                <input id='answer1' type='radio' name='answer' required>
                <label for='answer1'>${item[0].answers[0]}</label>
            </div>
            <div class='css-answers'>
                <input id='answer2' type='radio' name='answer' required>
                <label for='answer2'>${item[0].answers[1]}</label>

我需要一种方法来自动选择第一个问题，包括其答案并通过generateQuestionItem显示。然后我需要将该问题（及其答案）从池中取出并在我点击Next页面上的eval按钮后显示下一个问题。我很难以面向对象的方式实现这个功能。

Codepen

Answer 1

构造

的变量

let questionNumber = 0

然后更新renderQuestion内的以下行：

<label for='answer1'>${DB[questionNumber].answers[0]}</label>

稍后创建一个在每个适当的位置更新questionNumber的函数。

从数组数据库中自动化数组对象显示

1 个答案: