Free Template Tuesday #7 – Tumult Hype “Capitals”

United States of America FlagWhile perusing the Tumult Forums, someone was having trouble with animated buttons. The idea was to animate the active button, then return to the previous state when not active. Hype can do that! To show how that’s done, I started working on another free Hype template. The end result is a project that grew larger than expected. If you’re looking for a way to create quizzes, the “United States Capitals Quiz” template could be a great starting point. It tackles complex issues, such as working with arrays and randomizing the display of that data.

The quiz uses data from a two-dimensional JavaScript Array. If that sounds complicated, then just think of it as a standard spreadsheet. The rows are the values for new questions, the columns organize the question text, the choices and the answers.

Each question has four choices. A different answer is placed in each of the buttons. It’s just like a multiple choice exam in school — A, B, C and D.

The trick to creating animated hover actions is using a separate timeline for each button. When the mouse is hovering over the button, its timeline is played forward. On mouse out, the timeline is played backwards.

The problem is that “Mouse Over / Out” events are not mobile friendly. An iPhone doesn’t include a mouse. Yet, the same basic concept can be modified for creating touch events. It’s just a matter of managing forward and backwards animations.

If you’re interested in how the project works, download the Capitals Hype Template.

The quiz part of the template is a bit more involved. If you have questions about how the quiz was created, perhaps a discussion can start in the comment section below.