如何使用 JavaScript 创建动态测验？

Question

我正在考虑做一个测验，用户将看到一个“卡片”界面，其中包含简单的是/否问题和一些选择题。回答一个问题时，下一个问题会更改以适应之前的答案。

示例流程：

你想出去吃饭还是在家吃饭？我想出去吃饭。你想去韩国餐厅吃饭吗？是的。

我遇到的问题是我希望在前端没有多个路由。目前，我正在使用 Vue.js 和 Vue-Router。这就是我想要的（不要介意命名约定，只是暂时的）：

<template>

  <div>
    <div v-show="isQuestion(0)">
      <p id="question_1">Question 1</p>

      <p @click="answerQuestion()">Answer 1</p>
      <a @click="answerQuestion()">Answer 2</a>
    </div>

    <div v-show="isQuestion(1)">
      <p id="question_2">Question 2</p>

      <div v-show="isAnswer(0)">
        <p>Game?</p>
        <a @click="answerQuestion()">Yes</a>
        <a @click="nextAnswer()">No</a>
      </div>

      <div v-show="isAnswer(1)">
        <p>Read?</p>
        <a @click="answerQuestion()">Yes</a>
        <a @click="nextAnswer()">No</a>
      </div>

      <div v-show="isAnswer(2)">
        <p>Redo?</p>
        <a @click="resetAnswer()">Reset</a>
      </div>
      <a @click="search()">Search</a>
    </div>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        question: 0,
        answer: 0,
        answers: {}
      }
    },
    methods: {
      answerQuestion () {
        this.answers[this.question] = this.answer
        this.question++
        this.answer = 0
      },
      nextAnswer () {
        this.answer++
      },
      resetAnswer () {
        this.answer = 0
      },
      isQuestion (n) {
        return n === this.question
      },
      isAnswer (n) {
        return n === this.answer
      }
    }
  }
</script>

我正在考虑的一个选项可能是将问题和答案放入数据库中，以便前端可以将它们作为 JSON 获取，然后填充所谓的“卡片”。但是我有一个问题，如何显示“正确”的下一个问题来响应先前的答案。

我不喜欢硬编码所有内容，因为这似乎是一种不好的做法，但我很难以其他任何方式做到这一点。

Answer 1

我认为您的案例的重点是正确的数据结构。在您的情况下，我将使用：

data () {
  return {
     curentQuesionIndex: 0,
     curentQuesion: null,
     questions: [
       { 
         question: 'Do you want to eat out or at home?', 
         options: [{0:'No'}, {1:'Yes'}, {'special':'reset'}], // answer options
         answer: 1                   // if NULL then user not yet give answer
                                   // if 'special' then you process it differently

       },
       ... // next questions here
     ]
   }
}

使用这一系列问题，您可以使用 Vue 以自动方式呈现它（您可以从 ajax json 读取它），显示下一个问题和其他内容。如果某个问题的答案为 NULL，那么您知道这是要显示的“下一个问题”...

在您的 vue 组件中创建变量 curentQuesionIndex=2 和 currentQuestion= {..}，您将使用它们来显示、保存（到您的查询数组中）和操作（例如“特殊”答案，如“重置”）。

您将只使用一个@click 函数：saveAnswer(value)，其中'value' 是question.options 中的一个选项。在此功能中，您可以保存问题列表的答案，将 newq 问题设置为 currentQuestion 变量（在屏幕上呈现）并依赖于 value，您将执行不同的操作 - 例如：您将在那里放置 if 语句：如果问题[currentQuestionIndex].options[value] == 'reset' 然后你会重置...