Today, that experience may involve textbooks, videos, or if your teacher or school district has sought out additional resources: an interactive animation crafted by SERP:

SERP and their role in Curriculum Development

The SERP Institute brings together researchers, practitioners, and designers in education to improve the learning and engagement of all students while empowering both teachers and students with greater agency. Their task is huge. They achieve this by partnering with school districts to define and explore their biggest challenges; SERP then brings in researchers and designers to co-create a solution with the school district. Over 1,200 teachers and administrators have contributed to their research and design work, and their tools have reached over 40,000 registered teachers.

Hype as a Tool for Dynamic Learning

A key element of SERP’s design work involves creating engaging and interactive materials, and this is where Tumult Hype plays a significant role. I had the chance to chat with Matthew Ellinger, the Director of Design at SERP about their use of Hype. He told me they began experimenting with Hype after a designer who had just graduated from Stanford joined their team and suggested trying out a few animations in Hype as a way to move beyond static materials. Initially, Hype was used for basic math concepts, allowing for interactive demonstrations of division, for example.

This initial success paved the way for more complex animations. Artist and illustrator David Dudley joined SERP and further embraced Hype to create visually rich and interactive explanations of scientific concepts. These animations provide a level of engagement that traditional methods often struggle to achieve.

Showcasing Engaging Animations

SERP has developed a range of compelling animations using Hype. One notable project was for New York City’s Middle School Quality Initiative (MSQI), where teachers identified science concepts that were difficult to teach on paper. One such topic was on wave action, shown below:

This animation is one in a large set of interactive animations built for teaching wave energy you can check out here. These animations allowed students to dynamically explore concepts like pendulums and wave mechanics, fostering discussion and providing language for later written descriptions. Similarly, the “peppered moth” story, illustrating natural selection through changing tree colors and moth populations, is another example of a scientific concept beautifully brought to life through Hype animation.

Another fascinating example that Matthew also highlighted is the “lemonade” animation, which visually explains the phenomenon of condensation on a cold glass of lemonade. The animation meticulously shows water droplets forming and dripping on the glass, helping students understand the behavior of water molecules in a way that’s difficult to observe in a real-life experiment.

Check out a big selection of SERP’s Hype interactives at the bottom of this post.

Why Hype Works for SERP

The team at SERP reaches for Hype to convey these concepts for a number of reasons:

• Dynamic Visuals: Hype allows for the creation of much more engaging and understandable visual models compared to static alternatives.
• Student Agency: Unlike videos, Hype animations allow students to stop, start, and revisit content, fostering a sense of control over their learning. This encourages interaction and discussion among students.
• Facilitates Deeper Exploration: The interactive nature of Hype animations can inspire students to ask “what if” questions and explore the real-world phenomena being depicted.

We’re excited to stay on top of what Matthew and the team at SERP creates next! The gallery below shows off more awesome animations:

Ali’s team creates interactive animations to augment and improve the vast library of textbooks her team distributes for free on the Apple Books Store for the College of Veterinary Medicine students. Interactives range from the flow of oxygen through the respiratory system to detailed 3D animations of bones and joints. By writing and designing their own interactive textbooks in-house, they can easily update, distribute, and control their curriculum.

Daniel Morgan @ Tumult: It was great to see the animations you shared with us — The common theme for your animations seems to be approaching a medical concept from multiple angles ‘states’. What has it been like creating technical and medical animations with Hype?

Ali Ennis: It has been so fun creating animations using Hype. It is so easy to use, which allows us to quickly add interactivity to any animation or illustration. The field of medical illustration is all about conveying and teaching scientific information and concepts in a way that is clear and engaging. This requires a lot of creative problem solving, and Hype has been a very helpful tool for us to use to solve learning problems. Standard linear animations are sometimes limited in how much viewers will actually pay attention and understand a concept. Hype allows us to challenge our users to dig into a concept, and it encourages them to do something in order to see how and why things change.

Why did UGA choose the iBooks platform for creating this type of content? Do you have any thoughts on the transition to Pages for book production?

We chose the iBooks platform right after it was released because we wanted to create user friendly interactive books that could include different types of widgets to increase learner engagement. For testing purposes, our vet students now are required to have a Mac laptop, which means the software limitation hasn’t been an issue.
The transition to Pages is worrisome because we rely heavily on the widgets we can use to incorporate interactivity into iBooks, especially html5 content. This helps the content come alive. We’re hopeful that Pages will add this feature soon.

