Skip to content
/ quiz Public template

Simple quiz app composed in HTML/CSS and Javascript. Includes a timer, a scoring mechanism, and a leaderboard showing the initials of the top players.

Notifications You must be signed in to change notification settings

melissakinsey/quiz

Repository files navigation

readme-header stars - readme-generator forks - readme-generator

melissakinsey - readme-generator

Released under License - MIT by @melissakinsey.

DESCRIPTION

This simple quiz app is composed in HTML/CSS and Javascript. It includes a timer, a scoring mechanism, and a leaderboard showing the initials of the top players. The content focuses on technical writing.

Quiz question

Project Repo & Demo

The code for this quiz is housed on GitHub.

User Story

AS A tech professional I WANT TO take a fun quiz SO I CAN learn more about technical writing.

Usage

To use this app, open game.js in your local browser. Read the question and choose the best answer among the four choices offered. When you're finished, enter your initials to record your score. Then review the leaderboard to see where you rank compared with other players.

FEATURES

This app features the following:

  • Ten multiple-choice questions

  • A timer that begins counting down automatically when the player clicks "Start"

  • A penalty mechanism that subtracts time for each wrong answer

  • Automatic scoring

  • A landing page with a leaderboard button

    Quiz landing page

  • A leaderboard that allows players to record their scores

    Quiz leaderboard

TECHNICAL SPECS

  • Runs on the command line
  • Styled with HTML/CSS and Bootstrap
  • Uses a Bootstrap modal to show the leaderboard either before the quiz (from the Leaderboard button on the landing page) or after the quiz (automatically when player's initials are entered)
  • Ends game when timer reaches zero

LESSONS LEARNED

This quiz has a lot of moving parts. I enjoyed bringing in a couple of elements not required by the assignment, such as the landing page and the leaderboard. Except for some special elements (namely, the modal), I found Bootstrap frustrating. I'd rather write my own HTML/CSS than try to override hidden styling that's not to my taste or not suitable for the project.

CONTRIBUTIONS

This was an individual project. Thanks, as always, to my study group and TAs!

CREDITS

  • Header adapted from image by filo/iStockPhoto.

Original iStock image

Badge Generator

CONTACT ME

Ping me with questions or project feedback: