Smart Decisions Course
e-Learning and Training
At the focus of this course are over 1000 hand-drawn illustrations that supplement the text. As HTML5 elements, these images were animated using CSS3 transformations and transitions using our favorite HTML5 tool: Hype. This combination of HTML5 and CSS means that the animations can be “played” directly in the browser window, and don’t require the user to have a player installed on their device, as with media created with Flash. This means the course’s animated images and content is available to users with any modern web browser, including those on mobile devices, many of which do not support Flash.
Over 1000+ Animated Illustrations
After reviewing the original content for the course, we determined along with our client that animated illustrations would add an exciting and engaging aspect to the course. These images are presented front and center in the interface, and each one is designed to support and supplement the key concepts in the text.
Our process for developing these illustrations started with breaking out the content into pieces that would make up the “pages” within each of the six sections, ranging from a sentence to a few paragraphs each. Then we discussed each content piece and storyboarded our ideas for the entire course in rough sketches. We then took these sketches and drew them as digital vector images, applying a unique style and color scheme. These images were then imported into Hype where we animated and synched them to the audio narration.
While each “page” of content plays a small scene of animation, it’s notable that the entire scene is not being animated as one image, as with original animated movies where characters and objects were redrawn for each frame to show their movements. Instead, the images in each scene of this course exist separately, and are programmed individually to move as they do. This is in fact a huge time saver, since some images that appear frequently can be reused, without having to be redrawn for each scene. In the end we drew over 1000 individual digital illustrations for this course!
eLearning Activities & Assesments
Interspersed within each section are a number of activities to help reinforce key concepts and review students’ comprehension of the course materials. In many cases we were able to take the activity presented in the original course content and reimagine it with interactivity for the online course. The types of activities vary: sorting terms into their appropriate categories using sliders, or by dragging-and-dropping elements on-screen; going through the steps of a creating a spending plan by filling out tables that calculate monthly amounts of income and expenses; calculating their debt-to-income ratio; and matching terms to their appropriate definitions, to name a few.
Self-check assessment questions also appear throughout the course to quiz students on the content in the form of true/false or multiple choice questions. Once the student selects an answer, text and audio feedback indicating whether they were correct or incorrect appears on the screen. In the case of incorrect answers, students may select another answer until they achieve the correct choice. While this course did not collect a tally of correct or incorrect answers to score students, this functionality could have been incorporated.