It Came From Outer Space
Overview
This concept project is built around Astronomy, one of my passions. The project is an adaptive quiz built around the idea of two intrepid space explorers searching for extraterrestrial life, and answering questions about space along the way. The questions are constructed around the plot and drive the story forward while testing the learner's knowledge at appropriate levels. The quiz adapts, as learners get more correct answers, the difficulty of the questions increases. Events in the quiz, such as encounters with aliens, are gamefied and dependant on how well the learner is performing.
The quiz is built entirely in Articulate Storyline 360 with the branching scenarios developed in Twine. It also utilizes xAPI and JavaScript to track learner experience.
.svg){kind=logo}
Design
For the first phase, I sat down with my favourite word processor and stared blankly at the screen for a few minutes. After a few cups of Earl Grey, I came up with the hook involving a journey through the far reaches of space to search for life. So, the initial phases would start simple, around Earth and the Solar System, and as the quiz progressed, the player would move further and further with the difficulty of the questions, increasing.
This idea played into the progression mechanic, where when the player progresses from a simple to harder level, they gain a more advanced engine that lets them travel further (or through time). this also meant that anytime the player was not doing well and had to be moved down to a simpler level, the engine would stop working or run out of fuel.
Players can progress to a more difficult level if they get a streak of 3 consecutive correct answers. The only exception is the Extremely Hard level that requires a streak of 4 in Ultra Hard.
Players get moved to a lower level if they get 3 incorrect answers (not necessarly consecutive).
You Are The Alien Ending
The Dead Simple level contains simple questions like "Which planet are you from?", and so on. Getting all these answers incorrect results in the ending where the co-pilot discovers that you (the captain) were an alien in disguise. This ending also brings up a remedial astronomy class that is presented as a way to learn more about Earth and the space surrounding it.
Rescue Ending
The number of questions in each level are tied to the amount of fuel in the engine being used. If the learner exhausts all questions (being below the goal level) then this ending sees the learner call for rescue. This ending also brings up a remedial astronomy class that is presented as a way to train before your next mission.
Barren Planet Ending
If the learner complets the goal of collecting 120 points but answers mostly Normal level questions, then they successfully complete the quiz. However, since they did not answer the more difficult questions they get this ending where they find an undiscovered planet with all the characteristcs to supposrt life, but the planet is barren.
ET Micro-organism Ending
If the learner complets the goal of collecting 120 points and answers mostly Hard level questions, then they successfully complete the quiz. However, since they did not answer the any Ultra-Hard questions they get this ending where they find an undiscovered planet with all the characteristcs to support life, and simple micro-organisms exist on this planet.
Advanced Aliens Ending
If the learner complets the goal of collecting 120 points and answers mostly Ultra Hard level questions, then they successfully complete the quiz with the best ending. This is where they encounter an alien spacecraft and make contact with alien beings for the first time ever.
The flowchart gives a rough idea of how the story will move from scene to scene. So, for the next part of the design I used a tool called Twine, which is used to create branching storylines. The diagram below is a screenshot of the story developed in twine. The story used the same flow outlined in the flowchart but uses variables to control the flow from passage to passage. This allowed me to check the logic in the flowchart and correct any incorrect branches or conditions.
Twine
Interface
Every level starts with an Interface section. This sections initialises all the variables on the first visit. That is:
- Answered: number of questions answered in that level is set to 0.
- Demoted and Promoted: Boolean that indicates where the user has come from, both set to false.
- Score: In the Normal level, this is initialised to 0, since the user first enters this level.
Every time the users moves to a level the Streak and Wrong variables are reset to 0. A message is displayed to the users advancing the story based on whether they were promoted or demoted. A promotion gives a message of finding or acquiring a new engine or technology. A demotion means that the engine associated with the previous level has failed.
The last part is equivalent to a switch statement that checks how many of the questions in this level the users has answered and starts them off on the next question. This section can be removed when working with question banks (see Further Improvements section)
Correct Answer
Getting a correct answer takes you to a correct feedback screen that adjusts the value of three variables:
- Streak gets incremented by 1.
- A Correct variable for the level gets incremented (this is used to check which ending to display.)
- Score is incremented based on the points for that level.
After adjusting the variables, a set of conditional statements is used to check where the user should be taken next:
- If the user has a Socre above 120, they are taken to an ending screen.
- If the user has not crossed the Streak level, they are taken to the next question in the level.
- Else (that is if they have crossed the Streak level), they get promoted to the next level and the Promoted variable is set to true.
Wrong Answer
Getting an incorrect answer takes you to a wrong feedback screen that adjusts the value of two variables:
- Wrong gets incremented by 1.
- Streak gets reset to 0.
After adjusting the variables, a set of conditional statements is used to check where the user should be taken next:
- If the user has not crossed the Wrong level, they are taken to the next question in the level.
- Else (that is if they have crossed the Wrong level), they get demoted to a lower level and the Demoted variable is set to true.
Ending
This is where all the Answered variables come into play. Using nested if else statements the precedence goes from the highest level to the lowest. Based on which level contributes most to the score the user is sent to an appropriate level ending. Simple!
The low-scoring endings also include a link to a remedial tutorial.
The final step of the design process was to plan out the user interface (UI). I designed a rough sketch of the UI keeping in mind that I needed to show the user the following: their character, the assistant non-playable character (NPC), an icon for the engine, the amount of fuel used, and a badge to summon the assistant.
I initially found the components I needed on various free vector stock sites and put them together in GIMP. Here’s my version of the Alpaca NPC stitched together from an alpaca vector and a photograph of an astronaut. The overall look and feel was not consistent and didn’t keep with my colour palette. So, I sent it off to a graphics designer friend and told her to make it look pretty, and results!
.png)
Here’s the final UI, the space outside the window is a transparent layer. I used the same UI for every question and replace the background with an image from NASA’s website related to the question. Now, let’s open Storyline.
Development
Opening scene, your spaceship takes off, you leave the planet Earth behind. The title "IT CAME FROM OUTER SPACE" creeps in across the screen. The perfect 80s B sci-fi flick. The initial animation was created using motion paths in Storyline, basic task. The user is then debriefed on the UI controls and their mission by second-in-command Captain Alpaca.
After that, the users is left to take the quiz, the interface changes to the quiz screen. The quiz is a standard MCQ template provided by Storyline. However, the backend does not use the submit button and instead choosing an answer triggers the correct or incorrect answer feedback.
At the top right is a badge to summon Captain Alpaca, which acts as a hint screen. A user gets 3 hints at the start and an extra hint is added when they progress a level. (Click here to see the triggers associated with the Alpaca badge.)
The next task in the design process was to add the relevant triggers based on the flow of control outlined in Twine. It would be nice if Twine could be integrated into Storyline using Twine for flow control and Storyline to design the slides. However, without this integration, it was just a task of creating the relevant variables and triggers to control those variables and move to whichever slide was needed. Here's a screenshot of the triggers used in the feedback layers.
Finally, the endings, this was again a matter of adding the right triggers and moving the user to the relevant slide. The ending scenes were created using simple Storyline animations. As stated earlier in the design, one ending leads to a screen with a button to take a remedial class. Current the button ends the experience, however, in the actual course, this would lead to remedial lessons and later allow the user to take the quiz again.
xAPI
Experience API (xAPI) is a brilliant tool that allows designers to track course usage and many other interesting stats related to a course. In this quiz, I used xAPI to check how users performed on the quiz. Using the stats, I can update the quiz in the future.
- If some questions are too simple (everyone gets the answer correct) the question can be replaced. Similarly, if no one gets a question correct, then it is too difficult and need to be moved to a higher level or changed.
- If a distractor is never chosen then it is obviously incorrect, and can be changed in a update.
- If most users end up spending all their assists, then more assists need to be added or the difficulty of the questions need to be tweaked.
Further Improvements
I would like to think of this gamified quiz as a work in progress. There are many changes I would want to implement to improve functionality as well as user experience. Some of these points I realised while developing the project, some I could not implement due to the limitations of storyline functionality. Here's a list of changes I would love to see in V2:
- Customisable player characters: Users enjoy games where they can customise their character to their liking. However, since this is a learning experience rather than a full-flegded game, I would give the user a set of maybe 3-4 characters to choose from.
- Randomised questions: The current versions of the game uses normal storyline question slides with variables to check how many questions the user has answered so that they can pick up from that point if they reach back to the same level. This means that every time a user starts a new game they will get the same questions in the same order. Using storyline's inbuilt question banks could solve this problem, however, question banks do not allow you break in between and resume at a later point, also the use of a results screen does not lend itself to the way my story works.
- Typed dialogue: Remember the old RPGs, where character's dialogues used to build up as if it was being typed out. That can be done in Storyline using some JavaScript. Maybe in V2.
.png)
.svg)