- User Story
- Description
- Motivation
- Technologies
- Challanges
- Successes
- Process
- Directions for Future Development
- Credits
- Results
- Contributers
AS A trivia fanatic I WANT a quiz app that allows me to choose my category and level of difficulty SO THAT I can test my knowledge in various categories at different levels.
Trivia Blast! is a unique quiz app which allows users to customize their own quiz experience by choosing from eight categories and three levels of difficulty. Once a user chooses their trivia journey, they will attempt to answer all 10 questions correctly. If the player answers incorrectly the game is over- but they won’t feel discouraged! Trivia Blast! will provide “inspirational advice” to maintain a positive attitude before their next attempt. At the end of each game, high scores can be saved so the user has the opportunity to beat it on their next try. Can they score a perfect 10 out of 10?
We wanted to utilize what we've learned about APIs to add a more advanced spin to the quiz format we were more familiar with. We also wanted to come up with a concept that would have the flexibility to grow in future versions. As a whole, we wanted a project idea that would flex our creativity by making a relatively simple concept more unique and exciting.
Project was created using:
- VS Code
- HTML
- CSS
- JavaScript
- Git
- GitHub
- APIs
- Open Trivia API
- Advice Slip API
- Google Fonts API
- TailWindCSS
- Font Awesome
- Following the GitHub Process as a group
- Utilizing TailwindCSS as a framework, combining it with regular CSS successfully
- Thinking of a creative concept that can incorporate more than one API
- Figuring out how to display modals
- Collaborating as a group
- Concepualizing a common goal and being on the same page
- Learning from and capitalizing on our errors and mistakes
- Bringing the product to life!
- Create a GitHub repository
- Created base HTML, CSS, and JavaScript files
- Pushed files into the new Repo using Git
- Define GitHub Issues to be completed throughout the process
- Design wireframe and mockup
- Define basic HTML containers for JavaScript functionality
- Create base styles using CSS and TailwindCSS
- Fetch Trivia API and extract only necessary data
- Fetch Advice API
- Style start page using CSS and TailwindCSS with buttons and elements to choose quiz parameters
- Use Trivia API to create basic quiz functionality
- Use Javascript to append quiz functionality to the DOM
- Style base quiz functionality and DOM manipulation with CSS
- Use Advice API to create quiz functionality
- Style quiz functionality with CSS
- Use HTML and CSS to create framework for highscore page
- Set score data in local storage
- Get score data from local storage and display on highscore page
- Work out bugs and enhancements
- Refactor HTML, CSS, and JavaScript
- Deploy to main branch
- Test Version 1.0 functionality in GitHub pages
- Create GitHub Issues for Version 2.0
- Add enhancements to style and functionality
- Enhance mobile responsiveness
- Finalize ReadMe
- Refactor HTML, CSS, and JavaScript
- Deploy to main branch
- Enhance high score organization and add bronze, silver, gold medal functionality
- Extend the quiz to run infinitely until a user gets an answer incorrect
- Interactivity between users on different devices by going beyond local storage
- Integrate the ability to share on social media
- Expand the theme and aesthetics of interface
Open Trivia API: https://opentdb.com/api_config.php
Advice Slip API: https://api.adviceslip.com/advice
Google Fonts API: https://fonts.googleapis.com
TailwindCSS: https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css
Font Awesome: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css
- GitHub URL: https://etrenholm.github.io/trivia-blast/
- GitHub Repository: https://github.com/etrenholm/trivia-blast
- Mockup:
- Jesse Lemieux: https://github.com/Jesse-Lemieux
- Cameron Davis: https://github.com/PaccC8
- Erica Trenholm: https://github.com/etrenholm