Web app that presents a timed quiz on JavaScript fundamentals to the user.

This web app presents a timed quiz to the user. For each incorrect question, time is deducted from the timer. If the user is able to reach the end of the quiz without running out of time, the remaining time is used as their score. If the user's score is within the top 5 scores saved in their local storage, they have the option to save it.

The src/main directory is the root that contains all the source code used by this project.

The src/main/html directory contains only a single file as this is a single paged application. This single html file is placed in the root of the outputted build file since it is the single entry point of this web app.

The src/main/ts directory contains the following files (plus a file exporting utility scripts that isn't referenced here).

• js-quiz.ts

  This file contains the root script that is executed in the index.html entry point of this web app.

• questions.ts

  This file contains the pre-created question objects that the quiz contains when it's executed. To add more questions to the quiz, simply add a Question object to the exported questions array that this file exports.

The src/main/ts/quiz directory contains the TypeScript classes used to model a quiz question.

• question.ts

  This file contains the model for a quiz question. This class contains 2 properties:

  1. promptText which is the text of the question asked to the user.
  2. answers which is an array of answer objects that the user can pick from when answering the question prompt text.

• answer.ts

  This file contains the model for the answers of a quiz question. The class this file exports is used by the Question class as one of its properties (is a dependent via composition). This class contains 2 properties:

  1. text which is the text string of the answer. What the user will see when selecting this answer.
  2. isCorrect which is a boolean indicating whether this answer is correct or not.

The src/main/ts/dom-component directory contains the controller for the DOM object, which includes the list of answers and the function used to create an HTML answer button.

• answer-lists-controller.ts

  This class is the controller for the answer button lists. The answer button lists are the 2 lists of buttons that contain the answers the user can select for each question. This class contains 3 public properties and 1 method:

  1. leftList is the left unordered list element that contains the buttons a user can click to select an answer for a question.

  2. rightList is the right unordered list element that contains the buttons a user can click to select an answer for a question.

  3. buttonClickEvent is the click event that gets applied to each of the list item answer buttons objects of this class generate.

  4. The overwriteAnswerListItems(readonly Answer[]) method takes the provided answer objects and applies them as clickable HTML button list item elements evenly distributed between its left and right list properties.

• create-answer-button.ts

  This class contains the type used to define the button click event function that can be added as an event listener to created HTML buttons and the function used to create HTML button elements used for answers to the quiz.

The ./src/main/scss directory contains the single scss file compiled to this web app's css. It contains the source code used to hide elements by default and apply some minor custom styling.

1. The user is initially prompted to start the quiz:

   

2. Once the quiz is started, the user is asked a series of questions:

   

3. Upon successfully completing the quiz, the user is given the option to save their score if it's within the top 5:

   

• The main js-quiz.ts file currently contains too much functionality and needs to be further refactored and broken up into smaller individual components.
• Whenever the quiz is completed, display the high scores to the user.