(Developer: Darrach Barneveld)
Welcome to Trivia Trumps, where your knowledge will be put to the test across various categories. Answer easy, medium, and hard questions to earn bronze, silver, and gold medals respectively. As you conquer each category, you'll unlock powerful colourful trump card displayed in the trophy room. Get ready to embark on a thrilling trivia adventure and prove yourself as the ultimate champion in Trivia Trumps! This was a particularly fun Javascript learning project as it showcases my passion for pub quizzes, knowledge and trump cards!
The primary goal of Trivia Trumps is to provide an entertaining and educational platform where players can test their knowledge, engage in friendly competition, and expand their understanding of various subjects.
- Captivate and retain users by providing a highly engaging and addictive trivia experience
- Serve as an educational tool, encouraging players to expand their knowledge and learn new facts across a wide range of subjects
- To become an indispensable tool for pub quiz organizers and participants alike.
- Aim to challenge themselves and broaden their knowledge across various subjects
- Users seek a fun and engaging experience
- To engage in friendly competition with friends and family
- Players strive to earn medals, unlock trump cards, and achieve high scores, aiming for a sense of accomplishment and recognition
- Subscribe to a mailing list filled with content from scholars and researchers.
- Trivia Enthusiasts: Individuals who have a passion for trivia
- Pub Quiz Participants: People who frequently engage in pub quizzes and trivia nights
- Knowledge Seekers: Individuals who have a strong desire to learn and expand their knowledge across various subjects
- Educational Institutions: Schools, colleges, and educational institutions
- Team Building Events: Companies and organizations that organize team building activities or corporate events
- Diverse and Challenging Questions: A wide range of well-crafted trivia questions that cover various subjects and difficulty levels.
- User-Friendly Interface: An intuitive and easy-to-navigate interface that allows for smooth gameplay, making it simple to select categories, answer questions, and track progress.
- Accurate and Reliable Information: Users expect the trivia questions to be accurate and up-to-date, ensuring that the provided information is trustworthy and reliable.
- Compatibility and Accessibility: Compatibility with various devices (mobile, tablet, desktop) and operating systems, as well as accessibility features to cater to individuals with different abilities, ensuring inclusivity and a broader user base.
- Progress Tracking and Achievement System: Features that allow them to track their progress, view their scores, and earn achievements or medals as a testament to their trivia skills and accomplishments.
- Develop an engaging platform with diverse and challenging trivia questions across multiple categories.
- Ensure a seamless user experience with an intuitive and visually appealing interface.
- Implement a flexible and scalable architecture to accommodate future growth.
- Track user progress, scores, and achievements to provide a personalized and rewarding experience.
- I want to continuously improve the website design, functionality, and content, to meet the evolving needs and expectations of my audience and stay ahead of the competition.
- Enable social integration features, such as leaderboards and multiplayer options, to foster community and friendly competition.
- Implement effective marketing strategies to reach a wide audience and establish Trivia Trumps as a preferred trivia platform.
- As a new user, I want a user-friendly dashboard or homepage that provides clear navigation and options to explore different trivia categories and difficulty levels.
- As a new user, I want access to a variety of beginner-level trivia questions to help me get started and gradually increase the difficulty as I become more comfortable and knowledgeable.
- As a new user, I want an interactive onboarding tutorial or guide that familiarizes me with the gameplay mechanics, interface, and features of Trivia Trumps.
- As an existing user, I want the ability to access my previous game history and review my past scores, achievements, and progress.
- As an existing user, I want regular updates with new trivia questions, categories, or game modes to keep the content fresh and provide ongoing challenges.
- As an existing user, I want to be able to provide feedback or suggestions for improvement directly within the Trivia Trumps app or website, as I want to contribute to its ongoing development and enhancements.
- As an existing user, I want the ability to share my achievements, high scores, or interesting trivia facts with my social networks directly from the Trivia Trumps platform.
The initial design phase went through two stages. The initial inception of the trivia game was to be centred around Australia. The game was to have users answer questions about Australian wildlife and conquer the respective territories of Australia on an interactive map. You would collect Trump cards with information about the different states. This initial design choice can be seen in the final product. The design was also heavily inspired by trivia crack a mobile game as well as trivial pursuit. Players collect colourful segments and trump cards to conquer the wheel. Instead of states it is now category trump cards.
Some websites visited for reference are:
The Colour Scheme was based off the initial Trivia Crack game. Trivia Crack
Main Colours - #3771b4 / #de3539 / #f4b335 / #6ec531 / #e36927 / #803788 / #66b9de / #ff69b4;
Theme Colours - #533b7c / #f4e8df
All colours were checked using Accessible Webs Contrast Checker. This ensured the page was compliant to WCAG AAA standards.
All fonts used were sourced and imported from Google Fonts library.
All font used is Ubuntu with a sans-serif fallback.
The main structure was designed with the mobile first development mindset in mind.
The site structure was inspired by reactive sites built with JS frameworks. I wanted a dynamic SPA feel to the user experience. The main page is a simple map/wheel with a scoreboard listing categories. I wanted users to interact with the elements on the page and choose segments to select categories. There is a simple header for navgation, main contents, and a footer. The game screen is dynamically generated depending on search parameters and the questions are shown 1 by 1.
- Header/Navigation
- Main Section / Wheel + Scoreboard
- Footer
- Header/Navigation
- Main Section / Dynamic Questions. Inspired by the React Framework.
- Footer
- Header/Navigation
- Main Section / Grid Trump card layout
- Footer
There were also two further supplementary sections to provide a more well rounded experience. A 404 page was designed to route all traffic back to the home page if they visited an unknown url.
- Text Logo featured on the left of the header.
- Navigation items to the left hand side.
- Large Map/Wheel interactive image featuring category segements. Located on the left
- Scoreboard listing categories and medal count for each. Located on the right
- Category Logo image
- Medal count
- Form for difficulty selection
- Start quiz and home navigation buttons
- Category Logo image
- Score and Question Count
- Question
- Answer buttons
- Social Icons
- Contact Information of the developer
- Copywrite claims
Mobile
iPad/Medium Screen
Desktop
Mobile
iPad/Medium Screen
Desktop
Mobile
iPad/Medium Screen
Desktop
- HTML
- CSS
- Javascript
- Git
- GitHub
- VS Code
- Balsamiq - Wireframe
- Google Fonts
- Font Awesome
- Favicon.io - favicon generator
- Coolors - Theme generator
- Open Trivia Database
- Chat-GPT
- Google Lighthouse
- W3C Markup Validation Service
- W3C CSS Validation Service
- Wave Accessibility Tool
- Responsive Image Tool
- Main header for all pages.
- Logo and navigation links which bring users to different page sections.
- How to play modal link
- Interactive navigation colour wheel with category tooltip for description
- Score Sheet with category medal list and links to quiz pages
- Category Logo
- Medals obtained
- Difficulty selector
- Home and play buttons
- Questions
- Question Buttons
- Potential Reward and Score
- Correct answer list
- Replay and return buttons
- 8 category trump cards listed
- Medal count and unlocked card status
- Main footer for all pages.
- Logo and contact information
- Social icons for the web page
- Email contact form
- 404 page that shows when any non dedicated link is visited
- Has a navigation button back to the home page and tells the user that the page does not exist.
- Consistent header and footer from main index page.
The following features could be implemented in the future but are beyond the scope of this project.
- Users can play against friends in a live play arena developed with socket.io or other libraries.
- Users can create more secure accounts with passwords and upload avatar icons or pictures
- Users can submit potential questions
Validator W3 was used to validate the HTML of the website. All pages pass with no errors and no warnings shown.
The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website.
- styles.css results
The WAVE WebAIM web accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages pass with 0 errors.
Google Lighthouse in Google's Chrome Developer Tools was used to test the performance of the website. All elements performed well.
Desktop
Mobile
Desktop
Mobile
Desktop
Mobile
Desktop
Mobile
The website was tested on the following devices:
- MacBook Pro 2020
- Huawei P30
- Aztine 15.6 portable monitor
- Tested using Google Chrome's Developer Tools to simulate all devices
- IPhone 10 - XCode simulator.
The website was tested on the following browsers:
- Google Chrome 113.0.5672.63
- Mozilla Firefox 109.0
- Safari 13 Ventura
-
I want to test the site's usability and navigation, to ensure that users can easily find the information they need and navigate between pages.
- Users can navigate to any page by using the header navigation.
- Users can navigate to any trivia section by either selecting the wheel segment or clicking on the category name.
-
I want to test the site's performance and loading speed, to ensure that it can handle a high volume of traffic and provide a smooth user experience.
- Site passing all performance testing metrics.
-
I want to test the site's accessibility and compatibility, to ensure that it can be accessed on different devices and browsers, and that users with disabilities or special needs can use it effectively.
- Site is fully responsive across all platforms.
- Site is usable across all different browsers.
- Site passes all testing for accessibility.
-
I want users to be able to contact me directly to offer feedback or keep in touch with my latest work.
- Working contact email as well as direct linking to social platforms located on footer of each page.
- Clearly legiable name with trade marked website located on footer
-
I want to make sure users are directed back to the index page of the website and not rely on the browser navigation to return to the home page.
- 404 page instructs the user the page doesn't exist and directs them back to the home page with a navigation button on the both header and below 404 text.
-
I want the site to be addictive and fun so users return consistantly
- Use of bold and bright colours to trigger the users interaction
- Engaging and a wide array of questions to keep the user interested
- Scoring system and trophies to trigger user completion
-
I want to immediately understand the content of the site so I can make a quick decision as to whether or not to continue.
- Clean UI with large image of wheel to show the context of the trivia game website (similar to trivial pursuit).
- Clear categories so users can see what they are answering questions on.
-
I want to be able to quickly navigate to desired areas of the website and find the information displayed clearly and concisely.
- Heading navigation on each page.
- Clean and presentable UI that makes the questions easy to answer and read.
- Images for each category that are relatable.
- Trump cards and medals to show users progress
-
I want them to be able to check the current progression by tracking medals and trophy cards.
- Medals for each category difficulty mode completed
- Success page is routed to upon completion of the form giving user feedback.
-
I want the questions to be unique and randomly generated.
- Use of Open Trivia API guarentees the quality of the questions.
- As of testing no bugs have been found. All bugs have been addressed via testing and consistant use of sites multiple features.
The website was deployed using GitHub Pages:
- In the GitHub repository navigate to the Settings tab
- On the left-hand menu select Pages
- For the source select Branch: master
- After the web page refreshes automatically you will see a ribbon on the top saying: Your site is live at https://darrachbarneveld.github.io/Project-2-Code-Institute/
You can for fork the repository:
- Go to the GitHub repository
- Click on Fork button in the upper right-hand corner
- Edit the repository name and description if desired
- Click the green create fork button
You can clone the repository:
- Go to the GitHub repository
- Locate the green Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash
- Change the current working directory to the one where you want the cloned directory
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
- Press Enter to create your local clone.
You can run this repository locally:
- Go to the GitHub repository
- Locate the green Code button above the list of files and click it
- From the dropdown menu select download Zip.
- Download and open the zip file to run in an editor
- All Category Images by FlatIcon
- All Icons Are sourced from FontAwesome
- SVG colour wheel was learned from FreeCodeCamp
- Tooltip Design W3Schools
- Popup Modal W3Schools
- Dynamic Page Rendering based on query string Stack Overflow
- Immediate execution of functions for dynamic page renderStack Overflow
- Indepth understanding of local storage for game stats MDN
I would like to make the following thanks to all that helped me on this project:
- My mentor Adegbenga Adeye for suggestions for improvements. Showing me how to use tooltips for greater UI. The post quiz scores and correct answers feature.
- Alan Bushelland the April 2023 Student Cohort for their continued support and feedback on my projects
- Tanguy L'Alexandre, Ivette Mc Dermott, Georgina_5P, Ian Bowell, Devan_Cadman_4P for their peer review suggestions
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent