我爱E-Learning在线学习社区

Adapt 响应式课程开发框架(2):内容结构

使用 Adapt 开发的课程与使用许多传统E-Learning课程开发软件如Articulate storyline或Adobe captivate开发的课程,其中一个最大不同就是:

使用传统软件开发的eLearning课程是幻灯片式的,学习时用户通过点击鼠标来进行翻页。

使用Adapt开发的课程是属于那种单页的网页程序(single-page app),用户使用鼠标或手指滚动页面来浏览学习。这种设计让习惯了使用智能手机和平板电脑访问互联网的用户觉得更自然,更符合时代的潮流。

内容结构层级

不同于传统的幻灯片式编辑,使用Adapt开发响应式网络电子课程,你需要设置并编辑一系列课程json文件。这些文件集中存放在一个叫做course的文件夹路径下,包含以下几个文件:

// 主要课程文件
course.json // 用来设置整个课程  
contentObjects.json // 添加、设置课程页面内容及结构 (page)  
articles.json // 添加、设置章节内容及结构 (article)  
blocks.json // 添加、设置组块内容及结构 (block)  
components.json // 添加、设置各种内容模块内容 (component)

// 课程设置文件
config.json //设置课程语言、行文方向等

// 资源文件夹
assets/ //与课程有关的图片资料等  

要掌握Adapt的内容结构,首先你要了解课程、页面、章节、组块与组件之间的层级关系,请看下图:

PABC: Adapt课件层级关系

课程 (course)

课程的添加是通过编辑修改course.json文件实现的,用户为课程设定一个唯一id标识。

// 在course.json中
"_id": "course101", // 设置课程id
"_type": "course", // 设置课程类别

页面 (Page)

同传统网页一样,adapt课程设计师用一个或多个页面来展示课程内容。一般来说,一个页面展示一个课程模块或单元。根据这个课程模块或单元的内容,这个页面可以包含一个或多个章节(Article)。

页面的添加是通过编辑contentObjects.json实现的。用户可以添加一个或多个页面,每个页面设置不同的id, 但每一个页面的parentId(上级id)都必须设定为上级course.json中的课程id,因为课程id是唯一的。

// 在contentObjects.json 中
"_id": "co-05", // 为该页面设置id
"_parentId": "coure101", // 设置上级id为course101 
"_type": "page", // 为页面设置类别

// ...... 省略内容

"_id": "co-10", 
"_parentId": "coure101", // 设置上级id为course101 
"_type": "page", // 

章节 (Article)

同页面一样,用户可以在一个页面内设置一个或多个章节。章节的添加是通过编辑articles.json实现的。

// 在articles.json 中
"_id": "a-01", // 为该章节设置id
"_parentId": "co-05", // 设置上级page id为co-05
"_type": "article", // 为章节设置类别

// ......省略内容

"_id": "a-02",
"_parentId": "co-10", // 设置上级page id为co-10
"_type": "article",

在课程设计中,章节还起着一个非常重要的作用。设计师通过对不同的章节使用不同的设计,从而对页面进行“分割”,使课程显得更加丰富生动、层次分明。

组块 (Block)

组块有点像传统elearning课程中的幻灯片。你可以在一个章节中添加一个或多个组块,组块的添加是通过编辑blocks.json实现的。

不同于页面和章节,在一个组块中你只可以添加一个全宽(full-width)或两个半宽(half-width)的组件。如果你在一个组块中添加了过多的组件,通常情况下这些组件都会显示在页面上,但会显得杂乱无章。

// 在blocks.json 中
"_id": "b-01", // 为该组块设置id
"_parentId": "a-01", // 设置上级章节id为a-01
"_type": "block", // 为组块设置类别

组件 (component)

在课程开发中,组件是整个开发框架中最有趣的部分,用户开发的课程内容都是通过各种各样不同的组件实现的。

组件根据功能可分为:展示组件和问题组件。展示组件包括如:文字组件、图片组件、视频组件、手风琴式折叠组件、热点图片组件等。问题组件包括如:多项选择题、下拉式选择题、图片选择题、填空题、滑块问题等。Adapt开发框架目前包含十几种组件,用户还可以在网络社区中找到更多社区开发的组件。 组件可以根据内容设置为占据页面的全部宽度(full-width)或一半宽度(half-width)。一般情况下,一个组块(block)可以放置1个全宽或2个半宽的组件,当然你也可以选择在一个组块中放置一个半宽的组件。

// 在components.json 中
"_id": "c-01", // 为该组块设置id
"_parentId": "b-01", // 设置上级组块id为b-01
"_type": "component", // 为组件设置类别
"_layout": "full", // 设置组件宽度,可设置为full, left 或 right
"_component": "slider" // 设置使用滑块问题组件

常见问题


Q: 我可以设置一个组件(component)的parentId为course的 id 吗? 

A: 不可以。 使用adapt开发课程,你必须严格遵循course-page-article-block-component的层级结构。

Q: 我在一个组块中(block)添加了两个组件,并且都设置为full-width全宽显示,会出现什么情况? 

A: 两个组件应该都会显示,但显示样式会错乱。Don’t do that!

Q: 这些json文件看上去好麻烦啊!有什么办法可以不用编辑这些json文件又能使用Adapt开发框架的? 

A: 你可以选择使用Adapt Authoring Tool来开发课程。Adapt Authoring Tool (也称作Adapt Builder)是一个基于Adapt开发框架开发的课程制作平台,有点类似于CMS内容编辑系统。用户无需手动编辑*.json文件就可制作adapt课程。Adapt Authoring Tool的安装需要一些技术储备,我们会在接下来的adapt系列文章中介绍它的安装方法。

最后总结一下:

  • 页面(Page)包含1个或多个章节(Article)。
  • 文章(Article)包含1个或多个组块(block)。
  • 组块(Block)包含1个全宽(full-width)组件或2个半宽(half-width)组件(Component)。
  • 组件(Component)是用来模块化创建课程内容的。

Adapt就是 ABC!

* 题头图来自 unsplash.com

1 条评论

社交媒体

现在就跟我们在微博上进行互动吧!有什么问题和建议,也可以发邮件给我们。