In this project your task is to develop a functional quiz app using basic html, css &amp; 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.
<h3>How It Will Work:</h3>
<ol>
<li>
Interactive Interface: Our user-friendly interface will ensure a seamless experience as you navigate through the questions.
</li>
<li>
Dynamic Content: The questions are sourced from a local json file, ensuring a diverse and engaging set of challenges for you.
</li>
<li>
Real-time Feedback: Receive instant feedback on your answers, allowing you to learn and improve on the go.
</li>
</ol>
You can take a look at the <a href="https://65d5da0527757389b87e998b--endearing-rabanadas-3b5c5d.netlify.app/" target="_blank" rel="noopener nofollow">final version</a> of the project
<h3>Get Ready to Explore:</h3>
<ul>
<li>Challenge yourself with a variety of questions spanning different topics.</li>
<li>Sharpen your problem-solving skills while enjoying the interactive features of our application.</li>
</ul>
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.
<h4>2. Body Section - Structuring the Quiz Content</h4>
<ul>
<li>Begin the body with <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;body&gt;</code>.</li>
<li>Introduce a container <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;div&gt;</code> with the class attribute set to "container" for organizing the quiz elements.</li>
</ul>
<h4>3. Question Container</h4>
<ul>
<li>Inside the container, create a hidden <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;div&gt;</code> with class="hide" and id="question-container". This div will hold the question and answer options.</li>
<li>Inside question-container, include a <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;div&gt;</code> with id="question" to display the question.</li>
<li>Utilize a nested <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;div&gt;</code> in question-container with id="answer-buttons" and class="btn-grid" to organize answer buttons in a grid layout.</li>
<li>In btn-grid, add four <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;button&gt;</code> elements with class="btn" to represent answer choices.</li>
</ul>
<h4>4. Controls Section</h4>
<ul>
<li>Below the question container, create another <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;div&gt;</code> with class="controls". This section will house buttons for starting the quiz and navigating to the next question.</li>
<li>Include a "Start" button with class="start-btn btn" and id="start-btn". This button initiates the quiz.</li>
<li>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.</li>
</ul>
<h4>5. Integrate <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">script.js</code> and <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">style.css</code></h4>
<ul>
<li>Don't forget to add <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">script</code> and <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">link</code> tags to link script.js and style.css files with your html.</li>
</ul>
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: <a href="https://65d5da0527757389b87e998b--endearing-rabanadas-3b5c5d.netlify.app/" target="_blank" rel="noopener nofollow">Sample Website</a>

Writing HTML

Follow these steps and you will be good to proceed to next challenge:
<h3>1. <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">getQuestions</code> Function</h3>
<ul>
<li>This function should be designed to fetch questions from the "questions.json" file using the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">fetch</code> API.</li>
<li>It should be marked as <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">async</code> since fetching data is an asynchronous operation.</li>
<li>A try...catch block should be employed to handle potential errors during the fetching process.</li>
<li>If successful, the function returns the parsed JSON data representing the questions.</li>
<li>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:</li>
</ul>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none" class="language-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 }
 ]
 }
]</code></div></pre>
<h3>2. <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">getRandomQuestions</code> Function</h3>
Make a function getRandomQuestions such that:
<ul>
<li>This function aims to provide a random question from the pool of questions retrieved by <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">getQuestions</code>.</li>
<li>The <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">questions</code> 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 <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">getQuestions</code>.</li>
<li>A random index is generated based on the length of the questions array.</li>
<li>The question at the randomly generated index is returned.</li>
</ul>
<h3>3. <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">startGame</code> Function</h3>
<ul>
<li>The purpose of this function is to kickstart the quiz by displaying the first question and providing answer choices.</li>
<li>The function begins by hiding the "Start" button.</li>
<li>It reveals the container for questions (<code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">questionsContainerElement</code>) by removing the "hide" class from it. Ensure that <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">questionsContainerElement</code> contains <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">HTMLElement</code> for id = <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">"questions-container"</code>.</li>
<li>The function uses the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">getRandomQuestions</code> function (not provided in the snippet) to asynchronously retrieve a random question.</li>
<li>The question text is then assigned to the innerHTML of the questionElement, updating the content to display the current question.</li>
<li>For each answer in the question's answers array, the function dynamically creates a new button element (<code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;button&gt;</code>). Remember the structure of each question?</li>
</ul>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none" class="language-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 }
 ]
 }</code></div></pre>
<ul>
<li>The button's inner HTML is set to the answer text, and the "btn" class is added to style it accordingly.</li>
<li>If the answer is correct (answer.correct is true), the button is marked with the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">dataset.correct</code> attribute to indicate its correctness:</li>
</ul>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none" class="language-js">button.dataset.correct = true;</code></div></pre>
<ul>
<li>An event listener (click event) is added to each button, calling a function named <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">selectAnswer</code> when clicked. We will write the logic for <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">selectAnswer</code> function in next challenge.</li>
<li>Finally, the created button is appended to the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">answerButtonsElement</code>. <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">answerButtonsElement</code> contains <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">HTMLElement</code> for <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;div&gt;</code> containing id="answer-buttons".</li>
</ul>
<h3>4. Adding <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">click</code> event on start button</h3>
<ul>
<li>Add a click event on start button HTMLElement. Whenever a user clicks on start button, <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">startGame</code> function should invoke.</li>
</ul>
<h3>5. Define <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">selectAnswer</code> function</h3>
<ul>
<li>Define an emply function: <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">selectAnswer</code>. We will write logic for this function in the next challenge.</li>
</ul>

Starting the game

Follow these steps to enhance the quiz application:
<h3>Step 1: Handling User Selection with the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">selectAnswer</code> Function</h3>
This JavaScript function, <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">selectAnswer</code>, is responsible for processing the user's answer selection and updating the quiz interface accordingly.
<ul>
<li>This function is triggered when a user clicks on an answer button.</li>
<li>The function begins by extracting the clicked button from the event object (<code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">e</code>) using <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">const button = e.target;</code>. This allows for identification and manipulation of the selected answer button.</li>
<li>It checks if the clicked button has a <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">dataset.correct</code> attribute. If it does, the answer is correct, and <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">document.body</code> gets a class of "correct" added, otherwise "wrong" class gets added.</li>
<li>All answer buttons are accessed using <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">Array.from(answerButtonsElement.children)</code> to convert the HTMLCollection into an array. This array, <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">arrayedButtons</code>, is then iterated through.</li>
<li>For each button, the function checks if it has the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">dataset.correct</code> attribute. Based on this, it adds either the "correct" or "wrong" class to indicate the correctness of each answer.</li>
<li>The "Next" button (presumably with the id nextButton) is revealed by removing the "hide" class using <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">nextButton.classList.remove("hide")</code>. This suggests that the next question can be accessed after the user has selected an answer.</li>
<li>To the "Next" button, add a click event. It should call <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">startGame</code> function whenever event occurs.</li>
</ul>
<h3>Step 2: Resetting the Quiz Slate with <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">resetSlate</code> Function</h3>
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:
<ul>
<li>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.</li>
<li>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.</li>
<li>Remove all the answer buttons (i.e. all the options of previous question). Need help?</li>
</ul>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none" class="language-js">while (answerButtonsElement.firstChild) {
 answerButtonsElement.removeChild(answerButtonsElement.firstChild);
 }</code></div></pre>
<h3>Step 3: Calling <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">resetSlate</code> from <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">startGame</code></h3>
<ul>
<li>In the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">startGame</code>, call the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">resetSlate</code> function from the very top. This will ensure the previous question's content is wiped off successfully.</li>
</ul>
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