We’re also definitely hoping to see full support for HTML content in Pages. Embedding web content is a huge missing piece in an otherwise complete transfer of functionality from iBooks Author. What were the biggest challenges you encountered creating medical animations for these digital books?

A big challenge was focusing on the main concepts and ensuring the most time is spent to convey them creatively and clearly. It’s easy to want to make an animation or illustration for everything, but of course, too many visuals can be distracting and can take away from what you want the students to learn.

Can you tell us a bit about the creative process for creating these animations? Did you have a different go-to tool for creating these before working in Hype?

Our projects almost always accompany text, so our goal is always to help readers visualize the content. The first step is deciding if an interactive is the best way to help students pause from reading to dive into a visual. From there, we will write out what the users will see and what type of interactivity to include. Depending on the complexity of the animation, I will start with a few sketches or a complete storyboard to map out what each interface and animation will look like. I create most of the interface elements for my Hype files in Adobe Illustrator and Photoshop. When a project includes 3D animation or rotating 3D models, I use Cinema 4D and Zbrush to create the models and animate them. From there, I will render a .jpg or .png sequence using Redshift and either bring those frames directly into Hype or do some editing in Adobe After Effects before importing them. We use a lot of layered frame sequences with sliders to show something rotating or changing over time.

A few sketches from Ali's process can be found below: 

Thanks Ali! Looking forward to seeing new animations coming down the line! Check out all the books published by the Educational Resources Unit at UGA here.

The tools educators like Ali depend on are going through a bit of a flux at the moment: Apple has discontinued their free tool for embedding interactive content in digital books, and its replacement (Pages) lacks support for embedding HTML content — a feature introduced a decade ago and used widely. Curriculum developers around the world depend on the ability to create textbooks that extend beyond simple image and video embeds. The ability to interact in a non-linear fashion with a piece of content puts the learner in control to explore, interact, and digest information in a way that feels more real to them. Institutions like the University of Georgia made large investments in iPads and Macs because of Apple’s unwavering support for educators and animators like Ali and the students they both serve. We hope Apple will bring the full spectrum of support they introduced a decade back into their tools.

Read more about the iBooks Author transition here.

We’re happy to introduce a project created by Iain Livingston, an ophthalmologist and researcher based in NHS Forth Valley, Scotland. Iain developed a more portable and accurate tool to test infant vision, improving upon techniques created in the 80s. In January of 2019, Iain published Testing Pediatric Acuity With an iPad: Validation of “Peekaboo Vision” in Malawi and the UK in Translational Vision Science & Technology covering his research, which was prototyped in Hype and is coming soon to the App Store.

Iain was kind enough to answer some questions about this project and his upcoming research in the area of infant vision:

Daniel: It would be great to know a bit more about how you created this test platform in Hype and how you translated the testing platform and research question into the prototype. Could you give me a brief explanation of the project and the goals behind it for a non-medical audience?

Iain: Infant vision tests have remained largely unchanged for over 30 years, comprising a set of large, expensive cards. I used Hype years ago to make a proof of concept test, where a child presses on a grating target and gets an animation and sound reward. It worked a charm, and I quickly noticed that children preferred a tablet-based test to the traditional cards, with the animated cartoon rewards increasing their interest and engagement. It was also ultra-portable and much faster. We formally evaluated this test with adult volunteers using a range of blurring lenses, and observed the paradigm was actually more reliable (better test-retest repeatability) than the reference standard. We then took the prototype to Malawi, where we do a course teaching ophthalmic clinical officers (non-medical) in Malawi to test vision in the very young. There, we recognised that a lower cost digital platform could be quite transformative, and undertook a clinical evaluation, echoing our findings from the adult cohort. We then formalised the build into an iPad app, Peekaboo Vision, which is an app that is CE marked as a medical device, and is the new clinical standard for infant vision testing in our Trust.

Daniel: Can you share what the physical ‘cards’ look like that are typically used for this type of eye test? It’s incredible that Hype can make these tests easier and cheaper to administer at scale and improve health outcomes.

Iain:  This video captures the reference standard:

The traditional card-based tests  (Keeler Cards, Teller Cards, Cardiff Acuity Cards, and Lea Paddles) are great, but we see Peekaboo Vision offering several advantages. We have a paper in submission that suggests the digital version (that started as a Hype prototype build) is superior to card-based tests in terms of the physical properties of the digital displays, combined with the software, when it comes to testing vision. One type of cards that the iPad app replaces can be seen on this page. 

