当前位置：首页 > news >正文

Harmony开发中考试组件库怎么使用

news 2026/5/13 0:55:44

考试组件库 (kaoshimuban)

一个功能完整的HarmonyOS考试组件库，支持单选题、多选题、判断题和填空题四种题型，可快速构建考试界面。

功能特性

✅单选题- 支持单选题的渲染和交互，自动互斥选择
✅多选题- 支持多选题的渲染和交互，可选择多个答案
✅判断题- 支持判断题（正确/错误）的渲染和交互
✅填空题- 支持填空题的渲染，支持多个填空
✅自动评分- 内置评分逻辑，支持自定义每题分值
✅结果统计- 提供详细的考试结果，包括得分、正确率等

效果预览

考试界面	结果页面
支持四种题型混合展示	显示得分、正确率、错题解析

安装方式

方式一：ohpm安装（推荐）

ohpminstallkaoshimuban

或使用简写命令：

ohpm i kaoshimuban

方式二：本地引用

将library目录复制到你的项目中
在oh-package.json5中添加依赖：

{ "dependencies": { "kaoshimuban": "file:../library" } }

方式三：HAR包引用

编译生成HAR包：hvigorw assembleHar -p module=library
将HAR包放入项目的libs目录
在oh-package.json5中添加依赖：

{ "dependencies": { "kaoshimuban": "file:./libs/kaoshimuban.har" } }

快速开始

1. 导入组件和类型

import{ExamComponent,ExamData,ExamResult,QuestionType,QuestionData}from'kaoshimuban';

2. 准备考试数据

privatecreateExamData():ExamData{constquestions:QuestionData[]=[// 单选题newQuestionData('q1',// 题目IDQuestionType.SINGLE,// 题目类型'HarmonyOS是由哪家公司开发的？',// 题干'华为',// 正确答案10,// 分值['华为','小米','苹果','谷歌']// 选项),// 多选题newQuestionData('q2',QuestionType.MULTIPLE,'以下哪些是HarmonyOS的核心特性？（多选）',['分布式架构','微内核设计','全场景覆盖'],// 正确答案数组15,['分布式架构','微内核设计','全场景覆盖','仅支持手机']),// 判断题newQuestionData('q3',QuestionType.TRUE_FALSE,'ArkTS是HarmonyOS应用开发的主要编程语言。',true,// 正确答案：true或false5),// 填空题newQuestionData('q4',QuestionType.FILL_BLANK,'HarmonyOS的UI框架名称是____。',['ArkUI'],// 正确答案数组10,undefined,// 填空题无选项1// 填空数量)];returnnewExamData('HarmonyOS 基础知识测试',// 考试标题questions,// 题目列表40,// 总分30// 时间限制（分钟）);}

3. 使用组件

@Entry@Componentstruct ExamPage{@StateexamData:ExamData=this.createExamData();@StateshowResult:boolean=false;@StateexamResult:ExamResult|null=null;build(){Column(){if(this.showResult&&this.examResult!==null){// 显示考试结果this.ResultView()}else{// 显示考试界面ExamComponent({examData:this.examData,onSubmit:(result:ExamResult)=>{this.examResult=result;this.showResult=true;}})}}.width('100%').height('100%')}@BuilderResultView(){Column(){Text(`得分:${this.examResult!.score}/${this.examResult!.totalPoints}`)Text(`正确:${this.examResult!.correctCount}/${this.examResult!.totalCount}`)Button('重新考试').onClick(()=>{this.showResult=false;this.examResult=null;})}}}

API 文档

ExamComponent

主考试组件，用于渲染完整的考试界面。

属性	类型	必填	说明
examData	ExamData	是	考试数据（需使用@ObjectLink）
onSubmit	(result: ExamResult) => void	否	提交回调

QuestionData

题目数据类，使用构造函数创建。

newQuestionData(id:string,// 题目IDtype:QuestionType,// 题目类型content:string,// 题干内容correctAnswer:string|string[]|boolean,// 正确答案points:number,// 分值options?:string[],// 选项（单选/多选题）blankCount?:number// 填空数量（填空题）)

ExamData

考试数据类，使用构造函数创建。

newExamData(title:string,// 考试标题questions:QuestionData[],// 题目列表totalPoints:number,// 总分timeLimit?:number// 时间限制（分钟）)

QuestionType

题目类型枚举。

值	说明
QuestionType.SINGLE	单选题
QuestionType.MULTIPLE	多选题
QuestionType.TRUE_FALSE	判断题
QuestionType.FILL_BLANK	填空题

ExamResult

考试结果类。

属性	类型	说明
answers	UserAnswer[]	所有答案
score	number	得分
totalPoints	number	总分
correctCount	number	正确题数
totalCount	number	总题数

辅助函数

// 判断答案是否正确isAnswerCorrect(question:QuestionData,userAnswer:any):boolean

题型说明

单选题 (SINGLE)

显示单选按钮样式
点击选项自动取消之前的选择
正确答案为单个字符串

多选题 (MULTIPLE)

显示复选框样式
可同时选择多个选项
正确答案为字符串数组
评分时忽略选择顺序

判断题 (TRUE_FALSE)

固定显示"正确"和"错误"两个选项
正确答案为布尔值true或false

填空题 (FILL_BLANK)

根据blankCount显示对应数量的输入框
正确答案为字符串数组
评分时忽略大小写和首尾空格

样式定制

组件使用了以下颜色方案：

元素	颜色
单选题标签	#1890ff (蓝色)
多选题标签	#52c41a (绿色)
判断题标签	#faad14 (橙色)
填空题标签	#722ed1 (紫色)
正确选中	#52c41a (绿色)
错误选中	#ff4d4f (红色)
提交按钮	#1890ff (蓝色)