uni-app 插件需求答题

网页版答题

sinazl 1楼•8 天前

针对您提出的uni-app插件需求——答题功能，以下是一个简化的代码示例，展示如何在uni-app中实现一个基本的答题功能。这个示例包括创建题目列表、显示题目、处理用户答案以及判断答案正确性。

1. 创建项目并安装依赖

首先，确保您已经安装了HBuilderX并创建了一个uni-app项目。

2. 准备数据

在pages/index/index.vue中，准备一些示例题目数据：

<script>
export default {
  data() {
    return {
      questions: [
        { id: 1, question: '1 + 1 = ?', options: ['2', '3', '4'], answer: '2' },
        { id: 2, question: '2 * 2 = ?', options: ['3', '4', '5'], answer: '4' },
        // 更多题目...
      ],
      currentQuestionIndex: 0,
      userAnswers: {}
    };
  },
  methods: {
    submitAnswer(questionId, selectedAnswer) {
      this.userAnswers[questionId] = selectedAnswer;
      this.currentQuestionIndex++;
      if (this.currentQuestionIndex >= this.questions.length) {
        this.checkAnswers();
      }
    },
    checkAnswers() {
      let score = 0;
      this.questions.forEach(question => {
        if (this.userAnswers[question.id] === question.answer) {
          score++;
        }
      });
      alert(`你的得分是: ${score}/${this.questions.length}`);
    }
  }
};
</script>

3. 渲染题目和选项

在template部分，渲染当前题目的内容和选项：

<template>
  <view>
    <view v-if="currentQuestionIndex < questions.length">
      <text>{{ questions[currentQuestionIndex].question }}</text>
      <radio-group @change="submitAnswer(questions[currentQuestionIndex].id, $event.detail.value)">
        <label v-for="option in questions[currentQuestionIndex].options" :key="option">
          <radio :value="option">{{ option }}</radio>
        </label>
      </radio-group>
    </view>
    <view v-else>
      <button @click="checkAnswers">提交答案</button>
    </view>
  </view>
</template>

4. 样式调整

您可以在style部分添加一些样式来美化界面，这里不再赘述。

5. 运行项目

确保您的项目配置正确，然后在HBuilderX中运行项目，您应该能够看到一个简单的答题界面，用户可以选择答案并提交，最后会显示得分。