Last month, I decided to put some learning games together for my six-year-old. Using Articulate Storyline, I created some simple math, vocabulary, and geography games.
I had so much fun building the games that I kept adding layers of complexity to my initial design. Starting with my simple slides, I just added one trigger at a time and grew the project bit by bit. About two weeks in, I realized I’d made a template better suited for big kids like you and me.
The color palette came out of the design mapping process. I walked through the design map to identify the elements, fonts, people, sounds, and textures. Elements included oceans, maps, globes, landscapes, and more.
While I was pulling the elements together, one of my map elements overlapped an ocean image. It was the classic “You got your chocolate in my peanut butter” moment. The rest is history.
Applying a Sandy Texture
One of the textures I identified was sand. I liked that one so I added a little noise to the slide background to create a sandy feel.
Designing the Navigation Elements
Using color variations from the ocean color, I created four button styles. Again, this is where design mapping really helps. I would like to tell you I’m a color genius but the reality is my colors came from the sea.
I knew I needed seven buttons—one for each continent. I played with several layouts including horizontal and vertical.
Since I really liked the initial slide background design that played off the ocean colors, I decided to go with a bottom, horizontal navigation.
Designing the Quizzes
The overall structure of the course took some time. I knew I wanted the questions to load in a lightbox, so that was my starting point.
My design challenge was deciding where I should put the quiz launch slides for each continent. I could place each question and quiz in its own scene, or separate the questions from the navigation.
In the end, I placed the navigation elements on one slide. Doing so meant I would also need to place the quiz launch slides on slide layers.
I like this approach because it separates the quiz slides from the main navigation. Most of the course logic is contained on the starting slide.
I hope this demo gives you some ideas for ways to build your own quizzes. Even if you don’t build complex quiz interactions, this type of example is a good way to pick up some new production tips and ideas for learning more about Storyline.
I’m working on a video workshop for this project to walk you through how I built the entire project. The format will be similar to the Visual Feedback Meters and Folder Tabs Interactions workshops. You’ll get the practice files and video tutorials that walk you through each step.
In the meantime, download the template and play around with it. If you have any questions or feedback, let me know by leaving a comment. If something doesn’t make sense or isn’t working the way you think it should, ask me and I’ll help you out.