It’s been a while since the last time I took part in an #ELHChallenge.
The #361 challenge for the e-learning heroes community was to show how a text or email conversation can be shown in elearning

Learn more

This is a demo that includes both types of interactions.

So, in the first section, you can look at a text conversation, via mobile phone, between two friends.  In the second section, you can look at an email conversation between an employer and an employee.

The first one was initially part of the Euroinvestment project I developed a couple of years ago while the second one was part of the Robogirls project that I developed last month. Obviously, there are some inconsistencies (colours, fonts, etc) but I tried my best to adjust them. 

Email conversation interaction

To make this interaction happen I had to use Adobe’s Illustrator, to create the email-alike image. 

Creating a custom email image allowed me to make a graphical representation that is aligned with the project’s colours and, at the same time, look more realistic compared to what I could achieve using Storyline 360 alone. 

For the learner’s name, I used some javascript. This javascript extracts the learner’s name from the LMS and fills it in automatically in the %username_DONOTRENAME% variable. In our case, this is done in the initial slide, as the sample file you viewed is not hosted on an LMS but on my website.

Smartphone text interaction

The text interaction is actually a single slide that consists of four layers. To make the visual part happen, I again, used a custom mobile phone vector I found on Freepik, which I adjusted to fit my needs, using Adobe’s Illustrator. 

Base layer

The base layer is relatively simple. The learner clicks send, and their message appears on the screen. When the animation of the message ends, the next layer, called “response” is shown.

text interaction elhc 361

Response layer

The response layer includes four messages that are actually Laura’s responses. Two are just dots, indicating that Laura is typing while the other two are her messages. Whenever a message is received, a custom message sound is heard. 

When the timeline ends on this layer and everything has appeared on the screen, the Question layer appears. 

text 3 interaction elhc 361

Question layer

Initially, the project aimed to teach learners how to convert money from EU Euro to Hungarian Forint. So, to make this happen, I used two numeric variables, %exchange and %money. To choose how much money the learner wants to exchange, they must pick between three buttons. Each button changes the previous variables based on the learner’s choice. In the following slides, not covered by the demo, the learner needs to find the arithmetic equivalent of their choice to Forint. 

As soon as the learner picks the money they want to exchange the slide advances to the Final slide.

text 2 interaction elhc 361

Final layer

Based on the learner’s choice on the previous slide, the value %money% adjusts the message the learner is about to send to Laura. When the learner clicks send, the message removes itself from the text field and appears on the smartphone’s screen. Making the text conversation realistic was the most challenging part to develop. The reason for that is that I had to use Scrolling panels to make the flow of the arriving and previous messages look smooth.