You are currently viewing Create a Quiz App Using HTML ,CSS & JavaScript

Create a Quiz App Using HTML ,CSS & JavaScript

Create a Quiz App Using HTML ,CSS & JavaScript

Create a Quiz App Using HTML ,CSS & JavaScript
Create a Quiz App Using HTML ,CSS & JavaScript

 

Welcome To Codewithrandom Blog. In This Blog, We Learn How To Create Quiz App. We Use Html,Css And JavaScript For This Quiz App.

Hope You Enjoy Our Blog Let’s Start With A Basic Html Structure For Quiz App.

HTML Code For Quiz App

<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 id="question">Question is loading...</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer" />
<label for="a" id="a_text">Answer...</label>
</li>
<li>
<input type="radio" name="answer" id="b" class="answer" />
<label for="b" id="b_text">Answer...</label>
</li>
<li>
<input type="radio" name="answer" id="c" class="answer" />
<label for="c" id="c_text">Answer...</label>
</li>
<li>
<input type="radio" name="answer" id="d" class="answer" />
<label for="d" id="d_text">Answer...</label>
</li>
</ul>
</div>
<button id="submit">Submit</button>
</div>

There Is All Html Code For Quiz App. Now You Can See Output Without Css And Javascript. Then We Use Css To Style Our Quiz App And Give Functionality Using Javascript In  Quiz App.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

 
 Quiz App Using HTML ,CSS & JavaScript
Quiz App Using HTML ,CSS & JavaScript

50+ Html ,Css & Javascript Projects With Source Code

CSS Code For Quiz App

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.quiz-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
max-width: 95vw;
overflow: hidden;
}
.quiz-header {
padding: 4rem;
}
h2 {
padding: 1rem;
text-align: center;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label {
cursor: pointer;
}
button {
background-color: #8e44ad;
color: #fff;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
padding: 1.3rem;
}
button:hover {
background-color: #732d91;
}
button:focus {
outline: none;
background-color: #5e3370;
}
Now we complete our CSS section.  Here is our updated output With Html and Css.
 Quiz App Using HTML ,CSS & JavaScript
Quiz App Using HTML ,CSS & JavaScript

 

Now add javascript for questions & answers and Create a Quiz Functionality.

JavaScript Code For Quiz App

 const quizData = [
{
question: "Which language runs in a web browser?",
a: "Java",
b: "C",
c: "Python",
d: "JavaScript",
correct: "d",
},
{
question: "What does CSS stand for?",
a: "Central Style Sheets",
b: "Cascading Style Sheets",
c: "Cascading Simple Sheets",
d: "Cars SUVs Sailboats",
correct: "b",
},
{
question: "What does HTML stand for?",
a: "Hypertext Markup Language",
b: "Hypertext Markdown Language",
c: "Hyperloop Machine Language",
d: "Helicopters Terminals Motorboats Lamborginis",
correct: "a",
},
{
question: "What year was JavaScript launched?",
a: "1996",
b: "1995",
c: "1994",
d: "none of the above",
correct: "b",
},
];
const quiz = document.getElementById("quiz");
const answerElements = document.querySelectorAll(".answer");
const questionElement = document.getElementById("question");
const a_text = document.getElementById("a_text");
const b_text = document.getElementById("b_text");
const c_text = document.getElementById("c_text");
const d_text = document.getElementById("d_text");
const submitButton = document.getElementById("submit");
let currentQuiz = 0;
let score = 0;
const deselectAnswers = () => {
answerElements.forEach((answer) => (answer.checked = false));
};
const getSelected = () => {
let answer;
answerElements.forEach((answerElement) => {
if (answerElement.checked) answer = answerElement.id;
});
return answer;
};
const loadQuiz = () => {
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
questionElement.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
};
loadQuiz();
submitButton.addEventListener("click", () => {
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuiz].correct) score++;
currentQuiz++;
if (currentQuiz < quizData.length) loadQuiz();
else {
quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correctly</h2>
<button onclick="history.go(0)">Play Again</button>
` // location.reload() won't work in CodePen for security reasons;
}
}
});

Now we complete our Quiz App. Here is our updated output with Html, Css, and JavaScript. Hope you like this Quiz App Using HTML, CSS and JavaScript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

 

 Quiz App Using HTML ,CSS & JavaScript
Quiz App Using HTML ,CSS & JavaScript

 

 Quiz App Using HTML ,CSS & JavaScript
Quiz App Using HTML ,CSS & JavaScript

In this post, we learn how to create a Quiz App Using HTML, CSS and JavaScript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

Portfolio Website using HTML and CSS (Source Code)

Written by – Code With Random/Anki 

This Post Has 0 Comments

  1. Anonymous

    Bro can fetch as to view previous question also

Leave a Reply