Trivia Game

Project Overview:

Trivia game using HTML and CSS for page layout, JavaScript for the logic, and jQuery to manipulate the HTML.

Project Requirements:

Start Screen Requirements:
    1. Start button to start the game.
        a. When clicked go to Play Screen

Play Screen Requirements:
    1. Display Title
    2. Display Time Remaining
        a. Counter that continuously counts down to 0.
        b. Counter stops when player attempts an answer.
    3. Display Question
        a. One question at a time is displayed until:
            - Player answers
            - Counter reaches 0
        b. On Correct answer:
            - Stop timer.
            - Display congrats message. 
            - Wait a few seconds.
            - Reset timer.
            - Clear messages.
            - Automatically display next question (No user input for this. Must be automatic.).
        c. On Incorrect answer:
            - Stop timer.
            - Display incorrect message. 
            - Display correct answer. 
            - Wait a few seconds.
            - Reset timer.
            - Clear messages.
            - Check if more questions
                - If more questions then automatically display next question (No user input for this. Must be automatic.)
                - If no more questions then go to Final Screen.
        d. On timeout:
            - Display timeout message. 
            - Display correct answer. 
            - Wait a few seconds.
            - Reset timer.
            - Clear messages.
            - Check if more questions
                - If more questions then automatically display next question (No user input for this. Must be automatic.)
                - If no more questions then go to Final Screen.

    4. Display 4 possible clickable answers
    5. Upon completion of all answers
        a. Go to Final Screen

Final Screen Requirements:
    1. Stop timer.
    2. Display number of correct answers.
    3. Display number of incorrect answers.
    4. Display number of unanswered questions.
    4. Provide an option to restart the game (without reloading the page).
        a. If clicked then reset the game.

Technology Requirements:
    1. Page Layout
        a. HTML
        b. CSS
    2. Game Logic
        a. Javascript
    3. DOM manipulation
        a. jQuery

Game Link: https://kbrowngithub.github.io/TriviaGame/

Features

 
 Start Screen

Play Screen

Play Again Screen