Smart Decisions Course

This financial literacy course for college students features a custom interface, over 1000 animated illustrations, multiple-choice assessment questions, and learning activities – all designed, animated, and programmed using HTML5 and JavaScript. Both English and Spanish versions include audio narration and text transcription for accessibility. Funded by CitiBank’s CitiFoundation, the project was sponsored by Dallas County Community College District’s (DCCCD) central office.

View Site

Developed in Hype with HTML5 & JavaScript

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.

The three navigation interfaces – the right-hand vertical toolbar and its buttons, the up and down progression arrows, and the progress indicator – were similarly programmed using Hype. Their position on the outside edges of the screen and their responsive sizing on smaller devices is made possible via CSS. The addition of JavaScript programming adds interactivity that allows the user to perform a number of functions. For example, selecting the sound icon button reveals the audio controls, allowing the user to pause, replay, mute or unmute the audio. From these navigation interfaces, the user can also jump to different sections or topics in the course, bookmark their location to return to later, access a glossary of terms, and more.

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!
View Demo

 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.
The activities and assessment questions were both programmed using Hype, which uses HTML5, CSS3, and JavaScript to create interactive scenes that can be easily imported into web pages, and viewed in modern browsers. For learning institutions such as DCCCD, this means that more students have access to the course because they don’t need to be physically present to receive the information. This course, in fact, is open to anyone with access to an internet connection and computer or mobile device.
Back to Portfolio