Daniel: Can you share a video walkthrough of the prototype, or images from the app in use? During the test, what types of observations are the testers making?

Iain: In this video, you will see that in the first part, I am looking over the top of the screen to see where the child is looking.

I know the target will be in one of the four corners, but I can’t see the screen, so I tap the relevant corner based on where she is looking, and if that is where the grating is, the target is presented, until the threshold is reached. So the “eyetracking” is very manual! When the child increases in confidence during the tests, she starts bashing the screen where the target is, which is to be encouraged, as she is driving the vision test herself. We have a PhD working on taking the automated eye tracking to the next level. Still in R&D phase.

Daniel: Do you have any other upcoming projects you’re planning to use Hype to build?

Iain: The one in the video was an executable written in Visual Basic by a colleague. I made an HTML5 version as it meant we just needed to share a URL instead of a file, and it became platform agnostic (phone/tablet/Mac/window). We use this with screen share to test vision via VC, which allows us to do acute tests in a patient’s home. You can see a demo of this technology at 1:43s in this video presented by Andrew Bastawrous:

This video is actually of a .exe version that was not made with hype. We found that was a pain to run on hospital computers (recognised as a virus and was a nightmare to get white-listed for bureaucratic reasons) and also couldn’t run on a mac or tablet, so I made a new version with Hype that is working a charm on all platforms and super easy for all to access, and now set to be used in a multi-site clinical evaluation. Premise is the same as demonstrated: supervised home vision test to check children’s vision remotely during COVID-19. They would usually come to hospital for such a test in the UK.

Daniel: What new techniques are you trying to do with the browser-based version of the app? I imagine getting it to run on any laptop would make the test even easier to distribute and administer (though you’d have less screen resolution and no touch screen interface).

Iain: This test is conducted via screen share during a video call, with credit card pinch/zoom matching used to calibrate sizing before the test proceeds. The big benefit for us as clinicians is that we can see that the test is being conducted properly, and we control the test screens, just like we would if the child was present in the clinic. We can easily see if they are peeking through fingertips or cheating by moving forward towards the screen.

Daniel: Thank you for chatting with us Iain! Closing thoughts?

Iain: My pleasure. I love working with Hype. I’m sure hype will be a continued part of the development pipeline as we try to make vision tests more accessible in a browser-based way!

You can follow Iain’s work at: https://www.researchgate.net/profile/Iain_Livingstone 

Kirk DesRosier, an Instructional Designer at the Royal College of Physicians and Surgeons of Canada, recently shared an extraordinary educational game on our forums. The game is an “interactive simulation that puts you in the shoes of patient, resident trainee and physician.” 

We were really struck by what this narrative taught us about the inner workings of Hospitals. My knowledge of hospitals is extremely limited, and this project brought to the surface the range of interpersonal considerations that make a well-functioning hospital.  Beyond this insider’s view, a great deal can be learned from this project if you’re in the planning stage of a large scale educational or narrative-driven Hype project. The pacing and user interface design of this project is worth studying.

The project was created to help in recognizing and managing disruptive behavior in a clinical environment by taking the viewer through a medical case and viewing it from multiple perspectives. The educational game also seeks to poll its participants after completing the narrative which allows participants in a medical practice to earn MOC (Maintenance of Certification) points. Please check out the project here.  

As Tumult Hype has matured, we’ve seen larger and more complex projects where video, database integrations, and multiple modes of interactivity blend together to create a seamless experience. I asked Kirk a few questions about what it was like to produce something of this scale. Below we cover how Hype fit into this project, creating the user interface and interaction patterns, and some surprising results received from the poll data collected by the ‘players’.

Daniel Morgan: There’s a lot of elearning tools out there for producing narratives like this. How did you decide that Hype was a good fit for building out the framework?

Kirk DesRosier: It was an educated guess. We have the Adobe Creative Cloud here so I have access to whatever they called Flash now (Animate CC?) as well as Dreamweaver and a few other tools. Animate CC still kind of sucks. For a while they were working on Edge, but they killed it, took the name and merged flash into it. That’s when I found Hype. The new Animate CC is way too much tool for what I needed to do and a steep learning curve. I also found it buggy in the past and Adobe forums and support have never been that helpful to me when I do run into issues.  

I have about 15-20 years of experience building eLearning via various tools and I felt pretty confident Hype would let me do some things that I have not really seen or done before, like having the data visualizations and integrated discussions. I also wanted to go full screen and not many elearning development tools will let you do that.

