In this project your task is to develop a functional quiz app using basic html, css & javascript. You'll be given a set of questions in a json format for the quiz content. Your task to build the app which gives the option to choose an option and reactively display the correct answer if the wrong answer as selected.

As a beginner, this project will help you understand working and manipulation DOM elements. You would properly understand managing different states of DOM elements manually in a functional manner.

Build a simple quiz app with answer validation

Greetings, aspiring developers! In this project, we'll embark on a journey to create a dynamic and engaging Quiz application using the trifecta of web development technologies: HTML, CSS, and JavaScript. This project will not only enhance your understanding of these languages but also provide hands-on experience in managing data through JSON.

### How It Will Work:

1. **Interactive Interface**: Our user-friendly interface will ensure a seamless experience as you navigate through the questions.

2. **Dynamic Content**: The questions are sourced from a local json file, ensuring a diverse and engaging set of challenges for you.

3. **Real-time Feedback**: Receive instant feedback on your answers, allowing you to learn and improve on the go.

You can take a look at the [final version](https://65d5da0527757389b87e998b--endearing-rabanadas-3b5c5d.netlify.app/)  of the project

### Get Ready to Explore:

- Challenge yourself with a variety of questions spanning different topics.
- Sharpen your problem-solving skills while enjoying the interactive features of our application.

Remember, learning is a journey, and this quiz application is just one step towards expanding your knowledge horizon. Best of luck, and may you enjoy the quest for wisdom!

Let the quiz begin!

Introduction to Quiz Application

In this lab, you will be writing HTML for quiz application. Follow the following steps to do so:-

**1.** Write the boiler plate HTML that contains useful metadata along with a body.

#### 2. Body Section - Structuring the Quiz Content
- Begin the body with `<body>`.
- Introduce a container `<div>` with the class attribute set to "container" for organizing the quiz elements.

#### 3. Question Container

- Inside the container, create a hidden `<div>` with class="hide" and id="question-container". This div will hold the question and answer options.
- Inside question-container, include a `<div>` with id="question" to display the question.
- Utilize a nested `<div>` in question-container with id="answer-buttons" and class="btn-grid" to organize answer buttons in a grid layout.
- In btn-grid, add four `<button>` elements with class="btn" to represent answer choices.

#### 4. Controls Section

- Below the question container, create another `<div>` with class="controls". This section will house buttons for starting the quiz and navigating to the next question.
- Include a "Start" button with class="start-btn btn" and id="start-btn". This button initiates the quiz.
- Add a "Next" button with class="next-btn btn hide" and id="next-btn". - - This button remains hidden initially and becomes visible as the user progresses through the quiz.

#### 5. Integrate `script.js` and `style.css`
- Don't forget to add `script` and `link` tags to link script.js and style.css files with your html.

By following these instructions, you've set up the structure for a quiz application, ready to be styled and enhanced with dynamic behavior through CSS and JavaScript

Now your task is to style the page using CSS however you like. Although, here is a sample for your reference: [Sample Website](https://65d5da0527757389b87e998b--endearing-rabanadas-3b5c5d.netlify.app/)

Writing HTML

Follow these steps and you will be good to proceed to next challenge:

### 1. `getQuestions` Function
- This function should be designed to fetch questions from the "questions.json" file using the `fetch` API.
- It should be marked as `async` since fetching data is an asynchronous operation.
- A try...catch block should be employed to handle potential errors during the fetching process.
- If successful, the function returns the parsed JSON data representing the questions.
- If an error occurs, it is logged to the console using console.error.
**Note:** The questions.json file contains an array of objects, each representing a question:
```json
// questions.json
[
  {
    "question": "What is the extension for HTML file?",
    "answers": [
      { "text": ".css", "correct": false },
      { "text": ".js", "correct": false },
      { "text": ".html", "correct": true },
      { "text": ".tsx", "correct": false }
    ]
  }
]
```

### 2. `getRandomQuestions` Function
Make a function getRandomQuestions such that: 
- This function aims to provide a random question from the pool of questions retrieved by `getQuestions`.
- The `questions` variable is used to store the retrieved questions. If it is undefined, meaning the questions haven't been fetched yet, the function fetches them using `getQuestions`.
- A random index is generated based on the length of the questions array.
- The question at the randomly generated index is returned.


### 3. `startGame` Function
- The purpose of this function is to kickstart the quiz by displaying the first question and providing answer choices.
- The function begins by hiding the "Start" button.
- It reveals the container for questions (`questionsContainerElement`) by removing the "hide" class from it. Ensure that `questionsContainerElement` contains `HTMLElement` for id = `"questions-container"`.
- The function uses the `getRandomQuestions` function (not provided in the snippet) to asynchronously retrieve a random question.
- The question text is then assigned to the innerHTML of the questionElement, updating the content to display the current question.
- For each answer in the question's answers array, the function dynamically creates a new button element (`<button>`). Remember the structure of each question?
```json
{
    "question": "What is the extension for HTML file?",
    "answers": [
      { "text": ".css", "correct": false },
      { "text": ".js", "correct": false },
      { "text": ".html", "correct": true },
      { "text": ".tsx", "correct": false }
    ]
  }
```
- The button's inner HTML is set to the answer text, and the "btn" class is added to style it accordingly.
- If the answer is correct (answer.correct is true), the button is marked with the `dataset.correct` attribute to indicate its correctness:
```js
button.dataset.correct = true;
```
- An event listener (click event) is added to each button, calling a function named `selectAnswer` when clicked. We will write the logic for `selectAnswer` function in next challenge.
- Finally, the created button is appended to the `answerButtonsElement`. `answerButtonsElement` contains `HTMLElement` for `<div>` containing id="answer-buttons".

### 4. Adding `click` event on start button
- Add a click event on start button HTMLElement. Whenever a user clicks on start button, `startGame` function should invoke.

### 5. Define `selectAnswer` function
- Define an emply function: `selectAnswer`. We will write logic for this function in the next challenge.

Starting the game

Follow these steps to enhance the quiz application:

### Step 1: Handling User Selection with the `selectAnswer` Function
This JavaScript function, `selectAnswer`, is responsible for processing the user's answer selection and updating the quiz interface accordingly.
- This function is triggered when a user clicks on an answer button.
- The function begins by extracting the clicked button from the event object (`e`) using `const button = e.target;`. This allows for identification and manipulation of the selected answer button.
- It checks if the clicked button has a `dataset.correct` attribute. If it does, the answer is correct, and `document.body` gets a class of "correct" added, otherwise "wrong" class gets added.
- All answer buttons are accessed using `Array.from(answerButtonsElement.children)` to convert the HTMLCollection into an array. This array, `arrayedButtons`, is then iterated through.
- For each button, the function checks if it has the `dataset.correct` attribute. Based on this, it adds either the "correct" or "wrong" class to indicate the correctness of each answer.
- The "Next" button (presumably with the id nextButton) is revealed by removing the "hide" class using `nextButton.classList.remove("hide")`. This suggests that the next question can be accessed after the user has selected an answer.
- To the "Next" button, add a click event. It should call `startGame` function whenever event occurs.

### Step 2: Resetting the Quiz Slate with `resetSlate` Function
This JavaScript function, resetSlate, is responsible for resetting the state of the quiz, preparing it for the next question or a new quiz session. Let's break down its functionality:
- It removes the "correct" and "wrong" classes from the document.body. These classes are used for styling feedback based on the correctness of the user's previous answer.
- The "Next" button is hidden by adding the "hide" class to it. This ensures that the button is not visible until the quiz progresses to the next question.
- Remove all the answer buttons (i.e. all the options of previous question). Need help?
```js
while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild);
  }
```

### Step 3: Calling `resetSlate` from `startGame`
- In the `startGame`, call the `resetSlate` function from the very top. This will ensure the previous question's content is wiped off successfully.

With these steps, you've enhanced the functionality and user experience of your quiz application. Incorporate these improvements into your code, and your project will be well-equipped for a polished and dynamic quiz experience.

Congrats on moving one step ahead towards eternal knowledge🌟. I hope to see you in the next one.

Quiz App

Project Description

Get involved with the community

Ready? Start Building

Milestones