Creating Interactive Educational Content

Tumult Hype animations are great for demonstrating difficult concepts and organizing information. From small interactive quizzes embedded in a course webpage to complex animations in textbooks, the possibilities are nearly endless. In this post, I’ll cover techniques for getting the most out of Tumult Hype within an educational setting by answering these questions:

What’s possible with Tumult Hype?
How do I create iBooks Widgets?
Where can I embed my animation?

This post also contains practical examples and working demos:

Basic Quizzes & Scoring
Next Level Quiz Design
Scene Navigation for Presentations
Working within SCORM (Sharable Content Object Reference Model)

To begin, I’d like to show off a couple demos of interactive content produced using Hype without writing a single line of code.

What’s possible with Tumult Hype?

If you’re just getting started with Tumult Hype, I highly recommend you visit our Tutorials page and watch videos demonstrating Hype’s core features. Our Gallery includes many examples you can download and examine.

To demonstrate educational content produced with Tumult Hype, I’ll begin with TimeMaps. Click the screenshot below to explore one map created by TimeMaps, a company consisting of teachers and cartographers who use Tumult Hype and other tools to teach history using a wide array of interactive maps. Using scenes, textual information, and map overlays, TimeMaps packs enormous amounts of information onto a single page to great effect. Many TimeMaps are also available as iOS applications:

If you’re interested in the process of preparing and planning infographics, read our interview with a Konstantinos Antonopoulos, who produces interactive content for Al Jazeera English. A course on ‘Data Driven Journalism’ at the City University of New York also provides tutorials for working with charts and data in Tumult Hype.

Another example of great information design, ‘Helvetica vs. Arial’ by Magnus Ulvsbäck demonstrates the differences between two similar fonts. Using the same export from Tumult Hype, Magnus has made Helvetica vs. Arial available as an iPhone app.

Dr Bill Heitler at the University of St Andrews in the UK leveraged Hype to demonstrate “a neural mechanism for the brain to detect very small differences in the time of arrival of sound at one ear compared to the other, and thus determine the horizontal (azimuth) origin of the sound.”

These are just a few examples of the types of interactive content you can produce with Tumult Hype. For more inspiration, visit our gallery & Animation Gallery on our Forums.

How do I create iBooks Widgets?

Tumult Hype has supported the creation of HTML widgets for use in iBooks since the beginning and remains a popular tool for producing interactive content for iBooks. Dropping HTML widgets into the free iBooks Author application is easy. Since one Tumult Hype document may be easily exported directly to an iBooks widget and HTML5, building once and deploying everywhere is simple.

For a bit more information about how to export your animation as an HTML widget for use in iBooks, read ‘A Teachers Intro to Using Tumult’s Hype 3 to Create Widgets for iBooks Projects‘, our documentation or dig a little deeper by reading our knowledge base articles our reading our blog post on iBooks Widgets.

Where can I embed a Hype document?

Because Hype exports standard HTML5, MPEG-4 videos, and animated GIFs, Hype documents can easily be embedded almost anywhere. Visit our list of our exporting guides for help. Managed content management systems like ‘WordPress.com’ often have security restrictions which deny Tumult Hype document embeds.

Quizzes & Scoring

Tumult Hype animations are great for illustrating difficult to explain concepts, but they can also be built to test knowledge. The example in this knowledge base article demonstrates a simple example of a scored quiz. The document uses this basic structure:

One question per scene
Selecting an answer plays a ‘Correct’ timeline and adds one number to the ‘score’.
Incorrect answers show a ‘Wrong’ timeline.
On the final scene, a JavaScript function displays the score inside of a box. (This uses a single line of code)

Using this basic structure, you can create quizzes which display a final score to the quizzed.

For a quiz system with many more options, please check out SlickQuiz, maintained by jewlofthelotus. SlickQuiz, and other quiz systems based in HTML and JavaScript can be easily embedded within Tumult Hype documents as an HTML widget.

Here’s one example of a quiz produced with Tumult Hype by Steven Morgan for a photography course. This quiz requires no code:

To examine this interactive, download the .hype document.

Next Level Quiz Design

The three quizzes included below each has their unique way of visualizing questions and providing feedback for answers. By adding additional animation to answer feedback as shown in these examples, quizzes can be much more than just a question and list of multiple choices. To download these example documents, click here. To try out these quizzes for yourself, click the thumbnails below:

Scene navigation for presentations

If you’ve create a long Tumult Hype document with multiple scenes to show off in class, here’s how you can use the arrow keys to navigate between scenes: First, select your scene, and add a new JavaScript that runs ‘On Scene Load’. Add the following JavaScript:

document.onkeydown = checkKey;

function checkKey(e) {

e = e || window.event;

if (e.keyCode == '39') {
    // right arrow
    hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushRightToLeft);
}
else if (e.keyCode == '37') {
    // left arrow
    hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushLeftToRight);
}
}

An example document can be downloaded here. If you don’t care which button transitions to the next scene, you can also use the ‘On Key Press’ > Jump to Scene action in the Scene inspector.

SCORM (Sharable Content Object Reference Model)

We occasionally receive questions about using Tumult Hype within Learning Management Systems (LMS) that support SCORM objects. To use a Tumult Hype element as an object:

Export your Tumult Hype document
Create a manifest file (in XML) that contains references to each of the images, media, and files used in your Tumult Hype file
Optionally setup rules that report results back to your LMS.

Please see this knowledgebase article on SCORM to download a Dreamweaver extension or Grunt task built for generating this file.

Let’s keep this going

Try using Hype in your classroom today to create presentations, e-learning materials, and quizzes. If you have any questions about using Hype, please get in touch.

Tumult Company Blog