I started using Hype a few projects ago and they got progressively bigger. I worked on a knowledge translation site where the doctor I worked with wanted to structure info on ‘Navigating Medical Emergencies’ into visual maps. Hype worked well organizing this information. Select any topic except for the drug summaries to see Hype content.

That was the first project where I actually researched what tools were available and Tumult Hype had very good reviews so I thought I’d give it a shot. It stood up well: no bugs, no crashes, great forums and support and I could see that I could go a lot further with it. My next project with Hype was a medical simulation project. That project incorporated video and a pop-up controller window to let an instructor manipulate a simulated patient on a second monitor while going through a critical care case and adjusting things in the case dynamically. Unfortunately I can’t share that document here. Hype worked really well for that project too and I became more familiar with it. I started integrating jQuery into projects to a greater extent.

For the Small Things project it was a natural progression and I did some searching on the forums to see whether there were limitations in size with Hype that might affect me. After some searching I realized it would work just fine. During development I ran into a couple of issues where looping animations were slowing things down but once I got those under control the performance of the project was great. I also had to eliminate a snowfall library I thought was super cool for the early December scenes because it really bogged processing down – not Hype’s fault though. Overall the Hype forums and documentation are great. The biggest issue I had was trying to keep my code concise. I ended up trying to call external functions that were in one .js file as much as possible versus having code attached to things all over the place. And duplicating chunks of code. It’s not that easy to pass variables to a function in Hype but some of that may also be my limited coding skills.

Daniel: Can you tell me a bit about how you decided to carry the narrative? You leveraged video, chat, and primary documents to take the viewer through the story. How did that planning process look on your end and what was this like structuring in Hype?

Kirk: Our unit does a lot of video based clinical learning scenarios so we have that skill in house. That being said, I have to say most of our projects are pretty dry and written in more of a textbook style. I wanted to try something more engaging for this given we wanted to get people to empathize with an entire patient journey and resident experience and the pressures of being part of the staff of a hospital. I did a few small samples of the journal approach and the team liked it so we spent time rewriting the narrative portion and creating journal entries.

The map was a way to tie things together… I was worried that in the end it would look like a scrap-booking project gone mad but I think people bought into it. The final presentation format was an iterative process. We focused on just one point of view first (the patient’s) and I had the main layout with the journal entries ready before we shot video and photos. Some people in my organization were hesitant as to whether doctors would want to have a more game-like experience and there was some discussion about whether they would get the user interface.  It kind of came to me that even older people I know like my mother in-law figured out texting at the age of eighty six so why not focus the UI on texting, something everyone knows.

Hype was really great in some aspects in that I broke down my interface into object oriented components and was able to re-use each new widget I created pretty easily. It also allowed for rapid prototyping and the ability to adjust my images really quickly to tweak things in Hype. My initial vision was to make things totally responsive and Hype would have allowed for that too but I ran out of time. I wanted the phone version to be a complete phone conversation but we didn’t have enough time to set that up. I also really liked the flexibility that using external style sheets gave me. We had to change the handwriting fonts many times. It turned out the during usability testing I realized that a significant portion of the population can’t read cursive anymore so changing the font was super easy via the external style sheet and a few small tweaks in Hype.

Daniel: What were the most interesting or surprising results you received from the polling / Quickbase data?  

Kirk: The data is still coming in –as of today we have about 300 people that have participated and about 60 from our membership which is greater than 45,000 so a long way to go. There are quite a few surprises:

• People are actually engaged and creating meaningful comments. Professionalism, bullying and harassment in healthcare can be attributed to huge societal problems and resident burnout, alcoholism and even suicide are real. We just had a visiting professor in at lunch today who mentioned that in the UK suicide is considered “just a job hazard” in medicine and that they are trying to change the culture there as well. I’m really surprised at the quality and quantity of comments so far.
• We collect data about the number of years in practice and total usage span. I was really surprised to find no significant differences between usage spans across the board. By this I mean that people who have practiced for >20 years are using it about as long as people that are <5 and everything in between. I guess everyone likes to have fun.
• Responses to the polled questions were also surprising. My colleague felt that everyone in healthcare was sick and tired and knew everything there was to know about “Just Culture”. As it turns out this was an overestimation. People seem to know very little going in.
• People still want more instruction and to make it easier. But at the same time the same people are saying they loved it. Go figure.
• We are also using a reflective pre-post evaluation to ask people about their knowledge gain in the topics, motivation to use what they learned and any barriers they foresee putting what they learned in action. In addition we have a 2 month follow-up (optional) to see how it went in practice. So far I am astonished at the positive gains people are reporting and the high level of motivation. It will be interesting to see the 2 month follow-up data. I don’t want to get long winded but if we can get enough people who work in healthcare to view this, we can expect some significant outcomes in terms of people being more aware of their behavior and maybe even treating people better…. Maybe even one less suicide.

