Using an Interactive Timelines in eLearning

Two bumblebees and a monarch butterfly on yellow sneezeweed flowers

The Concept

I’ve wanted to build a short demo involving bees and their importance for quite some time now. This week’s eLearning challenge involves creating an interactive timeline, and I thought it would be a perfect match. My timeline is about halfway through the demo, and shows which native plants are blooming for pollinators during different months of the growing season.

The Method

To show this information, I used a combination of layers and states. I created a layer for each month (one button set), then I added three circles to allow learners to click through three different flowers for each month. I grouped those three circles as a button set, then added a second state of selected for each.

Once I had the structure in place, I went about building the flower pages themselves. Since you don’t have much control over objects while editing them in a state, I found it easier to do this on a spare slide and then copy them into the selected state when I had everything perfect. The structure is pretty straightforward once you have it figured out, but copying the pictures and text for 21 flowers was a bit tedious.

The demo is a bit more involved that what I would typically do for a challenge, but I love sharing this kind of information. Watching bumblebees wander from plant to plant in my garden is one of my favorite summer activities. I even got to show off a few of my photos I’ve taken in this demo!

The Result

Click here to see the full interaction.

Click here to download the timeline tabs interaction .story (Storyline 2) file.

Creating an eLearning Board Game

Hi Ho Cherry-O Cover

The Concept

This week’s eLearning challenge was number #137, Share Your Classic eLearning Board Games. I’m a huge fan of board games, so I knew I had to participate. I also liked that the submissions had to be new creations, as there had been a number of different game challenges in the past.

I chose the game Hi Ho Cherry-O as the basis for my submission. This is a game I used to play as a kid. It’s aimed toward 3-6 year olds and it teaches addition, subtraction, and chance. The goal of the game is to harvest all of the cherries from your tree before any of the other players. The spinner determines if you successfully harvest a certain number of cherries, or if disaster strikes and your bucket gets knocked over or raided by a dog or bird. I chose to build a single-player game. A two-person game wouldn’t be that bad to build once you have the basics complete.

The Method

I chose this game because it requires a number of different elements: first, you need a way to randomly generate new value for the spinner, then you need the spinner to move, and finally, you need the number of cherries on the tree and in the bucket to change. Additionally, you’re working with constraints regarding the number of cherries (it cannot be negative on the tree or in the bucket).

For the first part of the challenge, I used Javascript to generate a random number. Storyline doesn’t have a random number generator built in, so I found two options while researching how to do this. The first option is using a question bank. The question bank will pull a random slide, which can change your variable (in this case the spin value) to a certain number. I couldn’t get this method to work with repeated spins.

The other option is to use Javascript to generate a number. I’m not super familiar with Javascript, but the code is pretty simple to be able to generate a number between 1 & 7. Once I was able to set the spin value variable, then I was able to change the number of cherries harvested value. This, in turn, allowed me to change the state of the tree and bucket. I created eight states on the spinner (the default with no animation and then seven for the different spin positions), 10 states on the tree cherries, and 10 for the bushel cherries. Once the number of cherries harvested reached 10 or more, the game was finished and the learner is directed to the last slide.

The Result

Click here to see the full interaction.

I had a lot of fun building this interaction! The list of triggers on the main game play slide is a bit intense, but it was neat to see everything come together. I also got a lot of practice editing free stock images in PowerPoint and creating my own. Apparently free cartoon images of bushel baskets are in short supply. Who knew?

Using Toggles to Show Before & Afters

A New Look at Pluto

This week’s eLearning challenge was #100, Before & After: Showing Visual Comparisons in eLearning. I thought this challenge would be a great one to get my feet wet for the first time participating in challenges.

The Concept

The challenge was to create an interaction visually comparing two images. I decided to combine this with challenge #97, which looked for creative ways to use toggle or switches.

The Method

This challenge has numerous possibilities depending on the images that were used for the before & after. Rather than choosing a historical before and after shot, I chose to go with pictures of the same object, just taken with different technology.

I started the interaction by building a toggle switch- a rounded rectangle with two different states with the button on different sides. I replicated these two states on my pictures and the labels for each picture. I then created a true/false variable set to false by default. Once I had my variable, I created a trigger so that when the toggle was clicked, the variable changed to the other value. The remaining triggers changed the state on the photos, labels, and toggle switch depending on the variable value. I also added a custom information button leading to another slide which goes into a bit more detail about the two different photos.

The Result

Click here to see the full interaction.