Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/victoriamcn/timed-coding-quiz

The quiz app displays questions, processes user answers, manages the timer, calculates scores, and saves scores to local storage. After completing the quiz, the user may save their score and initials to view r and compare it with other players' scores within that browser session.
https://github.com/victoriamcn/timed-coding-quiz

css javascript localstorage

Last synced: 27 days ago
JSON representation

The quiz app displays questions, processes user answers, manages the timer, calculates scores, and saves scores to local storage. After completing the quiz, the user may save their score and initials to view r and compare it with other players' scores within that browser session.

Awesome Lists containing this project

README

        

# Timed Coding Quiz

## Description

The quiz app displays questions, processes user answers, manages the timer, calculates scores, and saves scores to local storage. After completing the quiz, the user may save their score and initials to view r and compare it with other players' scores within that browser session.

## Table of Contents

- [Preview](#preview)
- [Deployed Application](#deployed-application)
- [User Story](#user-story)
- [Features](#features)
- [Acknowledgments](#acknowledgments)
- [License](#license)
- [Badges](#badges)

## Preview
![screenshot of the start window for a coding quiz](./assets/images/Timed-Quiz-Preview.png)

## Deployed Application

[Timed Coding Quiz Link](https://victoriamcn.github.io/Timed-Coding-Quiz/)

## User Story

```
AS A coding boot camp student
I WANT to take a timed quiz on coding fundamentals that stores high scores
SO THAT I can gauge my progress compared to my peers
```

## Features

1. Click the "Click to Begin" button to start the timer and loop the quiz questions.
2. Click the "See High Scores" Button to view any scores from local storage.
3. Each correct answer adds 100 points to the score.
4. Each incorrect answer subtracts 10 seconds from the timer.
5. When the quiz is complete, the user can save their score by adding their initials.

## Acknowledgments

### Special Thanks
- My instructor at Georgia Tech Coding Bootcamp, [Saurav Khatiwada](https://github.com/khatiwadasaurav)

### Tutorials
- CodePen: [How To - JavaScript Countdown Timer](https://codepen.io/yaphi1/pen/KpbRZL?editors=0010)
- Simple Steps Code: [How to Make a Simple JavaScript Quiz](https://simplestepscode.com/javascript-quiz-tutorial/)
- StackOverflow:[JavaScript: How Do I save the Score and Initials once the page is refreshed and add more score and initials to the existing ones.?](https://stackoverflow.com/questions/66488667/javascript-how-do-i-save-the-score-and-initials-once-the-page-is-refreshed-and)
- W3 Schools: [HTML DOM Document createElement()](https://www.w3schools.com/jsref/met_document_createelement.asp)
- W3 Schools: [JSON Array Literals](https://www.w3schools.com/js/js_json_arrays.asp)
- W3 Schools: [JavaScript Objects](https://www.w3schools.com/js/js_object_definition.asp)
- Looka: [50 Color Combination You Need to Use in 2023](https://looka.com/blog/color-combinations/)

### Code Examples
- CodePen:[Dynamic JS Quiz by Gary Carino](https://codepen.io/gcarino/pen/AaJBOo). Though Gary used jQuery, it helped me think through what needed to happen.
- YouTube: [Build a Quiz App Playlist by James Q Quick](https://www.youtube.com/watch?v=u98ROZjBWy8). James had different approaches, but the concept was similar enough to help me write my code.

## License

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) This project is licensed under the MIT License - see the LICENSE.md file for details.

## Badges

![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
![GoogleFonts](https://img.shields.io/badge/googlefonts-4285F4?style=for-the-badge&logo=googlefonts&logoColor=white)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
![macOS](https://img.shields.io/badge/mac%20os-000000?style=for-the-badge&logo=macos&logoColor=F0F0F0)
![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)