Daniel: Any future projects planned like this for the hospital?

Kirk: The projects we do are targeted to our membership who work at hospitals throughout Canada and the world. Most of the topics are applicable to larger healthcare teams and International medical workers. There is nothing specific to Canada. The next project is about enhanced recovery techniques; if I can push for a game-like experience I would use Hype. It depends on the subject matter and I don’t know enough about it yet so tool selection is not determined yet.

 I’d definitely like to use Hype again if I can get the time commitment… Things I’d like to tackle are:

• Integrating the xAPI standard into a Hype project so I can offload data storage, standardized tracking and deal with progress reinstatement more elegantly. You could probably make it a part of Hype’s export feature pretty easily.
• Integrating AI and NLP. Our organization is responsible for accrediting Canadian Specialists and currently we do this by using standardized patients, essay based questions, multiple choice questions and other techniques that are manually reviewed and marked. I’d like to create a patient encounter that assesses skills and does not simplify things down to being multiple choice questions.
• More visualization! Many experienced doctors I’ve met talk about a novice approach versus the approach of a more experienced clinician and there is no denying there are differences in skill level. I think being able to visualize those approaches could be very powerful. Imagine if you tried to tackle a simulated patient encounter and could then visually see how you approached it versus your peers or more experienced physicians…. That would be cool! Hype allows me to offload the more menial coding tasks so I can focus on advanced stuff so It’s a great platform.

Thanks for reading!

Jake recently shared with us a few of his students’ projects at UWM in a great video:

https://www.youtube.com/watch?v=WSYyEWY46VA&feature=youtu.be

If you’re curious how Tumult Hype fits into a motion graphics or web design course, read on for a quick Q&A with Jake:

Why did you choose to teach Tumult Hype in particular for the course?

Hype was an easy choice for a whole host of reasons. In particular, the efficient user interface is simple, yet powerful, workflows for creating motion based – interactive graphic experiences allowed my students to begin developing their ideas for projects sooner, rather than spending an entire semester learning a piece of software. Hype is effective at supporting and enhancing the vision of a creative rather than dictating how to create within a piece of software.

Also, the Hype Reflect mobile app is an effortless companion to the development workflow, which is key, because my design students are extremely eager to prototype their ideas for mobile. Lastly, the cost of the software is reasonable. While we had a handful of licenses on lab machines, it’s an easy request to ask students to purchase a license of Hype for less than the cost of many text books.

What kind of prior knowledge do you think students need before getting going with Tumult Hype, or web animation in particular?

Beyond the foundational understanding of how to create graphics and the various “allowed” graphic types that work for web based projects, there is no prior knowledge required to begin working with web animation in Hype or any other web animation based software. With that being said; Students with a foundational level of experience with HTML and CSS (JavaScript was an added bonus), had a better understanding of why limitation and benefit parameters existed when developing within an HTML5, CSS3 authoring environment.

How did you structure the course?

The course focus revolves around developing solid prototyping skills for mobile user experiences. We began by nurturing the creative process through the creation of low fidelity prototypes. Utilizing paper, printed out iOS interface elements and cardboard, students explored their ideas for creating mobile apps. Students worked in smaller focus groups where each person had a specified role for challenging the user experience and basic interface features of one of their peers. Once this process was completed, they would take their feedback to the next iteration of low-fidelity prototypes and present their prototypes once again. Finally after two rounds of usability and interface feedback, they would begin implementing their high-fidelity prototypes within Hype and then subject those to the same focus group style of usability feedback. Based on the initial feedback of the high-fidelity prototypes, they could make any final modifications before submitting their final solution.

Thanks for sharing the video of projects your students worked on. Can you describe them?

Project 1 focused less on interactivity and more on the responsive nature of design for mobile. Their designs has to look good in both landscape and portrait orientations. Hype’s “Pinning & Scaling” feature was essential in demonstrating how to think about design responsively.

Project 2 was to build an interactive experience for an indie band, that would allow the user to play music samples and access upcoming shows and ticket information. In some instances, video was also added to the experience.

