在电子学习的比较之前和之后显示#335

E-Learning的前后示例#335:挑战|搭档

如何显示两张图片的对比,而不超载你的幻灯片的文本?同样地,在电子学习中,你如何展示概念的前后?

在本周的挑战中,你将创建一个互动来展示两幅图像之间的视觉差异。在新闻报道中,这种效果经常被用来表示……的变化海岸线火山抗议活动城市规划艺术改造历史改造海啸景观破坏对旅游业的锁定影响冠状病毒封锁期间的卫星照片飓风洪水,等等。

使用交互式滑块进行前后比较

前后效果使用两张图片和一个滑块或按钮来显示比较。虽然《故事线360》并没有特定的功能来创建前后对比,但你可以使用滑块、刻度盘和切换按钮来模拟相同的效果。

这是我最喜欢的滑块例子之一,也适用于本周的挑战。使用机器Wayback检索老版本的清晰表达网站,乔安娜让学习者探索Articulate.com的设计变化。

然后现在:articulate.com

查看示例|乔安娜·库尔佩斯卡|@elearningjoanna

新闻工作的前后比较

像《纽约时报》、美联社和《今日美国》这样的新闻网站经常使用前后互动来显示火灾、地震和飓风的影响。

新闻工作的前后比较

在火之前和之后的Notre-Dame

您还可以在国家公园使用的拖车前找到。我喜欢这个例子,显示了休眠对熊的影响。使用滑块,您可以在冬季休眠后损失其体重三分之一后看到什么熊。

2020年胖熊周滑块比较

2020年胖熊周滑块比较

本周挑战

本周,你的挑战是创建一个互动,在视觉上比较两个图像。

你可以使用任何你喜欢的技术来比较图像。虽然我们很想看到真实世界的例子,但本周的挑战更多的是关于课程设计师创造互动比较的互动方式。你想要什么就给我们看什么吧!

分享您的电子学习工作

  • 评论:使用下面的评论部分与发布的示例和博客文章共享链接。
  • 论坛:开始你自己的线并分享您发布的示例的链接..
  • 个人博客:如果您有博客,请考虑写出关于您的挑战。我们将链接回您的帖子,因此您共享的伟大工作会更加曝光。
  • 社交媒体:如果你在Twitter或LinkedIn上分享你的演示,试着使用# ELHChallenge所以你的喷气机可以跟踪你的电子学习凉爽。

上周的挑战:

为了帮助您将本周对上周挑战的挑战进行比较,请查看创意方式课程设计师在电子学习中使用随机数变量。

新的电子学习挑战?

每周电子学习挑战是否有持续不断的学习、分享和建立自己的机会电子学习投资组合。你可以跳入任何或全部以前的挑战随时都可以。我将更新Recap Posts以包含您的演示。

74评论
Tracy Carroll.
乔安娜·库尔佩斯卡
丹尼尔·斯维特
保罗沃德利
厘米厘米

嗨Paul,是的,运动路径和擦拭相同的速度。但是有一种方法(从我读过几种方法)来增加用户控制的揭示。这是一种滑块和状态,这简单有效,尽管有些劳动密集型。这是一个链接http://blog.keypointlearn.com/2015/02/18/before-after-image-slider-in-storyline--an-experiment。.story文件是在文章中提供的。我在PS中创建切片以精确度并保持无缝。以下是作者的成品产品:http://dev.keypointlearn.com/xcl73_sl2/wall/v4/story.html joanna kurpiewska(她的挑战是朝上的)为另一个使用滚动面板的方法提供了一个youtube链接,作者(Nejc Zorga Dulmin)说它可以与滑块或按钮一起使用,因此用户可以互动和控制...扩张

安娜Gumkowska

我的视频的示例,比较传统销售和咨询的例子,内容根据我们在视频中听到的内容逐渐出现。虽然这种反射照片的镜子将被栅格进行这种比较。:)背后的主要想法是在Learner可以专注于核心外卖的方式突出视频中的主要概念/点(如果它很长并且充满了不同的细节,它很难记住视频的主要观点)。它还以简单的视觉上吸引人的结构缩短,使他们更容易学习和记住。设计挑战是将所有东西融合在一起 - 视频,不同的元素和整个内容在一起,以便它仍然看起来很好,乐于乐于吸引力。https://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1fb0qdi3s14t31dnl2ea2qd140t9 ...扩张

罗比基督教
凯蒂Slobodzian
大卫安德森