Project completed by team Astronaut (IT02):
- Neil Hadziq Bin Noor Sharli (S10259465G)
- Vincent Hernando (S10257433B)
Our idea is to create a gamified learning experience about our solar system where the player starts on a planet and must answer questions and collect coins. Each correct answer gives them more coins which enables them to travel to the next planet.
Players win by going to each planet in the solar system and finally leaving the solar system. The players gather knowledge to answer the questions by exploring the planet they are currently on. There will be a leaderboard after the players complete the quiz that shows who has the highest correct answers.
We aim to create a user-friendly website that educates space enthusiasts on the various planets in our solar system. By using eye-catching visuals and multiple sound effects, users will be more interested to learn and explore the solar system. Information about planets are summarised into simple paragraphs for our target audience to easily understand the content. Furthermore, users' knowledge on planets will be tested using quizzes to ensure that they fully grasped the information before advancing to the next planet.
User Stories:
- As a young child or teenager, I want to explore the different planets in our solar system, so that I can learn more about them in an engaging and interactive way.
- As a young learner, I want to access information about each planet summarized into simple paragraphs, so that I can easily understand the key facts about them.
- As a space enthusiast, I want the website to use eye-catching visuals and sound effects, so that I feel excited and motivated to explore the content about the planets.
- As a parent or educator, I want the website to be user-friendly and suitable for children and teenagers, so that I can confidently recommend it as an educational resource.
- As a space enthusiast, I want to test my knowledge about the planets through quizzes, so that I can assess my understanding and retention of the information presented.
- As a young learner, I want the quizzes to be interactive and engaging, so that I can enjoy the learning process and feel rewarded for my progress.
Figma Wireframe Link
Github Pages Link
- Login/ Registration Feature
Allows users to register their username and password and retrieves their data upon logging in to obtain their current progress. - Class Feature
Allows users to learn and obtain information on the planet that they are currently on. - Quiz Feature
Allows users to test their knowledge by answering questions and advance to the next planet once a certain number of questions are answered correctly. - Leaderboard Feature
Allows users to see how well they fared compared to other players by looking at the leaderboard ranking.
- Space Game Feature
A different mode of game where users control their own spaceship and destroy incoming asteroids. This provides more interaction and allows users to engage more actively. - Customise Spaceship Feature
A follow up to the 'Space Game Feature' where users are able to customise their own spaceship to make their experience more immersive. - Explore Moons Feature
A feature which enables users to explore the numerous moons within our solar system, catering to the curiosity of children and teenagers who are eager to learn more.
Animista
Animista is used to create a more difficult animation, in our case, we used 'Flicker In' and 'Flicker Out' animations to create seamless transitions between player save data and
rotating planet.
Lottie Animations Lottie Animations is used to add animations created by other users that relate to the space theme and that are more well made
Wikipedia API
We leveraged Wikipedia API to access current and reliable information about the various planets in our solar system. The data will be dynamically updated on a single HTML page without the need for multiple page reloads.
Text Summarize Pro
We used Text Summarize Pro to sum up the important content so that users are able to easily comprehend and take in crucial information without feeling overwhelmed by the amount of words.
restdb.io
We utilized restdb.io as our database solution to store essential data including player information upon login or registration, quiz questions along with their corresponding correct answers, and the current leaderboard standings of players.
-
Registration
i. Go to Landing page
ii. Click on the 'Register' button
iii. Enter the username and password
iv. Click on the 'Create Account'
v. Click 'Back' -
Login
i. Go to Landing page
ii. Click on the 'Login' button
iii. Enter the registered username and password
iv. Click 'Login'\ -
Learn Planet
i. Go to Learn page
ii. Click on 'Next' button to learn more. iii. Click on 'Previous' button to review the content. -
Quiz
i. Go to Learn page
ii. Click on the 'Liftoff' button
iii. Select one of the answers
iv. Click on 'Submit Answer' v. There will be a message that pops up on the left side of the screen indicating whether you have answered the question correctly\ -
Map
i. Go to the Quiz page
ii. Click on the 'Map' button
iii. It displays the map of the solar system\ -
Status
i. Once you have clicked on the 'Map' button
ii. Click 'Status' button to display back the status of player\ -
Log Out
i. On the Learn page and Quiz page, Log Out button can be found. ii. Click on the Log Out button once you are done playing.
Planet information obtained from:
Wikipedia Mercury Planet Link
Wikipedia Venus Planet Link
Wikipedia Earth Planet Link
Wikipedia Mars Planet Link
Wikipedia Jupiter Planet Link
Wikipedia Saturn Planet Link
Wikipedia Uranus Planet Link
Wikipedia Neptune Planet Link
Quiz questions generated using:
ChatGPT
Rotating Planet Images Link
Background Video
Sound Effects
Concept and UI designed inspired from:
The Expanse (TV series)
The Expanse UI Design
Received help from ChatGPT