Table of Contents
Welcome to the Guideflare blog. In this article, We create a Quiz Website using HTML, CSS, And JavaScript. We give you the Complete source code of the Quiz Website.
Introduction
In the digital age, interactive content has become a key factor in engaging online audiences. One popular form of interactive content is the quiz, which not only captures users' attention but also provides a way to test their knowledge on a particular topic. In this tutorial, we'll walk you through the process of creating your own quiz website using HTML, CSS, and JavaScript. By the end of this article, you'll have a functional quiz platform that you can customize to suit your needs.
| Code by | Guideflare |
| Project Download | Direct Copy and Paste |
| Language used | HTML, CSS and JavaScript |
| External link / Dependencies | Yes |
| Responsive | Yes |
Prerequisites
Before diving into the tutorial, let's ensure you have the basic knowledge required to follow along:
- A basic understanding of HTML, CSS, and JavaScript.
- A code editor of your choice (e.g., Visual Studio Code, Sublime Text, etc.).
- Familiarity with working with files and directories on your computer.
HTML and Javascript Code For Quiz App
<!--[Final Visible Result]-->
<div class="Result-Container hidden"><div>Congratulations, You have completed this quiz.</div><p>Mark: <span id="result-percentage-mark"></span></p><p>Total Questions <span id="total-questions"></span></p><p>Answered: <span id="result-answered-Questions"></span></p><p>Not answered: <span id="result-not-answered-Questions"></span></p><p>Correct answers <span id="result-correct-result"></span></p><p>Wrong answers <span id="result-wrong-answer"></span></p><p>After you finished working on the CSS material quiz, how did your grades go?success or need to repeat?<a id="Reset-Quiz" href="javascript:;">try again</a></p><!--Do not Remove this Section--><div id="guideflare-credits"><p>HTML Quiz made by <a id="credit-link" href="http://www.guideflare.com" rel="dofollow">Guideflare</a></p></div></div>
<!-- Question Container -->
<div class="quiz-container-section" data-quis="auto">
<form>
<div class="quiz-con"><span class="qus-no-field"></span><div class="quiz-bar">
<p>This is a Demo Question?</p>
</div></div>
<label> <input type="radio" name="radio" value="false" />Wrong Answer</label>
<label> <input type="radio" name="radio" value="true" />Correct Answer</label>
<label> <input type="radio" name="radio" value="flase" />Wrong Answer</label>
<label> <input type="radio" name="radio" value="false" />Wrong Answer</label>
</form>
<!-- Add more Question -->
<!--
<form><div class="quiz-con"><span class="qus-no-field"></span><div class="quiz-bar">
<p>Write your Question</p>
</div></div>
<label> <input type="radio" name="radio" value="false" />Option</label>
<label> <input type="radio" name="radio" value="false" />Option</label>
<label> <input type="radio" name="radio" value="flase" />Option</label>
<label> <input type="radio" name="radio" value="false" />Option</label></form>
-->
<div class="submit-button" style="text-align:center;display:blank;">
<button id="quiz-submit-button">Submit</button>
</div>
</div>
<!-- [Quiz - JavaScript Script] -->
<script src="https://cdn.jsdelivr.net/gh/Shivanode2001/project-quiz@6e092ebd28eca0959440725acf3d6af0efb86904/app-quiz-js-guideflare.js"/>
Setting Up the Project
To get started, let's set up the project structure:
- Create a new directory for your project.
- Inside the project directory, create three files: index.html, styles.css, and script.js.
- Open index.html in your code editor and set up the basic structure of an HTML document.
- Link the styles.css and script.js files using the <link> and <script> tags respectively.
Creating the Quiz Interface
The quiz interface is where users will interact with your questions. Here's how to structure it:
HTML Structure:
- Create a <div> with a class of "quiz-con" to serve as the main container for your quiz.
- Inside the container, add a heading or a bar with a class of "quiz-bar" to provide a visual indicator of progress.
- Use an HTML form to structure the quiz questions and answer options.
- Duplicate the question container to add more questions to the quiz.
Styling with CSS:
- Style the main container using the .quiz-con class. Apply background colors, border radius, and box shadows to create a visually appealing quiz area.
- Customize the question bar's appearance with the .quiz-bar class. You can set background colors, padding, and font sizes to make it stand out.
CSS Code For Quiz App
<style>
.quiz-con{width:100%;display:block;position:relative;background:#fff;border-radius:20px;box-shadow:0 10px 40px rgba(149,157,165,.2);padding:0 0 10px;margin:10px 0}.quiz-bar{margin:0 4% 0 2%} .Result-Container,.quiz-personal-details{position:relative;padding:10px 15px;margin:20px auto;width:100%;background-color:#fff;box-shadow:0 2px 15px -2px rgb(0 0 0 / 12%);border-radius:3px}#quiz-start-button.hidden,#wcqws-made-by,.Quiz-timer-section.hidden,.Result-Container.hidden,.quiz-container-section.hidden,.quiz-personal-details.hidden{visibility:hidden;opacity:0}.blogContent .widget input[type=text],.quiz-personal-details input[type=text]{padding:15px;border-radius:3px;margin:10px 0;width:100%;border:1px solid #ddd;outline:0;background:rgba(255,255,255,.2);color:#444}.blogContent .widget input[type=text]:focus,.quiz-personal-details input[type=text]:focus{border-color:#f89000!important}.quiz-personal-details input[type=text]::-webkit-input-placeholder{color:#a5a5a5;font-size:14px}button#continue-quiz-start,button#quiz-start-button,button#quiz-submit-button{width:100%;padding:15px;outline:0;border:0;background-color:#f89000;color:#fff;border-radius:3px;margin-bottom:10px;font-size:15px;font-weight:700}button#quiz-start-button,button#quiz-submit-button{margin-top:25px}@media screen and (min-width:500px){button#quiz-start-button,button#quiz-submit-button{max-width:300px}}.Result-Container div{text-align:center;font-size:16px}.Result-Container p{font-size:15px;margin:5px auto} .Result-Container p:last-child{font-size:13px;line-height:1.5em;margin-top:15px;font-style:italic;opacity:.8}.quiz-container-section label{background-color:#e7e9eb;display:block;position:relative;padding:5px;margin-bottom:2px;cursor:pointer;border-radius:10px;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;word-wrap:break-word}.quiz-container-section input{border:2px solid #fff;box-shadow:0 0 0 1px #f89000;appearance:none;border-radius:50%;width:12px;height:12px;background-color:#fff;transition:.2s ease-in;margin-right:10px} .quiz-container-section input:checked{background-color:#f89000}.quiz-container-section label:hover{background-color:#ddd} .qus-no-field{position:absolute;top:0;right:0;min-width:40px;color:#fff;background:#00ff00;border-radius:0 20px;padding:0 13px;opacity:.6}
</style>
Styling the Quiz
Radio Buttons and Labels:
Use CSS to style radio buttons and labels to resemble clickable options.
Apply custom styles to the labels to make them visually distinct when users hover over them.
Utilize transitions for smooth animations and user-friendly interactions.
Result Container:
Style the result container with the .Result-Container class to make it visually appealing when it appears.
Format the text within the result container to provide clear feedback to users after completing the quiz.
Implementing Quiz Logic with JavaScript
JavaScript Functions:
Begin by creating a JavaScript file (script.js) to handle the quiz logic.
Write a function to calculate the user's score based on their answers.
Implement logic to display the result container with the user's score and feedback once the quiz is completed.
Event Listeners:
Use event listeners to track user interactions, such as selecting radio buttons and submitting answers.
Implement a submission function that triggers the score calculation and displays the result container.
Reset Functionality:
Allow users to reset the quiz and start again from the beginning.
Implement a reset function that clears their selections and hides the result container.
Conclusion
Creating a quiz website from scratch might seem complex, but with the power of HTML, CSS, and JavaScript, you can build interactive and engaging content that captures users' attention. Throughout this tutorial, you've learned the essential steps to structure the quiz interface, style it using CSS, and add interactive functionality using JavaScript. Now, it's up to you to take this foundation and tailor it to your unique needs and interests.
Remember, practice makes perfect. Experiment with different styles, layouts, and interactions to create a quiz website that resonates with your audience and effectively tests their knowledge. By combining your creativity with the skills you've gained, you'll be well on your way to mastering the art of creating interactive web content.
Credits: The JavaScript code used in this tutorial was sourced from the Guideflare project. Feel free to explore their platform for more interactive content ideas and resources.