Web APIs Code Quiz

Overview

This coding project relates to building a timed coding quiz with multiple-choice questions. This README will provide an overview of the project, its purpose, and the requirements.

Table of Contents

Description Features How to Run the Application The Power of Web APIs The DOM and Web APIs Resources Contributing Accessibility Testing License

Description

Welcome to this Javascript project which is focused on exploring the power of Application Programming Interfaces (APIs). APIs allow developers to extend web browsers' functionalities using JavaScript, opening up a world of dynamic and interactive possibilities. In this project, I delved into the Web API, starting with the essential Document Object Model (DOM).

In this project, Web APIs Code Quiz, a dynamic, timed coding quiz is built with multiple-choice questions. This project is designed to utilise knowledge of JavaScript fundamentals. It will also store high scores so that users can compare their progress with their peers.

Features

The code quiz has the following features:

• A start button that, when clicked, starts a timer and displays the first question.
• Questions with buttons for each answer.
• When an answer is clicked, the next question appears.
• If an incorrect answer is selected, time is deducted from the clock.
• The quiz ends when all questions are answered or when the timer reaches 0.
• At the end of the quiz, it displays the user's score and allows them to save their initials and score.

How to Run the Application

To run the application, you can visit the live URL where it's deployed. https://daironreijna.github.io/web-apis-pop-quiz/

Additionally, you can clone the project repository and open the HTML file in a web browser. https://github.com/daironreijna/web-apis-pop-quiz

How to Play

1. Click the "Start Quiz" button to begin.
2. Answer each question within the time limit.
3. For every incorrect answer, 10 seconds are deducted from your remainting time.
4. Scores are based to your remaining time.
5. At the end of the quiz, you can save your score by entering your initials and clicking "Submit".
6. View the leaderboard by clicking "High Scores" link.

The Power of Web APIs

Some APIs are already built directly into web browsers. When a web page loads, a virtual representation of the page known as the Document Object Model (DOM) is created. This DOM allows us to leverage JavaScript to interact with HTML elements, transforming static web content into dynamic and engaging user experiences.

Throughout this project, I have develop practical skills in:

• Navigating and manipulating the DOM.
• Adding event listeners to elements and managing events.
• Implementing timers and intervals for enhanced interactivity.
• Storing and persisting data on the client side.

The DOM and Web APIs

The Document Object Model (DOM) is a crucial concept in web development. It represents an in-memory object-oriented version of an HTML document. With the DOM, you can use JavaScript to interact with HTML, enabling you to select elements, retrieve content, insert content, generate new elements, and respond to events like clicks or key presses.

This project explores the intricacies of Web APIs and their role in creating dynamic web applications. I have learnt to navigate the DOM, manipulate HTML elements, add event listeners, implement timers, and store data—all using the power of JavaScript and the browser's built-in APIs.

Resources

• JavaScript Tutorial: What Is the Document Object Model?

• Introduction to localStorage and sessionStorage

• MDN Web Docs on Window

• MDN Web Docs on Document

• MDN Web Docs on Web APIs

• Introduction to the Document Object Model

• localStorage vs. sessionStorage

• MDN Web Docs (n.d.) :scope

• MDN Web Docs (n.d.) Element: querySelectorAll() method

• Abdulqudus Abubakre (2020) append VS appendChild. dev.to

• MDN Web Docs on setInterval()

• MDN Web Docs on clearInterval()

• Tutorial Republic (n.d.) JavaScript Event Propagation

• MDN Web Docs (n.d.) EventTarget: addEventListener() method

• MDN Web Docs on keyup

• MDN Web Docs on keydown

• MDN Web Docs KeyboardEvent

• MDN Web Docs on stopPropagation()

• MDN Web Docs on creating and triggering events

• Alcides Queiroz (2019) Event bubbling and delegation

• MDN Web Docs (n.d.) JSON.stringify()

• Window: localStorage property

• W3Schools (n.d.) HTML DOM Element removeChild()

• Wappalyzer (n.d.) Identify technologies on websites

• GitHub keeps saying "This branch is X commits ahead, Y commits behind"

• git ahead/behind info between master and branch?

• Nelson Michael (2021) Storing and retrieving JavaScript objects in localStorage

• W3 Schools (n.d.) HTML Web Storage API

• StackOverFlow (2021) Question: Randomising the answers in a multiple choice quiz game

• Flavio Copes (2019) How to add an event listener to multiple elements in JavaScript

Contributing

Acknowledgement: Pseudocoding took place in colloboration during a breakout room with other Front End Web Dev & UX bootcamp students.

Coding of JS solely by developer.

Dairon Reijna 🎨💻

I welcome contributions from the community to enhance this Portfolio Project. By participating in this project, you contribute to a vibrant and inclusive environment. To ensure a positive experience the code of conduct we will adhere to is based on The Contributor Covenant. Please review and follow these guidelines when contributing.

Accessibility Testing

I aim to develop websites that are built mobile first, with accessibility in prime focus. I welcome feedback, and would ask that you test for accessibility by visiting this page: Accessibility Testing and Inclusive Design.

License

This project is licensed under a MIT License.

---

© 2023 Dairon Reijna. Confidential and Proprietary. All Rights Reserved.