Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

TriviaGame

A Harry Potter trivia game using Questions and Answers provided by my son and niece who are big Harry Potter fans. The web game displays one question at a time until the player answers it or their time runs out. A total of 10 questions from a randomized list of 15 or more questions are shown for each game.

Gameplay

  • Create a trivia game that shows only one question until the player answers it or their time runs out.

  • Use JavaScript for the logic and jQuery to DOM manipulation.

  • If the player selects the correct answer, show a screen congratulating them for choosing the right option. After a few seconds, display the next question -- do this without user input.

  • The scenario is similar for wrong answers and time-outs.

    • If the player runs out of time, tell the player that time's up and display the correct answer and image. Wait 7 seconds, then show the next question.
    • If the player chooses the wrong answer, tell the player they selected the wrong option and then display the correct answer. Wait 7 seconds, then show the next question.
  • On the final screen, show the number of correct answers, incorrect answers, and an option to restart the game (without reloading the page).

Pseudocode

  • Create a trivia data object with properties for each question and possible answers
  • The game object will be used to run the game. It will keep score and shuffle the answers.
  • The Start Game button will be shown. When clicked it will hide and begin the game.
  • When the game starts the game object will create a number array with the same length as the trivia data array using a for-loop.
  • The number array will be shuffled using the Fisher–Yates algorithm
  • The shuffle loop starts from the last index to the first. Two numbers will be swapped and put into a new array called randomList.
  • The randomList numbers will used as index numbers for the trivia data object.
  • 15 second timer will begin.
  • If the timer runs out, a incorrect count will be added.
  • Incorrect will be displayed and the correct answer will be shown. Incorrect count increases by 1.
  • Correct will be displayed and the correct count increases by 1.
  • Another timer below the GIF image shows a countdown for the next question.
  • After 10 questions, a total tally will be displayed.
  • Start Over button is shown.
  • When Start Over button is clicked, the game restarts without refreshing the page.

Programmer's Notes

  • On Click events do not work on dynamically created elements
    • Use .on() with already existing parent elements and reference the id or class
    • EX:
      • $("#answers").on("click", ".answer", function() {...})
  • this.method() does not work in setInterval because setInterval and setTimeout are Window methods

Media

About

A trivia game that shows one question at a time with a countdown timer.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published