Released under by @melissakinsey.
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.
The code for this quiz is housed on GitHub.
AS A tech professional I WANT TO take a fun quiz SO I CAN learn more about technical writing.
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.
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
-
A leaderboard that allows players to record their scores
- 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
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.
This was an individual project. Thanks, as always, to my study group and TAs!
- Header adapted from image by filo/iStockPhoto.
- Badges created using Michael Currin's nifty Badge Generator
Ping me with questions or project feedback:
- GitHub: @melissakinsey
- Twitter: @KinseyMelissa
- Email: [email protected]
- LinkedIn: linkedin.com/melissajaynekinsey