npm 包 exercisemodule 使用教程

简介

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

例如:

-
  ----- -------
  --------- ----------- ------- ---------
  ------------- --------------------- ------------
  ------- --------------------- ------------
  ---------------- -----
  ------------ ---------------
-

更多阅读:

  1. Exercisemodule 官方文档
  2. Exercisemodule GitHub 仓库

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005761781e8991b448ea8cf


猜你喜欢

  • NPM包 iframe-react使用教程

    简介 在我们进行前端开发的过程中,经常会遇到需要嵌入第三方网站或第三方组件的情况。此时,我们可以使用iframe来实现这个需求。但是,iframe很容易出现一些问题,比如无法跨域、样式污染和性能问题等...

    3 年前
  • npm 包 picasa-extended 使用教程

    介绍 picasa-extended 是一个基于 picasa 库的 npm 包,针对 picasa 库功能作了扩展,使得其能够更好的应对复杂的图片操作需求。本文将详细介绍 picasa-extend...

    3 年前
  • 使用npm包'qrystr-parse-170615'解析URL查询字符串教程

    作为一个前端工程师,您可能会遇到需要解析URL查询字符串的情况。这时,qrystr-parse-170615这个npm包就可以派上用场了。qrystr-parse-170615是一个用于解析URL查询...

    3 年前
  • npm 包 map-concatx 使用教程

    在前端开发中,我们经常需要对数组进行操作,比如根据某个条件筛选、重组数组等等。而当我们需要对数组中的对象进行操作时,常常需要使用到 map 函数。但是,map 函数只能返回一个数组,如果我们需要合并多...

    3 年前
  • npm 包 npm5-git-publish 使用教程

    在前端开发中,使用 npm 包来管理项目依赖已经成为了基本操作。而在开发过程中,如果我们需要发布一个自己开发的 npm 包,那么 npm5-git-publish 正是我们需要的工具。

    3 年前
  • npm 包 random.dog.js 使用教程

    介绍 random.dog.js 是一个 npm 包,它提供了一个简单易用的方式从 random.dog 上获取狗的图片。这个包可以在前端或者后端使用。 安装 使用 npm 可以简单地安装 rando...

    3 年前
  • npm 包 sonar-js-coverage-convertor 使用教程

    在前端开发中,代码质量是非常重要的一环。使用 SonarQube 可以进行代码的静态分析和质量检测,其中就包括代码的覆盖率统计。而 sonar-js-coverage-convertor 这个 npm...

    3 年前
  • npm 包 curl-log-generator 使用教程

    在前端开发过程中,我们经常要使用 curl 命令来发送 HTTP 请求并查看返回结果。然而,手动编写 curl 命令十分麻烦且容易出错。为了便于调试和排错,我们可以使用一个 npm 包 curl-lo...

    3 年前
  • npm 包 @bizfty/logger 使用教程

    前言 @bizfty/logger 是一个轻量级的日志打印工具包,它适用于前端开发中的日志输出。该工具包使用简单,功能强大,支持多种输出方式,并可自定义日志等级,方便您根据具体场景输出不同等级的日志信...

    3 年前
  • npm 包 cpanel-client 使用教程

    介绍 cpanel-client 是一个 Node.js 的 npm 包,用于与 cPanel 控制面板交互。它封装了 cPanel API,使其更易于使用。使用 cpanel-client,我们可以...

    3 年前
  • npm 包 mark-selection 使用教程

    mark-selection 是一个方便的 npm 包,用于在网页中标记文本。它可以快捷地高亮选中的文本,同时支持多个颜色,让你的页面变得更加丰富多彩。本篇文章将为你详细介绍 mark-selecti...

    3 年前
  • npm 包 painting-table 使用教程

    前言 在前端开发过程中,我们经常需要在网页中展示表格数据。通常情况下,我们会使用 HTML 的 <table> 标签来构造表格。但是,如果需要自定义表格样式或者添加一些高级功能,<t...

    3 年前
  • npm 包 @bizfty/garuda 使用教程

    什么是 @bizfty/garuda @bizfty/garuda 是一款优秀的前端框架,它是一个组件化开发框架,能够加快大型项目的开发速度。@bizfty/garuda 是基于 React 库实现的...

    3 年前
  • npm 包antlr4-builds使用教程

    在前端开发中,我们经常需要对文本进行解析和处理。其中,ANTLR(ANother Tool for Language Recognition)是一种开源的解析器生成器,用于生成针对复杂语法的解析器和编...

    3 年前
  • npm 包 bitbay-node-api 使用教程

    在前端开发中,我们常常需要使用一些第三方工具和库来简化开发过程。npm 包是其中非常重要的一种,它提供了大量的开源库和工具,可以快速构建应用和解决问题。本文将介绍一个 npm 包 bitbay-nod...

    3 年前
  • npm 包 @use/it 使用教程

    介绍 npm (Node Package Manager) 是 Node.js 的包管理器,可以轻松地分享自己编写的模块,以及使用他人编写的模块。通过 npm 安装的包可以在前端或者后端环境中使用,n...

    3 年前
  • npm 包 fastify-juicer 使用教程

    前言 随着前端技术的不断发展,框架和工具层出不穷,让我们的开发变得更加高效和便捷。在前端开发中,使用 Node.js 管理依赖包是很重要的一环。而 npm(Node Package Manager)是...

    3 年前
  • npm 包 gca-wincfg 使用教程

    简介 gca-wincfg 是一个用于读取和修改 Windows 操作系统相关配置的 npm 包。该包提供了简单易用的 API,支持读取和修改注册表、Windows 服务、Windows 系统变量等配...

    3 年前
  • npm 包 hexlet-project-2 使用教程

    hexlet-project-2 是一个前端类 npm 包,它可以帮助开发者更加方便地管理和组织前端项目结构。本篇文章将详细介绍 hexlet-project-2 的使用方法,帮助读者更好地理解和应用...

    3 年前
  • npm 包 raml-json-enhance-node 使用教程

    本文涉及技术:Node.js, npm, RAML, JSON 前端工程师们,你们是否遇到过以下情况? 后端同学用 RAML 规范定义 RESTful API,并提供 JSON 文件给你作为前端...

    3 年前

相关推荐

    暂无文章