ELH Challenge 107

This week challenge is to design a navigation menu for using on a mobile phone or tablet.

By the help of new functions of Storyline 360, it is easier to create mobile friendly courses. When you work with Storyline 2, it needs more planning to create a mobile friendly e-learning course or a game.

Although I always checked my courses how they look on different devices before publishing them, I hadn’t designed a course which seemed like a mobile app before.

Inspiration

I am a great fan of Elevate Brain Training app for its design and game mechanics. In one of their games, in which you are to find the words whose letters are scrambled in given time, they use birds to show your progress. When you find the answer, one of the birds fly away from the scene. I played this game so many times that I wanted to see if I could create a game similiar to it.

Result

This slideshow requires JavaScript.

After creating a mobile menu similar to Elevate’s, it was time to add some animations to make it more attractive. A simple gif animation helped a lot while trying to give more game feeling to the quiz.

When it was shared in Articulate Community pages, “How I made the birds fly,” was asked a lot.

Firstly, there is one slide for each quiz and variables to change the state of the birds. When the correct answer is chosen, it jumps to next layer and the birds’ state changes according to the score. To make the birds fly away, I used gif animation and motion paths. When the state of the score changes, it moves. I did the same thing for the stars. I prepared six different states of them and when the variable (score) changes, they do too. There are six different scores in the game. Countdown timer was used in the main layer with birds, and background. If you don’t check the ‘pause timeline of the base layer’ countdown will go on.

Here you can see it in action;

Seeing that it became very popular among the community members and learners in our school, I wanted to create new games by using same menu navigation and with different mechanics. Here you can see two new examples;

Ships

 

Flat Quiz Game

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s