?本文原来是知乎上的一个回答[1],反响还不错,所以完善了一些细节重新整理发布一下
2020 年 12 月 17 日,回形针工作室上新了一款新产品——「一个人工智能的诞生」互动教学视频[2],因为从高中开始就接触了 MOOC,对在线教育这块儿一直很感兴趣,所以第一时间就跟进体验了了一下他们的体验课——「识别数字」[3]。
基本操作——识别数字
体验课的大致流程是这样的:
作为一个软件工程师,自然对于这个网站的实现非常非常感兴趣,Web 前端基本没有秘密可言,F12
后直接看看他们是怎么做的。
mp3
和 mp4
请求,然后在 Elements 面板里搜到了 <video />
标签,所以说视频还是通过 video
播放的;<canvas />
标签,并且在互动环节时会切到 canvas
,所以说互动环节是基于 WebGL
实现的基本的技术选型搞清楚后,从技术上看,回形针的这个互动视频并没有什么创新可言,国内外有很多的互动广告,都是用这套组合拳实现的:过场动画用视频,交互操作用 WebGL;从商业上看,可能确如回形针所说,这个可能是世界上第一款互动教学视频。
如果只是说技术实现,可以说到这里就分析完毕了,但是我看到一些评价,说回形针的这个创新是独创性的,这个评价就有些过高了,因为在图文时代,这种图文交互教程还是不少的,下面我简单捋一捋交互教程的发展历史。
大部分的交互教程都是依托于 Web,所以他们的发展历史和 Web 的发展是高度绑定的。
比如说十几年前 Flash 是网页实现交互的主流方案,互动教程也是基于 Flash 实现的。比如说斯坦福大学的这个网页[5],可以通过 Flash 的实时交互学习透镜公式:
gaussian
后面 Flash 逐渐没落(Adobe 将在 2020 年 12 月 31 日彻底停止支持 flash),随着 HTML5 标准的兴起,大家可以用 canvas/SVG/WebGL 去实现前端交互,这时候很多互动教程也走入大家的视野:
比如说线性代数教程 immersive linear algebra[6] 就用了 canvas 技术实现交互操作:
immersive linear algebra
SVG 相关的互动教程也有一些,比如 NN-SVG[7] 这个项目就利用 SVG 实现了 FCNN 的可视化:
FCNN
WebGL 的交互教学视频也有一些,比如你想学 shaders 怎么写,完全可以借助 the book of shaders[8] 这个互动教程网站,直接修改案例源码,实时反馈自己的学习成果:
the book of shaders
我在 2018 年看过一个基于 WebGL 实现手写数字识别的交互教程——TensorSpace LeNet[9],当时的感觉就非常惊艳,我想回形针的这个体验课对这个教程也有一些借鉴:
TensorSpace
至于前端方面知识的互动教程就更多了,很多博客都借助 CodePen[10] 分享代码,用一个 iframe 引入到自己的网站,这样读者就可以实时改动代码验证自己的想法。所以说,互动教程这个概念很早就有了,太阳底下没有新鲜事,并没有一些人想的那么划时代。
梳理完互动教程的发展,我再谈谈我个人的看法。
我个人认为无论媒介是视频还是图文,互动教程的意义是非常大的,因为实时反馈可以大大降低初学者的学习成本。
最典型的就是线性代数这门课,据我所知大部分人的反应都是学完一脸懵逼,完全不知道这玩意儿有啥用,考完试就全忘了。而事实是线性代数在计算机里应用极广,这时候我就推荐他们去看 3Blue1Brown[11] 的「线性代数的本质[12]」这门课,配合可视化演示,彻彻底底的搞懂线性代数是个啥。
当然互动教程也不全是优点,缺点(或者说短板)也很明显。
最后还是希望这个项目能长久发展下去,在我看来,这才是在线教育应该有的样子。
参考资料
[1]
回答: https://www.zhihu.com/question/435245052/answer/1633004916
[2]
「一个人工智能的诞生」互动教学视频: https://www.bilibili.com/video/BV1XV411h7Ro
[3]
「识别数字」: https://jibencaozuo.com/product/1/episode/0
[4]
PixiJS 5.3.3: http://www.pixijs.com/
[5]
这个网页: http://graphics.stanford.edu/courses/cs178-10/applets/gaussian.html
[6]
immersive linear algebra: http://immersivemath.com/ila/index.html
[7]
NN-SVG: http://alexlenail.me/NN-SVG/index.html
[8]
the book of shaders: https://thebookofshaders.com/
[9]
TensorSpace LeNet: https://tensorspace.org/html/playground/lenet_zh.html
[10]
CodePen: https://link.zhihu.com/?target=https%3A//codepen.io/
[11]
3Blue1Brown: https://space.bilibili.com/88461692/
[12]
线性代数的本质: https://www.bilibili.com/video/BV1ys411472E