AstroQuiz is the result of a collaborative effort by a dedicated team of web developers, including Tammy Haris, Lee Williams, and Jeshikha Rama. This engaging web application combines our passion for astronomy and our newly acquired web development skills from the University of Birmingham, Web Development boot camp. AstroQuiz takes users on an exciting cosmic journey, challenging their knowledge of our planetary system and the universe at large. The app features captivating NASA imagery, keyfacts pulled from "Le système solaire" and a Star Wars-inspired crawl on the homepage, setting the stage for a unique and immersive experience. Users can test their cosmic knowledge, accumulate scores, and gauge their progress with a dynamic distance tracker. AstroQuiz is more than just a quiz; it's a celestial adventure crafted with enthusiasm and expertise.
AstroQuiz offers an engaging and educational quiz experience focused on our planetary system and celestial bodies.
The app seamlessly integrates with NASA APIs to provide stunning images of planets and celestial objects.
The app seamlessly integrates with "Le système solaire" API to provide keyfacts about our solar system displaying at each questions and for each respective planets.
Users are greeted with a Star Wars-style opening crawl, adding a cinematic touch to the cosmic journey.
As users answer questions correctly, their score accumulates, and a progress bar visually depicts the distance from Earth to celestial bodies.
Astro enthusiasts can compare their cosmic knowledge and quiz scores with friends and fellow explorers on the leaderboard.
The app features a responsive design, ensuring an optimal viewing experience on various devices and screen sizes.
AstroQuiz boasts a visually appealing and user-friendly interface, enhancing the overall experience.
The project was developed collaboratively using Git for version control, allowing seamless contributions from team members.
Bootstrap was employed for styling and ensuring a consistent and attractive layout.
User progress and quiz data are stored locally, enabling continuity across sessions.
We used Modals for correct answers and Instruction how to play the game.
The team followed agile development methodologies, using GitHub Issues and Project boards to manage tasks effectively.
AstroQuiz strikes a balance between educational content and entertainment, making learning about our universe enjoyable.
Upon landing on the AstroQuiz homepage with an API generated image, you will be greeted with a cinematic Star Wars-style opening crawl. Feel the excitement as you embark on a cosmic journey!
- Leaderboard - Click here to view the leaderboard and see how your cosmic knowledge compares to others.
- Start Quiz - Shortcut to start quiz
When you click "Start Mission" you'll be presented with a series of questions about our planetary system and celestial bodies.
For each question, select the correct answer from the multiple-choice options provided. Keep an eye on the progress bar at left side of the box to see how far you are from Earth! You cannot move to the next question until you've answered the correct answer. You can "Abort Mission" or pop the modals for Keyfacts from Le système solaire API. Instructions are given when you click on "?" icon. Images from NASA for different respective planets or celestial bodies will pop up for each next questions.
As you answer questions correctly, your score will accumulate. You get 100 points for each questions. Choose the correct answer from the options to power up your spaceship! But be careful! You will lose 25 points deducted from the 100 poimts for each incorrect answer!
Check how far you've travelled from earth on our circular meter. Enter your name so that it appears on the Leaderboard. Click save. Check how well you did compared to your previous attempts.
After completing the quiz, you can check the "Leaderboard" section to see where you stand for the best 10 attempts. Can you make it to the top and beat the highscore 1000? You can return to base or play again.
AstroQuiz not only tests your cosmic knowledge but also helps you learn interesting facts about our universe. It's a fun and educational experience.
Share your quiz score with friends and challenge them to beat your cosmic knowledge.
Most importantly, have fun while learning about the wonders of our universe. AstroQuiz is your ticket to a cosmic adventure!
Visual Studio Code was the primary code editor used for developing the HTML, CSS, and JavaScript code for the AstroQuiz application.
GitHub served as the version control and collaboration platform for the project, enabling the team to work on different aspects of the application simultaneously through branching and pull requests.
Bootstrap played a significant role in shaping the user interface and design of AstroQuiz. It provided pre-designed components, responsive layouts, modals, and styling elements that enhanced the overall look and feel of the application.
Content Delivery Network (CDN) fonts were used to enhance the visual aesthetics of the app by providing a variety of fonts for text elements.
These animated emojis added a fun and engaging element to the user interface, contributing to the overall user experience.
NASA's APIs were integrated into the application to fetch and display stunning images of celestial bodies and planets, creating an immersive visual experience.
The Le Système Solaire API was used to access key facts and information about celestial objects within our solar system, enriching the educational aspect of the quiz.
Figma was employed as a design and presentation tool to create visually appealing slides and materials for showcasing the project. It allowed for collaborative design work and easy sharing of presentations.
Zoom meetings were conducted to facilitate team communication and collaboration. They were instrumental in holding remote meetings and discussions throughout the project's development.
Google and MDN were both used to understand how to implement certain codes for what we visualised as a team.
Despite challenges, our team successfully navigated them by leveraging our skills, collaborating effectively, and prioritising tasks to deliver the AstroQuiz application within the specified timeframe. These experiences served as valuable learning opportunities and demonstrated our team's adaptability and problem-solving capabilities.
Collaborative development using GitHub introduced challenges related to code conflicts. Coordinating multiple contributors and managing push and pull requests effectively to prevent conflicts demanded careful version control practices and communication.
Coordinating the synchronisation of JavaScript files among team members working remotely was essential to ensure the application's functionality remained consistent. Timely updates and testing were crucial to prevent discrepancies in functionality. To get API's, to test them took a lot of time and hassle when it does not generate what we needed.
Creating and implementing a progress bar to track the user's progress as they answer questions correctly and move further away from Earth posed a technical challenge. Ensuring the progress bar accurately represented the distance between celestial bodies required careful coding and testing.
It was a challenge to get the score working on the page and local storage to keep the leaderboard. It took us most of the last days before completing the project to get it working.
The project had a tight deadline of seven days, leaving limited time for planning, development, testing, and deployment. Meeting project milestones and ensuring the application met all requirements within this timeframe was a significant challenge.
As the team worked remotely, there were challenges related to communication, coordination, and the ability to address issues promptly. Ensuring that everyone was on the same page and maintaining effective communication channels was vital.
Despite these challenges, the team successfully navigated them by leveraging their skills, collaborating effectively, and prioritizing tasks to deliver the AstroQuiz application within the specified timeframe. These experiences served as valuable learning opportunities and demonstrated the team's adaptability and problem-solving capabilities.
-
AstroQuiz is an engaging and interactive web application that fulfills its mission of taking users on a cosmic journey through our planetary system while challenging their knowledge. The application successfully integrates data from multiple server-side APIs, including NASA's imagery API and Le Systeme Solaire API, to provide users with visually stunning content and key facts about celestial bodies.
-
One of AstroQuiz's standout features is its homepage, which creates an immersive experience akin to embarking on a space mission. The crawling text effect reminiscent of Star Wars sets the stage for users' cosmic adventure. As users progress through the quiz, they are presented with captivating NASA images that align with the questions, enhancing both the visual appeal and educational value of the app.
-
AstroQuiz empowers users to test their cosmic knowledge through a series of well-crafted questions related to our planetary system. The progress bar visually represents the distance from Earth to celestial bodies, making the experience interactive and informative. Users can also track their scores and compare them with friends on the leaderboard.
-
The team successfully adhered to best practices for coding standards and documentation, resulting in a clean repository with a quality README. The use of Bootstrap ensures the application is responsive and boasts a polished UI, while local storage enables the storage of persistent data.
-
Throughout its development, the AstroQuiz project adhered to agile methodologies, making use of GitHub Issues for user stories and acceptance criteria. The team tracked project tasks on GitHub Project demonstrating a commitment to efficient project management.
-
In summary, AstroQuiz is a well-executed front-end web application created by a collaborative team of developers. It not only serves as an excellent showcase of their skills but also provides an enjoyable and educational experience for users interested in astronomy and space exploration.
We would like to express our gratitude to our mentors who provided guidance and support throughout this project. Their insights and discussions played a significant role in overcoming challenges and improving our solution.
- index.html: The homepage of the AstroQuiz app.
- quiz.html: The page where users answer questions.
- end.html: The Gameover page.
- score.html: The Leaderboard page.
- questions.js: Contains code for generating quiz questions.
- script.js: Logic and functionality of the app.
- apod.js: JavaScript code for interacting with the NASA APOD API.
- solaire.js: JavaScript code for interacting with the Le Systeme Solaire API.
- highscore.js: For the leaderboard 6: end.js: Gameover score retrieved
style.css: Contains styles for your web pages.
A directory for storing images and icons used in your application.
This project is licensed under the MIT License
The URL of the deployed application:
The URL of the GitHub repository: 2.
The following images shows the web application's appearance and functionality::
-
Homepage App opening and nav toggle
-
Homepage footer and hover Start Mission
-
QuizPage opening
-
Correct Answer Modal
-
"?" icon for Instruction Modal
-
Wrong Answer Red
-
Progress Bar moving distance
-
Game Over page, Congratulations and circular feature, with save your name
-
Leaderboard
-
Local Storage - inspecting App
