简介
exercisemodule 是一个专门用于前端开发中一些特定练习的 npm 包。它可以帮助开发者更方便地进行练习、测试，同时也为教育工作者提供了一个更好的助手。
exercisemodule 支持在一个 HTML 文件中嵌入多个练习题，在练习的过程中可以进行实时答题、实时预览等，大大增强了练习的效果和乐趣。
安装
exercisemodule 可以使用 npm 进行安装：
npm install exercisemodule
使用
简单示例
在你的 HTML 文件中，你需要引入 exercisemodule：
<script src="./node_modules/moment/min/moment.min.js"></script>
然后你就可以使用 Exercisemodule 对象创建一个练习：
var exercise = new Exercisemodule({ /* 配置项 */ });其中配置项包含了各种细节设置和题目内容，后面会详细说明。
最后，你需要将练习展示到页面上：
exercise.show();
然后你的练习就已经准备好了。
配置项
在构建 Exercisemodule 实例时，你需要传入各种不同的配置项，以调整练习的行为和样式。
container
描述： 练习将要展示的容器，可以是 DOM 元素或者 jQuery 对象。
类型： DOM 元素 | jQuery 对象 | 字符串选择器
默认值： 无
例子：
container: document.body
items
描述： 所有的题目列表。
类型： 数组对象，每个对象包含一个完整的题目。
默认值： 空数组
例子：
-- -------------------- ---- -------
------ -
-
----- ---------
--------- ----- -- --- ------- -- ---------
-------- --------- ------- ---- -------
------- --------
------------ ---- ------- -- ------ -- -------
--
-
----- ---------
--------- --------- -- --- ------- ------ -- --- ----- ---------
------- ----------
------------ -------- -- --- ------- ------ -- --- ----- --------
-
-checkAnswer
描述： 答案校验函数，用于校验用户的答案是否正确。
类型： 函数
默认值： 空函数
例子：
checkAnswer: function (userAnswer, answer) {
return userAnswer === answer;
}onInit
描述： 练习初始化时的回调函数。
类型： 函数
默认值： 空函数
例子：
onInit: function () {
console.log('Exercisemodule 初始化完毕！');
}onSubmit
描述： 练习提交时的回调函数。
类型： 函数
默认值： 空函数
例子：
onSubmit: function () {
console.log('用户提交了答案！');
}onComplete
描述： 练习完成时的回调函数。
类型： 函数
默认值： 空函数
例子：
onComplete: function () {
console.log('恭喜你，你已经完成了这个练习！');
}showMark
描述： 是否展示分数。
类型： 布尔值
默认值： true
例子：
showMark: false
markIsInPercentage
描述： 分数是否使用百分比形式展示。
类型： 布尔值
默认值： true
例子：
markIsInPercentage: false
markPrecision
描述： 分数精度，展示时四舍五入到几位小数。
类型： 数值
默认值： 2
例子：
markPrecision: 4
languages
描述： 语言配置，包含了各种提示语言的设置。
类型： 对象
默认值： 根据浏览器的设置来决定。
例子：
-- -------------------- ---- -------
---------- -
-------- -
------------- -----
----------- ------
----------- ------
------------ ---------
--------------- ------
-
-题目类型
exercisemodule 支持多种题目类型，每种类型都有不同的配置项和展示方式。
选择题（choice）
选择题包含若干个选项，用户需要选择正确的选项。一个选择题的配置对象包含以下属性：
- type：'choice'
- question：题目的内容
- options：所有选项的列表
- answer：正确答案的选项
例如：
{
type: 'choice',
question: 'What is the capital of France?',
options: ['Paris', 'Rome', 'New York'],
answer: 'Paris',
explanation: 'The capital of France is Paris.'
}填空题（fillin）
填空题只有一个选项，用户需要在提示的位置填入正确的答案。一个填空题的配置对象包含以下属性：
- type：'fillin'
- question：题目的内容
- answer：正确答案
例如：
{
type: 'fillin',
question: '________ is the largest planet in our solar system.',
answer: 'Jupiter',
explanation: 'Jupiter is the largest planet in our solar system.'
}代码题（code）
代码题需要用户在输入框中输入一段代码，并且输出正确的结果。一个代码题的配置对象包含以下属性：
- type：'code'
- question：题目的内容
- codeTemplate：代码模板，显示在输入框中供用户参考
- jqueryBootstrap：是否引入 jQuery 和 Bootstrap
例如：
{
type: 'code',
question: '请编写一段代码，输出 "Hello, World!"',
codeTemplate: 'console.log(\'Hello, World!\');',
answer: 'console.log(\'Hello, World!\');',
jqueryBootstrap: true,
explanation: '这是一道经典的编程入门题。'
}更多阅读：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005761781e8991b448ea8cf