Drag & Drop

Lightboxing Some Art

May 10, 2018 By Jackie Van Nice 2 Comments

Select Image to Launch Demo

This week’s Articulate ELH challenge is to show an example of how lightboxes can be used in e-learning.

An Arty Lightboxed Drag-and-Drop Question

The Idea

When I think of lightboxes I think of art projects, so art seemed like a good theme.

I also wanted to show how they could be used in e-learning as exporable objects to play with something you may already know about, or to explore something new. (Exploring is always good.)

The Design

I wanted the interaction to be grounded in an art museum, and I pulled the museum image from Storyline 360’s content library. I designed the color palette and general look and feel based on that image.

Feedback in Case of a Chagall and Rothko Mix-Up

Feedback in Case of Any Chagall/Rothko Mix-Ups

The Lightboxes

Each lightbox is a drag-and-drop interaction set to allow you to try again as many times as you’d like. In these examples there are only two possible answers, but I think there’s something about that simplicity that makes them kind of fun to play with. I also included hints on the try again screen, and feedback and a bit more information on the success screen.

Because a lightbox in Storyline only displays at 80% of a regular slide’s size, you’ll want to be sure that your images and text are large enough to be viewed at that reduced size when using them in projects. It also helps to take full advantage of your screen real estate when laying out screen objects.

The Result

It’s simple, but kind of fun! Ready to play with some arty lightboxes? Try them out right here!

Escape Room Game: When Birthday Parties Go Wrong

May 2, 2018 By Jackie Van Nice 17 Comments

Select Image to Launch Demo

This week’s Articulate ELH challenge is to create an escape-room-style game. (Scary!)

Party Equipment

The Idea

My first escape idea was going to have you desperately trying to catch your international flight before it took off, but the mega-talented Jodi Sansone beat me to it (great minds) and did a lovely job, so it was back to the drawing board. In the end I came up with the idea of frantically trying to make a last-minute birthday cake for a little girl’s birthday party: Let the terror begin.

The Design

Images

My first step was was to build a vector kitchen. As the days went by I couldn’t help but wonder if I could have saved time and energy by building a real kitchen.

The Kitchen Stage

These are mostly flat design vector images. I pulled a few from the 360 Content Library as icons or illustrations and manipulated their size, shape, and/or color (juicer, grinder, a few objects on the results screen, maybe the measuring cup… it’s all kind of a blur at this point), but I purchased most and manipulated them in Adobe Illustrator. The focus is on the table and mixing bowl in the foreground.

The Game

The Birthday Girl

I wanted three outcomes:

Success: You got the right ingredients in the bowl in the allotted time and achieved the desired result.
Failure: Your time ran out and things didn’t end well.
Keep going and try again: You put an incorrect ingredient in the bowl and have to dump out the bowl and start over, but the timer is still running.

The Timer

Update: I’ve made the timer available as a free download right here! The issue was the timer and finding a way to give it a two-minute duration that I could reliably start, stop, and restart. Very long story short – after trying lots of options I needed to design and build something quickly, so I winged it with an incredibly simple animated timer.

Timer recipe:

1 two-minute-long ticking sound effect
1 timer ding sound effect
1 image of a kitchen timer with a white face
1 inserted yellow circle shape
1 inserted red circle shape

Superimpose the yellow and red circles on the timer face, in that order, and give each one a 59-second wheel entrance animation. Place the red circle so it starts at the 59-second mark on the timeline. The clock and yellow circle start at the beginning of the timeline, along with the ticking sound effect. The ticking will end when you trigger the timer ding to go off at the end of the 2 minutes, at which point you could jump to a layer or another slide or whatever you’d like to do.

Once in action you’ll see the yellow circle animating in for the first minute, turning the face from white to yellow. In the second minute you’ll see it go from yellow to red, letting you know you’d better get that cake in the oven.

In this game the timer helps increase the sense of urgency, looks flat and cute, and serves its purpose.

The Drag-and-Drop

In the end, this was pretty straightforward. There are three items that require a two-step drop process before they can be used successfully, but you’ll find written hints to give you a clue about what to do and every item is labeled if you tap on it. Searching for clues and things you can use is all part of the game!

The Result

Ready to make a cake for the birthday girl? Grab an apron and make it happen!

Select Image to Launch Demo

It’s a Kid-U-Cational (+ Free) Template!

