HarmonyOS鸿蒙Next中如何实现答题页面的选项选择和答案验证？

HarmonyOS鸿蒙Next中如何实现答题页面的选项选择和答案验证？ 我需要创建一个答题页面，支持单选、多选和判断题，选择后显示正确答案和解析，如何实现？

3 回复

实现思路：

  1. 定义题目数据结构，包含题型、选项和答案：
interface QuizQuestion {
  id: string;
  type: 'single' | 'multiple' | 'judge';
  question: string;
  options: string[];
  answer: string | string[];
  explanation: string;
}
  1. 使用 @State 管理用户选择和答案显示状态：
[@State](/user/State) userAnswer: string | string[] = '';
[@State](/user/State) showAnswer: boolean = false;
  1. 根据题型处理选项点击逻辑：
if (this.question.type === 'multiple') {
  const answers = this.userAnswer as string[];
  if (answers.includes(option)) {
    this.userAnswer = answers.filter(a => a !== option);
  } else {
    this.userAnswer = [...answers, option];
  }
} else {
  this.userAnswer = option;
}
  1. 完整示例代码：
interface QuizQuestion {
  id: string;
  type: 'single' | 'multiple' | 'judge';
  question: string;
  options: string[];
  answer: string | string[];
  explanation: string;
}

@Component
export struct QuizItem {
  @Prop question: QuizQuestion;
  @Prop showAnswer: boolean = false;
  [@State](/user/State) userAnswer: string | string[] = '';

  aboutToAppear() {
    if (this.question.type === 'multiple') {
      this.userAnswer = [];
    }
  }

  isCorrect(): boolean {
    if (this.question.type === 'multiple') {
      const correct = this.question.answer as string[];
      const user = this.userAnswer as string[];
      return correct.length === user.length && correct.every(a => user.includes(a));
    }
    return this.question.answer === this.userAnswer;
  }

  build() {
    Column({ space: 16 }) {
      Text(this.question.type === 'single' ? '单选题' : this.question.type === 'multiple' ? '多选题' : '判断题')
        .fontSize(12)
        .fontColor('#1976D2')
        .padding({ left: 8, right: 8, top: 4, bottom: 4 })
        .backgroundColor('#E3F2FD')
        .borderRadius(4)

      Text(this.question.question).fontSize(16).fontColor('#333333')

      ForEach(this.question.options, (option: string, index: number) => {
        Row({ space: 12 }) {
          Text(String.fromCharCode(65 + index)).fontSize(14).width(24).height(24).textAlign(TextAlign.Center)
          Text(option).fontSize(14).layoutWeight(1)
        }
        .width('100%')
        .padding(12)
        .borderRadius(8)
        .onClick(() => {
          if (!this.showAnswer) {
            if (this.question.type === 'multiple') {
              const answers = this.userAnswer as string[];
              this.userAnswer = answers.includes(option) ? answers.filter(a => a !== option) : [...answers, option];
            } else {
              this.userAnswer = option;
            }
          }
        })
      })

      if (this.showAnswer) {
        Text(this.isCorrect() ? '✓ 回答正确' : '✗ 回答错误')
          .fontSize(14)
          .fontColor(this.isCorrect() ? '#4CAF50' : '#F44336')
      }
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
  }
}

更多关于HarmonyOS鸿蒙Next中如何实现答题页面的选项选择和答案验证？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，实现答题页面的选项选择和答案验证，主要使用ArkUI声明式开发范式。

选项选择：

  • 使用Radio或Checkbox组件构建单选或多选题。
  • 通过@State装饰器管理选中状态，绑定change事件更新选项。

答案验证：

  • 预置正确答案，与用户选择对比。
  • 使用条件渲染（如if/else）或状态变更显示结果（正确/错误）。

示例核心步骤：

  1. 定义选项数据与正确答案。
  2. 渲染选项列表并绑定选择事件。
  3. 验证逻辑：比较用户选择与答案，更新结果状态。

全程基于ArkTS开发，无需Java或C。

在HarmonyOS Next中实现答题页面的选项选择与验证，可通过以下步骤完成：

1. 页面布局与组件选择

  • 使用Column或List构建题目区域，每个选项可用Radio（单选）、Checkbox（多选）或Toggle（判断题）组件。
  • 通过[@State](/user/State)或@Link装饰器管理选项选中状态，例如：
    [@State](/user/State) selectedOptions: boolean[] = [false, false, false]; // 多选示例

2. 交互逻辑实现

  • 单选/判断题：绑定onChange事件，更新唯一选中项。
  • 多选：通过数组记录每个选项的选中状态，点击时切换对应索引的值。
  • 示例代码片段（多选）：
    Checkbox({ name: 'option1' })
  .onChange((isChecked) => {
    this.selectedOptions[0] = isChecked;
  })

3. 答案验证与解析展示

  • 定义正确答案数据（如correctAnswers: boolean[]），在提交或自动验证时比较selectedOptions与correctAnswers。
  • 通过条件渲染显示结果：
    if (this.isSubmitted) {
  Text(this.isCorrect ? '正确' : '错误')
  Text(this.explanation) // 解析内容
}
  • 可使用if/else或动态样式（如文字颜色）区分正确/错误选项。

4. 状态管理优化

  • 复杂场景建议使用@Observed和@ObjectLink管理题目数据类，或结合AppStorage跨页面同步状态。

关键点

  • 利用ArkUI声明式UI简化交互更新。
  • 通过状态驱动UI变化，避免直接操作组件。
  • 判断题可复用单选逻辑，仅选项固定为“对/错”。

此方案能高效实现答题交互，保持代码简洁性与可维护性。

回到顶部