Project 3 was their final project and they had two tracks in which they could go. Track one was to create an application prototype that parallels or enhances a current or past project from another design class. Track two was to design and create a prototype for a game. The game prototype not only had to mimic aspects of actual game play, but it also had to have a developed objective or storyline attached so potential users could decide if they did or did not want to play the game.

Which of these projects was most exciting for your students?

The idea of having the opportunity to design a gaming concept was huge. In the later part of the semester, students had developed a confident skill set when using Hype, so they were eager to take bigger risks with the gaming track for the final project.

What surprised you when teaching the course? Any tips for educators planning a multi-week course with Tumult Hype?

Since it was my first time teaching a class with Hype as the primary conduit for mobile prototyping; I’d say many things. I was most surprised by the buy-in from ALL of the students once they discovered what Hype could actually do when implementing mobile prototype ideas and concepts. Once that was realized, I observed a very strong drive to push concepts and ideas much further when designing for mobile application experiences over web-only based designs. Mobile application design and development is certainly our current frontier.

My advice for educators would be to create an in-depth project for yourself that you would like to develop with Hype as the key development software. Take your own observations of discovery and apply that to the development of a class curriculum that provides the type of projects that you know your students wish they could create if only someone like yourself provided the opportunity.

Learn more:

• Previously on the blog: Creating Interactive Educational Content
• Want to try Hype? Download our 14 day unrestricted trial
• Ready to go? We have a generous education discount

Thanks for reading! You can follow Jake on Twitter @jseleven (and of course, we’re always listening at @hypeapp)

• 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:

1. Export your Tumult Hype document
2. Create a manifest file (in XML) that contains references to each of the images, media, and files used in your Tumult Hype file
3. 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.

It is way simple to directly export your animation to an iBooks Author widget:

• File > Export > Dashboard / iBooks Author
• Drag the generated .wdgt file into iBooks.
• Done!

As of Tumult Hype 1.5 (February of 2012) Hype has supported widget creation. The below explanation is for version 1.0.5, but may be an interesting read if you’re interested in the technical workings of iBooks widgets.

As you may have heard, iBooks Author uses the Dashcode HTML widget format for embedding HTML, so any HTML within that format can be embedded in a book. Placing your HTML within the dashcode format is pretty quick. You won’t be needing Dashcode, since we’ve prepared some of the required files (like info.plist) for this purpose. This is the general workflow:

Hype Export → Create a Widget → iBooks Author → HTML5 Animations within iBooks!

To get started, you’ll need a Tumult Hype exported document and iBooks Author.

Note: Your exported Hype document should be 1024 width × 648 height or smaller. This is the area of the widget space. Any size larger than this will be scaled down. Sizes smaller than this will produce a centered element in the widget preview space.

Creating a .wdgt file from a Hype export Folder

1. First, export your Hype document and make sure you have both ‘Also Save .html’ and ‘Create Enclosing Folder’ options checked. If you name your file ‘index’ then you will need to make fewer changes.
2. In the folder you’ve just created, add the file ‘Info.plist’, which you can get from our set of demo files here. Open that file with a text editor, and match up the name of your .html file to the value under the ‘MainHTML’ area. You’ll also need to match the width and height of your document. You can find your document size in the ‘Document Inspector.’
3. Set a preview image for your widget by adding an image named ‘Default.png’ to this folder. A quick way to do this is to go to your first scene, take a screenshot by pressing command+shift+4, and then click and drag over your scene area. This generates a PNG on your desktop which you can rename and move into place.
4. Now that you have Info.plist in order, and a default image, your folder structure should look like the image below. The final step to create your widget is to rename the folder that contains those files to have .wdgt at the end.

Importing your Widget to iBooks Author

To add your Hype document to a book in iBooks Author, go to the page where you’d like to place it, then click ‘Widgets’ > HTML. It’s best to be in ‘Landscape’ mode to do this. You’ll then see a new widget and a file button in the inspector where you can select the widget you just exported. You’ll notice that your ‘Default.png’ image is the placeholder for your animation. To preview your widget, click on it, then click ‘Edit HTML’. To see it on your iPad, plug it into your computer, then click the ‘Preview’ button.

You’ll notice that your animation will place once, so depending on the effect you’re going for, you may want a ‘replay animation’ button for your users.

That’s it! You now have an HTML5 animation within a book ready for iTunes.

Please note that the above article is a bit of history. For the most up-to-date information on widget creation, visit our forums.