August 22, 2015 By Jackie Van Nice 6 Comments

Select Image to Launch Demo

This week’s challenge, in honor of you brave back-to-schoolers, is to create an education-themed template and demonstrate how it can handle a real-world project.

The Template I Started With

The Idea

Lots of Room for Subtopics

I went back to the last template I made (using pieces and parts of Nicole Legault’s and Tom Kuhlmann’s fab templates) with the intent of making it over in a kid-friendly way.

Since that template has a free menu and a good amount of depth, it needed a pretty large topic. I brainstormed until I came up with everyone’s favorite – the science fair project.

The Design

Content Slides with Depth

Since most of the science projects I’ve seen get sketched out on paper, I thought graph paper would work well as the themed background.

The color palette came from the blues of the graph paper lines and the purple ink I was seeing in lots of kids’ projects – plus I added a perky green to warm it up.

The kid-riffic fonts I used are KG Happy (it always makes me happy), and Schoolbell. I found the main menu and quiz icons at flaticon.com. I like them a lot and they’re free to use with attribution.

Select Image to Launch Demo

The Result

Ready for a template you can use to teach any number of topics? You can see it here, and even prove your mettle in the quiz.

Get It!

If you’d like to customize it yourself, you can also grab it on the download page.

Have fun!

Making a Simple Prototype

August 4, 2015 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This week’s challenge is to create a functional prototype of a course using existing OSHA fall prevention content, so I whipped up some stick figures and headed for the job site.

The Idea

Original Content

David Anderson gave us a 194-slide PowerPoint presentation to use as our source material, the idea being to choose a few slides to work with. I chose a section about preventing falls involving floor holes.

My goal was to focus on the instructional design approach, basic layout, and functional design (as opposed to visual design) to show how I’d approach and design the entire course.

The Design

The Process at the Point of Need

Naturally I wanted to start with a compelling scene featuring the learner as the protagonist. After adding proper context and a scenario where the learner would need to apply the information being presented, we’re off and running.

Once the problem was established, I was able to present the basic structure of this mini-course – the steps required to deal with the problem – at a point of need to give the learner a reason to want to find out what to do next.

A Real-World Challenge

At each step I then presented a simple challenge to roughly approximate what they would need to do in a real-life situation. I didn’t bother with up-front content presentation, so each challenge requires the learner to use his or her predictive abilities to ponder, guess, and explore the options. I’d call it Engagement 101.

This approach means that feedback (in addition to the scenario itself) needs to provide the information the learner needs. I kept the feedback brief and subtle in this demo, but would use more detail in the actual course.

The Result

It’s a simple and straightforward prototype that shows you exactly how I’d approach the content. The visuals and details to be added later are – compared to this – the easy part.

David wanted us to spend an hour or two on this, but for me I can’t imagine designing a course approach, layout, and basic functionality in that amount of time; though I certainly admire anyone who can. Let’s just say this took longer.

If you’d like to enjoy it in all of its stick figure glory, you can start preventing falls right here.

Converting Static Content Into Interactive Knowledge Checks

August 1, 2015 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

A Zippier Part of the Course

For this challenge, David Anderson asked us to take static content and turn it into an interactive knowledge check. I grabbed some of the least appealing content I know and got to work.

Version 1: The Grim Original

The Idea

Version 2 Improvements: Visual Design, Hover, & Audio

I did a cost share course for a nonprofit a few years ago, and even though I was able to perk most of it up, there were a few screens that didn’t lend themselves to perking.

My idea was to take the worst – a screen about parts of a government code – and turn it into an interactive knowledge check.

The Design

Version 3: Fully Interactive Knowledge Check

I took my improved version (you can see the client’s original above) – and challenged myself to leave the layout intact.

I converted it into a drag-and-drop interaction that actually took quite awhile to get exactly as I wanted it.

My focus was not only on making it clean and functional, but on giving the learner the freedom to play with it as much as they’d like.

The Result

What I like best is that it gives you a chance to interact with the content. You can puzzle it through and learn a bit along the way.

What I like least is that it’s not the memorable, motivational, or meaningful star I would like it to be – but you have to pick your battles. 95% of the course uses scenarios and good context; but the client’s goal was to introduce the idea that each part of the code has meaning – not to memorize it. If you needed it on the job, you’d look it up! (Who doesn’t love performance support?)

Ready to get all interactive with a federal regulation? You can do it right here!