Trivia Quiz is a quiz app build to attract all categories of users by providing them with different categories and modern design. The reason behind having a modern design is simply because you can implement this app in any future website to attract more visitors and also for them to have some fun by enjoying a quiz.
-
-
I. First Time Visitor Goals:
-
I would like to have the option to select a quiz from various categories.
-
If the quiz is finished, I would like to have the option to restart the quiz immediately without having to return to the main menu.
-
When I restart a quiz, I want to receive new questions for the category.
-
I want a quiz with different scores results, depending on how well I have done on the quiz.
II. Returning User Goals:
-
I want to find links to social media to find updates on the trivia-quizzes.
-
Be able to see my previous scores for each quiz that I take.
III. Site Owner Goals:
-
Create a fun and friendly website where the users can enjoy having a quiz.
-
Let users have the option to select the quiz from various categories.
-
Let users be able to contact the site owner by email for any recommendation of different quizzes or improvements of any kind.
-
-
-
- The strategy for having a quiz website is to attract all categories of users and provide them with various categories of quizzes. Thru these quizzes, I want to offer the users an enjoyable and challenging experience each day.
-
-
Provide a clean UX
-
Provide users with questions from different categories of quizzes.
-
Use an API to get the quiz categories with different questions each time.
-
-
-
Responsive on all screen devices.
-
The website it's structure on three pages.
- Home Page
-
The logo of Trivia Quiz will take the user to the Home page.
-
Landing section - Where the user can take a general quiz or go to the Quiz Category section or Contact section from the navigation menu.
-
Quiz Category section - Where users can select a quiz from different categories.
-
Contact section - Where users can contact the site owner by email for any recommendation of different quizzes or improvements of any kind.
-
On the footer of the website, the users can find links to social media to follow for more updates on the Trivia Quiz app.
- Game Page
-
At first, the user has a choice to start the quiz or to view the previous high score if any, view quiz instructions or go back to categories
-
When starting the quiz the questions are pull from Open Trivia DB API and displayed one by one with a countdown timer
-
The user can play the quiz that he started or if he changes his mind can reset the quiz or exit the quiz
-
When the quiz is finished, the user will see its score on a popup modal, and after he closes the modal he can play again the quiz or return to the home page to select a different category.
- 404 Page
- 404 Page was added in case users redirect to a page that does not exist.
Note: In order to make this page work the in the Slack community there was a pinned info about the 404 functionality. All I had to do was to create a 404.md file and place it with the 404.html in the root folder.
-
-
Provide users with a menu to select the number of questions and level of difficulty before starting the actual quiz
-
Provide the user with a save menu when the quiz is complete, so that will allow them to use different names for each time they take a quiz if they want to have a more explicit history of a high score, instead of having just the higher score saved each time for the quiz that was played.
-
-
-
-
-
-
Palette:
- The color was selected from palette colors and for this quiz app, I went with a palette of light and warm colors.
-
-
- For the consistency of the quiz theme I chose one font-family PT Serif.
-
- Because imagery is important I have carefully chosen a light background hero image that will go with the quiz theme.
-
-
-
-
Bootstrap – CSS framework used to help with the navbar, contact form, and other classes that were used to make the quiz app responsive.
-
Google Fonts - to import the font-family used in the website: PT Serif.
-
Font Awesome - icons are a visual way to help add meaning to elements.
-
GitHub - used to create and host the repository
-
Git - used for the version-control system for tracking changes in any set of files
-
Gitpod - IDE used to develop the project
-
-
-
VS Code - IDE
-
Autoprefixer CSS - used to add prefix to css code
-
Tinypng - used to compress all image files in order to reduce loading time on each page
-
HTML Validator - used to check HTML code for error
-
CSS Validator - used to check CSS code for error
-
JSHint - used to check JS code for error
-
JSDoc - document the JavaScript code with JSDoc
-
I Am Responsive - for the main image in Readme to show responsive to different screen size
-
Balsamiq - used to make the wireframes for the project
-
Coolors - used for color palette
-
Adobe Photoshop 2020 - for logo and favicon used on this project
-
-
- Testing documentation can be found HERE
-
-
-
This project was created from the Code Institute project template from here on Github by clicking on "Use this template"
-
Once the project was created I rename it from the settings
-
When the repository was finally completed I open the project with Gitpod in Chrome browser
-
In order to push this project from Gitpod on Github a set of commands were used:
- git status - Check the status of the repository and see if there were any changes in files - git add . - Add the files that were modified/created, so we can commit it - git commit -m "message for commit" - Commits all the changes - git push - Pushes all committed versions to Github
-
-
-
The project was deployed to GitHub Pages using the following steps:
-
Log in to GitHub and locate GitHub Repository
-
At the top of the repository click on "Settings"
-
Once you are in settings scroll down to "Github Pages"
-
Under "Source", click the dropdown called "None" and select "Master Branch".
-
After the page automatically refresh scroll down again on "Github Pages" and you will see a live link to the published site.
-
-
-
-
Log in to GitHub and locate GitHub Repository
-
At the top of the repository click on Code
-
From the dropdown menu under HTTPS copy the link
-
Now on your IDE create a directory where you wanna make the clone
-
Type git clone and paste the link that you copy from step 3.
-
-
-
-
-
Code for function sendMail was adapted from Full Stack Development Course - Interactive Frontend Development - Resume Project at Code Institute
-
Bootstrap - for navbar with some modification for collapse button, contact form, table for high scores, and other classes that I used for making the project responsive.
-
Favicon - for the code for use in this project; the favicon was created by the developer and saved in all sizes that were needed
-
SweetAlert2 - for box alert that was used on the contact form as a response generated on user action when the form is submitted
-
Stack Overflow - function inspired and modified Countdown timer used for quiz
-
MDN Web Docs - for the function to check local storage available
-
-
- https://www.tryinteract.com/blog/ as a general inspiration.
-
-
All photos used on this project were taken from:
-
-
-
Code Institute for all course material
-
Slack community
-
My mentor Oluwafemi Medale for his support and feedback that he has given me for this milestone project.
-
-
-
- This project is for educational purposes only.