Controller Chronicles: Gaming Quiz Live Site

Controller Chronicles: Gaming Quiz is an interactive quiz game that tests your knowledge of video games. 
The game presents players with a series of 10 multiple-choice questions 
related to video games, and they must answer each question within a time limit. 
The faster and more accurately they answer, the higher their score!

• Controller Chronicles: Gaming Quiz
  • Table of Contents
  • Wireframes
  • Features
    • Future Enhancements
  • UX/UI Design
  • Technologies Used
  • Testing
    • User Stories
  • Issues Fixed
  • Manual Testing
    • Start Quiz
    • Rules
    • Questions
    • Create Username
    • Restart Button
    • Leaderboard Button
  • Validators Used
  • Getting Started
  • Demo
    • How To Play
  • Deployment
    • Codeanwhere
  • Run code locally
  • Cloning
  • API
  • Credits
    • Content
    • Media
  • Acknowledgements

 The wireframes below is of the website.

• wireframes

10 exciting multiple-choice questions about video games.  

 A timer of 10 seconds for each question.      

 Automatic progression to the next question when the time elapses. 

 Real-time score tracking.  

 Username input for submitting high scores to the leaderboard. 

Leaderboard to display the top 10 high scores achieved by players.

Responsive design for seamless gameplay on different devices.

Open Trivia DB API for free user contributed questions.

• 1. Difficulty Levels: Introduce different difficulty levels for the quiz, such as easy, medium, and hard.
• 2. Sound Effects and Music: Enhance the user experience by adding sound effects for correct and incorrect answers.
• 3. Accessibility: Ensure the quiz is accessible to all users.
• 4. Review Incorrect Answers: Allow players to review their incorrect answers after completing the quiz for a learning experience.
• 5. Randomized Questions: Randomize the order of questions to ensure a unique experience for each quiz attempt.

The Colors I went with:

• I have focused on providing an engaging and intuitive user experience for Controller Chronicles.

  Some of the key design considerations include:

  1. A clear and prominent "Start Quiz" button to encourage users to begin the quiz.
  2. Visual feedback for the timer, showing the time left for each question.
  3. Visual indicators for correct and incorrect answers.
  4. A result popup that displays the user's score and invites them to submit their username for the leaderboard.
  5. A dedicated leaderboard popup with a clean presentation of the top 10 high scores.

The game is built using the following technologies:

• HTML5 - The markup language used for structuring the website.
• CSS3 - The stylesheet language used for styling the website.
• JavaScript - The programming language used for interactive elements and quiz functionality.
• Open Trivia Database API - Provides quiz questions related to gaming.
• Font Awesome - A library of icons used for visual enhancements.
• Google Fonts - Provides custom fonts for the website, improving the typography.

• As a gaming enthusiast, I want to test my knowledge of video games and challenge myself with exciting quiz questions.
• As a casual player, I want a fun and engaging quiz that is easy to understand and play.
• As a competitive gamer, I want to see how I rank against others and have my scores displayed on the leaderboard.
• As a user, I want the quiz to be responsive and accessible, allowing me to play on different devices and browsers.
• As a player, I want to receive instant feedback on my quiz performance and see the correct answers for any questions I miss.
• As a quiz participant, I want the option to submit my score and see it displayed on the leaderboard.

• Checked Start button.
• Once pressed it functions correctly.
• Tested in different devices.

• Checked all text content works accordinally.
• Checked the start quiz button and works correctly.
• Tested in different devices.

• Checked questions contents all work accordinally.
• Checked timer.
• Checked if no answer is selected and time runs out quiz ends.
• Tested in different devices.

• Checked create username and it functions correctly.
• Tested in different devices.

• Checked restart button and functions correctly.
• Tested in different devices.

• Checked leaderboard button and functions correctly.
• Tested in different devices.

• JSvalidator

  

• W3C

  

• W3C

  

Controller Chronicles is a web-based application, and no installation is required. Simply access the website using your web browser.

To see the live demo of the game, visit Controller Chronicles: Gaming Quiz Demo.

1. Click the "Start Quiz" button on the start screen to begin the quiz.
2. Read each question carefully and select the correct answer from the multiple-choice options.
3. You have 10 seconds to answer each question.
4. Once you answer a question, the quiz will automatically move to the next question.
5. If you fail to answer within the time limit, the quiz will move to the next question, and your answer will be marked as incorrect.
6. After completing all the questions, the final score will be displayed along with the number of questions answered correctly.
7. You can enter your username and submit your score to be displayed on the leaderboard.

The website was created using CodeAnywhere.

• In GitPod, ensure that all required items have been committed and pushed to GitHub.
• Sign in to GitHub.
• Choose the appropriate repository - jay-o-sullivan/video-games-quiz
• From the menu choose the settings tab.
• Then scroll down to github pages.
• Click the visit site to view the deployed website.

There is different approaches should you choose to use GitPod to clone the project, or a different IDE.

• Use web browser -- google -- firefox etc.
• Login to your github account or sign up if you haven't.
• Install the gitpod extenstion for your browser.
• In github find the repository.
• Click on gitpod button.
• New workspace will open containing the project code.

1. Navigate to the github repository.

2. Choose the dropdown on the code button.

   • 

3. Open your IDE and terminal.

4. Set the working directory to location.

5. Type in "git clone" followed by the URL. Make sure to include a space after git clone for the url, press enter.

6. Project created. For more information on GitHub

Controller Chronicles fetches quiz questions from the Open Trivia Database API. The API provides a wide range of trivia questions for various categories, including gaming.

• Code Institute Solutions - README Template
• W3 Schools
• Youtube Open API
• Youtube Timer
• Coolors Color Palette
• Open Trivia DB

The photo used in this site were obtained from:

• am i responsive

• W3 Schools.
• TingPNG.
• GitHub.
• Student Support.
• Mitko Bachvarov Mentor.