Learn. Show. Repeat.

Tag: E-Learning Heroes

Bingo Time!

Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

E-Learning Heroes Challenge #98 – E-Learning Buzzword Bingo Games. The brief: This week your challenge is to create an e-learning buzzword bingo card or interaction.

My first idea for this challenge was to create a bingo card using the most overused words in learning, for example engagement or thought leader or wearable technology. But then I had another idea, instead of using words you might hear at a conference why not pictures of people you might see at a conference (so strictly speaking I did deviate from the brief a little with this one).

As DevLearn is coming up soon I figured that would give me a good list of folks who I could include and as it turned out, they’d be the ones whose sessions I would like to attend if I was going to the conference. The idea is that you mark them off if you see their session or see them around during the conference.

The first thing I did was make a list of people to include on my bingo ‘card’ and then locate an image of each. I inserted my first image into PowerPoint and used the cropping tool to make the image as close to a square as I could. Then as I wanted a round picture of each person I was able to use the ‘Crop to a Shape’ feature and select a circle:

Once I had my circle image, a quick right-click ‘Save as Picture’ and I was done. I then repeated this process for each image.

Next I jumped into Storyline and inserted a background image of stars in the night sky (from Shutterstock) because these folks were some of the stars of DevLearn! I placed each image on the slide and because it’s a game, I wanted to allocate points for each person you see. To do this, I used the ‘states’ area and I created a second state for my first image:

I used the disabled state (because then it could only be selected once) and I just darkened the image and placed a text box on it with their name and points value. Then when I was finished, I clicked ‘Done Editing States’. To save some time, I used ‘Format Painter’ to copy the formatting from my first picture to all my other pictures and all I needed to do was change the name of each person on their disabled state.

I then added a trigger to my first image to change the state to disabled when clicked:

Again, to save time I copy and pasted this trigger onto each image:

In order to keep score, I needed a number variable which I created and called ‘Points’ and then I added a trigger to add points to the variable:

I was also able to copy and paste this trigger onto all my other images saving me some more time. Finally I added a reference to this variable in the bottom left corner %Points% that changes each time an image is pressed.

The only thing left was to make something happen when all of the people were chosen so I simply added a layer with the following trigger:

As the challenges are a good place to practice using Storyline, I also thought I’d try something that I haven’t done before which was to add an image as a background to the published HTML output (behind the Storyline project). I reused the stars image and this tutorial from David Anderson explains how to do it.

All up the demo took less than two hours hours to put together. You can see it for yourself by clicking on the image below to launch the demo:

Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

September 20, 2015
Making Videos Interactive

Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

E-Learning Heroes Challenge #94 – Interactive Video: Visual Interviews in Online Training. The brief: This week your challenge is to create an interactive video interview.

Every so often David Anderson posts a weekly challenge that I know I want to participate in (even if it’s not in the current week) and this was one of those challenges. I haven’t done a whole lot with shooting my own videos (apart from the Smartphone Video challenge) so I wanted to have a go and complete this one at some point. I noticed that for some reason, there weren’t as many entries for this challenge and I wondered if folks thought that it would take too long or that they didn’t have the right equipment. My demo was put together fairly quickly (using myself as the victim, I mean subject, also saved some time) and my equipment was not high tech. While the result was a simple looking entry it still does the job and here’s how I did it.

On a recent plane trip for work, I mapped out my ideas on paper (as I usually like to do):

I didn’t want to create anything too big or too complex, so my idea was to use four questions and I would be in the centre of the screen with the questions around me. When you click on a question, the video answer would play. I also had an idea to add an ‘introduction’ clip which give some instruction as to what to do – so I’d need five clips altogether.

Over the past few weeks, I seen David and other Community members who had used video make them look more interesting by placing a cover over the video so that it didn’t have the standard rectangular video on a slide look. I really liked the idea and I wanted to try to do something similar. Here’s the slide with the video sitting on it:

and the same slide after the cover is put on:

I used PowerPoint to create my cover and the first thing I did was to set up my PPT slide in the same aspect ratio as my Storyline project (4:3). Then I inserted a rectangle the same size as the slide and then inserted a circle shape (with no fill) and positioned it in the centre of the rectangle. Then by selecting both shapes, I was able to use PowerPoint’s ‘Merge Shapes’ feature and ‘Combine’ to create a rectangle with a circular hole in the middle.

I filled the shape with my chosen blue colour and saved it as a picture that I was able to then insert into my Storyline project. I now had a cover!

In Storyline, the video intro sits on the slide itself (also known as the base layer) and each of the video answers sit on their own layer, so I also put my cover image on each layer too so that the demo would look the same as each layer is shown. I kept my questions simple and in keeping with the circle theme, I added four circles with a question in each. The triggers would be a simple ‘Show Layer’ when a question was clicked.

Now the framework of the demo was set and all I needed to do was record the video introduction along with the answers to each question. I don’t have a proper video camera or equipment, so I used Storyline’s ‘Record Webcam’ from the insert video options and recorded each of my answers using my laptop. As you can see my set up was very basic:

Yes, that’s our spare room which has all our clean washing that we need to put away (everyone has a room like that don’t they?) and my laptop is sitting on the clothes dryer to get the right height but you can’t tell from the clips although the sound quality could be better.

It took a few takes to get my eyes looking straight ahead and for me not to make a mistake with my answers, so it probably took about half an hour all up to record.

As I was putting the demo together, I had an idea that instead of separate video clips, I could include a GIF image of myself that would create the effect of me waiting for the next question. For this it sliced a five second clip of myself from one of my questions and went to a website called http://makeagif.com/ where I uploaded the clip and it created a looping GIF image for me that I could add into my demo.

Unfortunately this idea didn’t turn out as good as I would have liked for a couple of reasons, one was that the quality of the GIF wasn’t the same as the clips so it looked different and secondly I really needed to start and end each clip with the same pose and expression, which I tried to do but it didn’t quite work.

Because of this extra clip, I needed to add an extra layer to my project and the triggers became show the ‘GIF Layer’ after the introduction and then for each layer, it was show the ‘GIF Layer’ when the media completes (i.e. after each video on the layer had finished). So essentially the demo jumps from an answer layer to the GIF layer.

When I placed my videos on the slide and each layer, all I had to do was make sure the cover sat in from to the video file and adjust the position of the video so that my face is roughly in the middle of the circle.

After some testing and adding some animations I was ready to go. All up it took about four hours to put together and while it’s a simple demo, I think it works but you can see for yourself by clicking on the image below to launch the demo:

Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

August 25, 2015
Showing My Work #11

Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

E-Learning Heroes Challenge #18 – Using Characters in E-Learning. The brief: This week your challenge is to show us how to use characters in e-learning. You can create static slides that show character-based ideas, or build something more dynamic to show the interaction between characters.

This challenge is all about using characters and my inspiration came from a similar interaction I’d seen a few years ago, although it was laid out differently and used video.

It’s essentially a question and answer style interaction where users can ‘ask’ a question and see the response from each person within a group. The whole interaction is built on one slide.

I started by inserting a square for my characters then duplicated it three times, so I had four squares. Then I used the ‘Align’ function to evenly space the squares across the slide. I use align a lot because it takes care of evenly arranging objects. You can align object to the slide or select several objects together and it will space them evenly between the first and last object:

I used the illustrated characters for this demo but you could the use photographic ones or add your own images. I put one in each square then used the ‘Group’ feature so that it became one image (and not a square and a character).

Then I added a title (Ask the Team), some instructions, three question boxes and a large rectangle where the responses would be displayed. As there’s a few objects on the slide, naming them in the timeline is helpful to avoid confusion and it’s a good habit to get into.

This interaction uses 12 layers (3 questions x 4 people) to show responses to the questions. I set the layout on the first layer, then duplicated it using the ‘Duplicate Selected Layer’ button in the Slide Layers panel:

Then I was able to change the character every fourth layer. Again, naming the layers is important so to not get the layers confused. I went with P1, A1 (Person 1, Answer 1); P1, A2; P1, A3; P2, A1 and so on.

Now that everything was laid out, I needed to make it work. Firstly, I used a cool Storyline 2 feature called ‘Button Sets’ which make objects work like a button and only allow one object at a time to be selected. To create a button set, select the objects, right-click your mouse and then click on Button Sets. I created two button sets – one called Questions and another called People.

Secondly, I needed some triggers to make the whole interaction work. I created a trigger to show a layer when the state of a question and a person is selected:

For the layer P1, A1 to display, both Question 1 and Person 1 need to be selected. I then copied and pasted this trigger 11 more times and adjusted it for the three questions for each person.

While this demo is a template and uses text-based responses, you could use audio or video responses.

Click on the image below to view the demo:

If you’d like to use the source file to customise and use in your projects, you can download it here.

Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

April 18, 2015
Showing My Work #10

Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

E-Learning Heroes Challenge #52 – Using Interactive Sliders in E-Learning. The brief: This week your challenge is to show creative ways to use sliders in online learning. You can focus your slider on functionality or visual design.

I enjoy watching cooking competition shows on TV like MasterChef and My Kitchen Rules. Often on these programs the contestants are given the same ‘core’ ingredient and they need to create a meal that hightlights this ingredient. In a way, this is similar to the weekly challenges in that you create a demo based on a core theme or Storyline feature.

On the shows there’s always at least one or two people who don’t achieve desired outcome or as they say on TV ‘fail to make the core ingredient shine’. In other words, the core ingredient doesn’t stand out and gets lost among all the other ingredients in the dish. On reflection, this happened to me with this challenge and I’ll show you what I mean.

In this challenge the ‘core ingredient’ were sliders (not the tasty little burgers) a new feature for adding interactivity in Storyline 2:

In an eLearning project, a slider allows learners to reveal information, pictures etc. as the thumb is dragged along the track. When a slider is inserted into a project, you can customise it for your needs via the ‘Slider Tools’ tab:

In the above example, the slider is divided into 10 ‘steps’ which are the number of movements the thumb makes along the track.

