Interactive Coloring Book Activities in E-Learning #323

Interactive Coloring Books in E-Learning #323: Challenge | Recap

Interactive coloring books may not be your go-to interaction for most e-learning projects, but they are a fun way to get learners to interact with the screen.

They're also a fantastic way for course designers to sharpen their course-building skills by working with multiple triggers, states, and variables. Let's look at a few examples to get a better idea of how these interactions work.

Changing Colors with Click Events

Using click-and-reveal events to change object colors is probably the most straightforward and intuitive approach because it simulates what users expect to do in the real world. Choose a color and then select the part of the illustration you want to color. And here's a fun example to help get you started.

Changing Colors with Click Events

View project | Download | Dan Graham | Website | @EzLearnin

Changing Colors with Drag-and-Drop

In this example, click events are combined with drag over events to change objects' colors. The way this works is really cool. First, you click one of the tree ornaments to select it, and then you drag the eyedropper tool over the color swatches to change the color. I like this example because it shows another way to create these types of interactions.

Changing Colors with Drag-and-Drop

View project | Learn more & download | Paul Alders

Changing Colors with Dials

Here's a fantastic example that uses interactive dials to adjust color values on an object. The chameleon object contains multiple custom states that change based on the combined value of the dials.

Changing Colors with Dials

View project | Learn more | Jackie Van Nice

Basic Drawing Book

Here's another example I found when I was putting together this challenge. Even though it's a simple example, I'm thrilled I found it because it's ideal for anyone who's just getting started with this type of interaction.

Drawing Book

View project | Learn more & download | Chibuikem Nwani

Challenge of the Week

This week, your challenge is to share an interactive coloring book or similar activity that lets users customize the colors in one or more on-slide graphics.

Keep in mind that this type of activity can be designed with either basic states or variables. You’re welcome to use one or both techniques in your example.

Last Week’s Challenge:

Before you sharpen your e-learning crayons, check out the visual storytelling examples your fellow challengers shared over the past week:

Creating Visual Stories with Interactive Photo Collages #322

Interactive Photo Collages and Visual Stories #322: Challenge | Recap

 

 

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

120 Comments
Lindsay O'Neill
Jodi M. Sansone
Jodi M. Sansone
Kimberly Eng
Laura Coulter
Angela McGuigan
Samara Reyneke
Sherri Sagers
James Addoms

I’ve been too long in posting a challenge and this one seemed liked a fun one that combined my interest in Storyline dev and my passion for the elegance of mathematical proofs, (though I’m no mathematician myself!). “Exploring the Four Color Theorem” is my entry for the Interactive Coloring Book challenge. I’ve always been fascinated by mathematical problems, and this is an example of being able to sandbox a problem from graph theory that states: Given any separation of a plane into contiguous regions, producing a figure called a map, no more than four colors are required to color the regions of the map so that no two adjacent regions have the same color. It was the first major theorem to be proved using a computer. I’d welcome ideas about a coding challenge. I added an answer key s... Expand

Ange CM
Melissa Santoso
James Addoms

Joel, When I started building courses years ago, I used PowerPoint for a lot of my media creation. My Photoshop and Illustrator skills are a little better now, but I still use an online tool that I discovered when I was trying to create scalable vector graphics (.svg’s) early on. Check this out: https://image.online-convert.com/convert-to-svg This tool does a pretty good job of turning any image into an .svg. I used it for my submission to this challenge. As long as you have a strong contrast between image and background, (or, better yet, have a transparent .png), you can pull down an image that will import into PowerPoint as a graphic. Once in PowerPoint, you can right click on the .svg and convert it to a shape. This will split the image into many different individual items. Ope... Expand