简介
exercisemodule 是一个专门用于前端开发中一些特定练习的 npm 包。它可以帮助开发者更方便地进行练习、测试,同时也为教育工作者提供了一个更好的助手。
exercisemodule 支持在一个 HTML 文件中嵌入多个练习题,在练习的过程中可以进行实时答题、实时预览等,大大增强了练习的效果和乐趣。
安装
exercisemodule 可以使用 npm 进行安装:
--- ------- --------------
使用
简单示例
在你的 HTML 文件中,你需要引入 exercisemodule:
------- -------------------------------------------------------
然后你就可以使用 Exercisemodule 对象创建一个练习:
--- -------- - --- ---------------- -- --- -- ---
其中配置项包含了各种细节设置和题目内容,后面会详细说明。
最后,你需要将练习展示到页面上:
----------------
然后你的练习就已经准备好了。
配置项
在构建 Exercisemodule 实例时,你需要传入各种不同的配置项,以调整练习的行为和样式。
container
描述: 练习将要展示的容器,可以是 DOM 元素或者 jQuery 对象。
类型: DOM 元素 | jQuery 对象 | 字符串选择器
默认值: 无
例子:
---------- -------------
items
描述: 所有的题目列表。
类型: 数组对象,每个对象包含一个完整的题目。
默认值: 空数组
例子:
------ - - ----- --------- --------- ----- -- --- ------- -- --------- -------- --------- ------- ---- ------- ------- -------- ------------ ---- ------- -- ------ -- ------- -- - ----- --------- --------- --------- -- --- ------- ------ -- --- ----- --------- ------- ---------- ------------ -------- -- --- ------- ------ -- --- ----- -------- - -
checkAnswer
描述: 答案校验函数,用于校验用户的答案是否正确。
类型: 函数
默认值: 空函数
例子:
------------ -------- ------------ ------- - ------ ---------- --- ------- -
onInit
描述: 练习初始化时的回调函数。
类型: 函数
默认值: 空函数
例子:
------- -------- -- - --------------------------- --------- -
onSubmit
描述: 练习提交时的回调函数。
类型: 函数
默认值: 空函数
例子:
--------- -------- -- - ------------------------ -
onComplete
描述: 练习完成时的回调函数。
类型: 函数
默认值: 空函数
例子:
----------- -------- -- - ------------------------------- -
showMark
描述: 是否展示分数。
类型: 布尔值
默认值: true
例子:
--------- -----
markIsInPercentage
描述: 分数是否使用百分比形式展示。
类型: 布尔值
默认值: true
例子:
------------------- -----
markPrecision
描述: 分数精度,展示时四舍五入到几位小数。
类型: 数值
默认值: 2
例子:
-------------- -
languages
描述: 语言配置,包含了各种提示语言的设置。
类型: 对象
默认值: 根据浏览器的设置来决定。
例子:
---------- - -------- - ------------- ----- ----------- ------ ----------- ------ ------------ --------- --------------- ------ - -
题目类型
exercisemodule 支持多种题目类型,每种类型都有不同的配置项和展示方式。
选择题(choice)
选择题包含若干个选项,用户需要选择正确的选项。一个选择题的配置对象包含以下属性:
- type:'choice'
- question:题目的内容
- options:所有选项的列表
- answer:正确答案的选项
例如:
- ----- --------- --------- ----- -- --- ------- -- --------- -------- --------- ------- ---- ------- ------- -------- ------------ ---- ------- -- ------ -- ------- -
填空题(fillin)
填空题只有一个选项,用户需要在提示的位置填入正确的答案。一个填空题的配置对象包含以下属性:
- type:'fillin'
- question:题目的内容
- answer:正确答案
例如:
- ----- --------- --------- --------- -- --- ------- ------ -- --- ----- --------- ------- ---------- ------------ -------- -- --- ------- ------ -- --- ----- -------- -
代码题(code)
代码题需要用户在输入框中输入一段代码,并且输出正确的结果。一个代码题的配置对象包含以下属性:
- type:'code'
- question:题目的内容
- codeTemplate:代码模板,显示在输入框中供用户参考
- jqueryBootstrap:是否引入 jQuery 和 Bootstrap
例如:
- ----- ------- --------- ----------- ------- --------- ------------- --------------------- ------------ ------- --------------------- ------------ ---------------- ----- ------------ --------------- -
更多阅读:
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005761781e8991b448ea8cf