I was struggling for an idea for my demo but I happened to see a tweet where a guy called Nick Barclay had recreated movie posters using circles and colour. So I thought that I could do something where movies were represented with colour and as you drag the thumb the colour changed. Then you need to guess the name of the movie.

I came up with four movies and I used state changes to change the colour of a rectangle as you drag the thumb along the track. I added triggers for each step on the slider:

Then, because the demo was about movies I thought it needed to be themed and set in a cinema. So I found an image of a movie screen, resized the rectangle to fit the screen, made the track transparent and changed the thumb to a popcorn image:

Then, because there were four movies it needed a ‘home’ screen to start from. Plus this would allow people to choose the order in which they completed the demo. I added a screen with four movie poster frames and some instructions and each movie branches from the home screen. Here’s how it looks in Storyline:

Each time you go into a ‘theatre’ you come back to the home screen until all four are completed. After each cinema was visited, I used a change of state on each movie poster along with some true/false variables to darken the colour of the poster which indicates that it has been completed.

Then, because I wanted people to enter their guesses for each movie into the demo I needed something that allowed for this, so I used a text entry variable. These are cool because you can type information into one part of a module and it can be used in another part (and this can be done more than once if needed). I jazzed it up so that it fitted in with the overall theme:

Then, if people were typing in their guesses, they needed to see if they were correct so I needed another screen that showed their answer (using the text variable again) compared to the correct response. I came up with the idea that you were playing for ‘free movie tickets’ for each correct response and I found a ticket image and duplicated it four times:

Then, to tie it all together I added some intro and closing screens along with some music to help set the scene!

Can you see what happened?

I started out using sliders but kept adding a little bit more, then a bit more and by the time the demo was finished I had variables, changes of state, branching and some sliders in there too. At the time, I was satisfied with how it had turned out but I didn’t realise how diluted the sliders demo had become until a few days after I finished it and I went back and looked at some other entries. By adding more and more to the demo, I’d lost sight as to what it was supposed to be about in the first place. So while I didn’t really make the slider interaction shine, I did learn a valuable lesson and that is to stay focused on the reason why you’re creating something in the first place.

I still think it’s a good demo but unfortunately it doesn’t really meet the brief and showcase the use of sliders. To see for yourself, click on the below image to view the demo:

Let me know what you think. You can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

March 26, 2015
Showing My Work #9

Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

E-Learning Heroes Challenge #71 – Teaching Math Concepts with E-Learning. The brief: This week your challenge is to design a short lesson to teach one or more math concepts. The inspiration for my demo came from one of the source material examples that David provided, where teachers are using LEGO bricks to teach kids fractions. I also went to their website to check it out further.

$Teaching fractions with Lego$

My idea was to re-create this method for learning about fractions in an eLearning piece for this challenge. After playing around with some ideas on paper, I came up with a three screen demo: Introduction > Visual Explanation > Try it Out.

Here’s a behind-the-scenes look at how I did each screen.

Screen One: Introduction

I like to have a brief intro to my demos and most of my challenge entries have one. Originally, I had a LEGO character and some LEGO pieces (I created the pieces using shapes – circles and rectangles – along with some shadow) flying onto the screen but it wasn’t quite what I wanted as I felt it was a bit dull. As I’m using LEGO as the teaching method for this demo, the LEGO Movie was in the back of my mind and I thought it would be cool to make the pieces come alive and enter onto the screen. I created a basic ‘animation’ using multiple copies of the images and the timeline. Here’s what the Slide View for this screen looks like:

Each image has been duplicated five times and I used the timeline to display an each image from each group one after the other (less than 1 second for each image). Here’s a section of the timeline that shows what I mean:

So when you look at the intro screen, it looks like the same image is moving from off-screen onto the screen. I deliberately wanted the objects to change position as they move in and I think the effect looks pretty good.

Screen Two: Visual Explanation

Next, I wanted to explain the concept of fractions and to do this I used an 8-stud LEGO brick because it can be divided into 1/2, 1/4 and 1/8 pieces. On this screen I showed the whole followed by the fractions and then how the fractions add up to the whole. For this, I used the timeline to introduce the pieces individually and show their relationships with one another. Here’s part of the timeline:

Screen Three: Try it Out

This is where the learner gets to have a go. I used the 8-stud brick and the learner needs to select from a group of bricks the one that would cover half of it. A layer shows depending on the brick they select and gives feedback on their choice. Learners can also have another go if they select incorrectly or repeat if they want to try it again. My original idea was to have lots of bricks and have different combinations that would cover half e.g. 1 + 3 and 2 + 1 + 1 etc. but I found it became too complex with all the different combos and keeping track of the selections. I tried using number variables but it didn’t work like I wanted to so I abandoned the idea.

If this was a longer course, I would have included more ‘trying out’ as well as other fractions – 1/3 and 1/5 as well as more try it out screens.

I was also reminded of the importance of clearly labelling all objects in Storyline projects especially when you have a lot of them, it makes it easier to keep track of everything!

Anyway, here’s my demo, you can click on the image to view it:

$Math Concepts$

Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

March 6, 2015