/basic-code-quiz

Primary LanguageJavaScript

basic-code-quiz

Description

This repository was built for the UC Davis Full Stacks Coding Bootcamp. The repository is a coding quiz in the style of Dragon Warrior and JRPG aesthetics.

Screenshot image of the deployed webpage, showing the quiz itself.

Features

The repository focuses on Javascript code to build the function and logic for the quiz, and includes the following features:

General

  • Semantic elements for use of accessibility.
  • HTML IDs that connect to CSS and Javascript functions and elements.
  • Media query and flexboxes for various resolution and devices.
  • Guided comments for navigation of HTML, CSS, and Javascript structure.
  • Use of Bootstrap features, including a navbar and container.

Javascript-specific

  • Variables that store questions, reference HTML IDs, and establish parameters.
  • Appends IDs and elements on the HTML page, and removes/add classes.
  • References the array of questions and publishes it to the page.
  • Integrates a timer as the primary mode of recording a score.
  • Gives audio and written feedback for correct and incorrect answers.
  • Utilizes localStorage to store an array that stores name and score.
  • Retrieves localStorage data to print to leaderboard page.

Animated GIF of a trial demo of the deployed repository.

Future Iterations

The website could expand to incorporate the following features:

  • More complex logic and/or score improvement.
  • Include more aesthetic elements that make sense of the page.
  • Adjust flexbox properties and media queries.

Installation

Clone a copy of the repository by going to the repo code and selecting Code. In the drop-down menu, select the method of cloning. To copy directly into the terminal, type git pull with the SSH key on the .git file to clone locally.

  • HTTPS: https://github.com/christiangella/basic-code-quiz.git
  • SSH: git@github.com:christiangella/basic-code-quiz.git

Screenshot image of Gitlab and the steps to install the repository.

Deployment

The website can be previewed at the following link: https://christiangella.github.io/basic-code-quiz/

Credits

This repository was developed for the UC Davis Fullstacks Bootcamp under the UC Davis Continuing and Professional Education. Media assets, including the background, slime, wizard, and sound effects are ripped from ドラゴンクエスト (Dragon Warrior), localized as Dragon Warrior developed by Chunsoft and developed by Enix.