qlaub/code-quiz

Code-Quiz

Purpose

Take a timed quiz to test your basic knowledge of coding. Saves your top 5 scores!

Rules

• You start with 75 seconds on the timer
• When the timer reaches 0, the quiz ends
• Each incorrect answer subtracts 10 seconds from the timer
• Your score is equal to the time you have left at the end!

Web Application

Click here to view

example.mp4

Developed Using

• JavaScript
• HTML
• CSS

by Alex Glaubitz

code-quiz's Issues

Code Refactor

Clean up code

Condense similar CSS elements

Most of the pages have a similar look, try to make the CSS file smaller by not reusing code.

Element creation

When creating elements, they are sometimes given a class and ID. The class could most of the time be omitted since every dynamically created element is a one-of and EventListener seems to play nicer with ID's.

Function order

Function order is random at the moment, perhaps put it into order of usual flow of events for a user.

Random Answer Order

Current behavior

Answer buttons are displayed in the same order every time the question is generated

Future behavior

Answers are in randomized order every time

Display 'Correct' or 'Incorrect'

Functionality

Let user know the status of their last question answered. Should show under next question for two seconds. Display final question status during end game screen as well.

Page Generator Function

Function that takes an array of objects as input and creates an HTML section.

Aspects:

• Each object is an HTML element.
• Iterates through array, creates each element piece by piece.
• Objects have the element, class, id, text, and eventListener keys.
• For now all can be optional. Each object is an HTML element.
• Can take Objects within objects (parent child relation in html structure).

Example of an object within the array being passed as an argument into the function:

`const exampleObject {

  element: 'button',
  class: 'start-btn',
  id: 'start-game',
  text: 'Submit',
  eventListener: ['click', 'newQuestion']
}`