University of Denver

Class: DU_VIRT_FSF_PT_09_2019_U.O.MW

Program: Full Stack Flex Online Part-Time

05-JavaScript Assignment 2 (Code-name: Trivial Trivia Game Option 2: Advanced (Timed Questions), AKA Culinary Trivia Game)

...........................................................................................................

Culinary Trivia Game Overview

About

In this assignment, I've created a fun and interactive game for web browsers utilizing jQuery, Javascript, CSS, and HTML. This app runs in the web browser and dynamically updates the HTML pages from the jQuery libary from within JavaScript utilizing timers to build JavaScript programs that execute functionality at various times.

Objective

  1. I've created a culinary trivia game that shows only one question until the player answers it or their time runs out.
  2. If the player selects the correct answer, they will be shown text congratulating them for choosing the right option.
  3. After a few seconds, the user will be displayed the next question -- done without user input.
  4. The scenario is similar for wrong answers and time-outs.
  5. If the player runs out of time, it's communicated to the player that time's up and the correct answer is displayed. They are then shown the next question.
  6. If the player chooses the wrong answer, it's communicated to the player that they've selected the wrong option and the correct answer is displayed. They are then shown the next question.
  7. On the final screen, the player is shown the number of correct answers, incorrect answers, and an option to restart the game (without reloading the page).

Demo

Demo Site: This link will take you to the game

Key Topics

  • Code comments
  • Console
  • Variables
  • Types
  • Booleans
  • Numbers
  • Strings
  • Arrays
  • Conditional statements
  • Equality
  • Logical, comparison and ternary operators
  • Functions
  • Alerts, confirms, prompts
  • Global vs local scope
  • jQuery
  • Timers
  • DOM traversal and manipulation
  • Event handling

Requirements

Build Tools

  • Bootstrap
  • jQuery