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的内容结构,首先你要了解课程、页面、章节、组块与组件之间的层级关系,请看下图:


Adapt课件的内容结构:PABC

课程 (course)

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

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

页面 (Page)

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

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

章节 (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就是 A, B, C!

说明:原文首发在 我爱E-Learning在线学习社区,简书由作者本人(几乎)同步更新。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 从今天开始我们将发布一系列关于Adapt的博客文章详细介绍Adapt响应式课程开发框架的特点、安装及使用等内容。 ...
    samumist阅读 803评论 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,450评论 1 45
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 4月16日,浸淫在全中国进出口晴雨表的广交会现场,感受中国家电制造业半年来的发展新趋势的我,突然接到通知去参观学习...
    沪钢木子阅读 933评论 1 5
  • 是日诗 日照窗前竹,露湿后园薇。 夜蛩扶砌响,轻娥绕竹飞。 白露,一年中最可人的季节。 暑热渐渐散去,此时的微风徐...
    正能量收获阅读 1,160评论 0 0