Quiz App using HTML, CSS & JS
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app">
<h1>Simple Quiz</h1>
<div class="quiz">
<h2 id="question">Question goes here</h2>
<div id="answerButton">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
<button id="nextBtn">Next</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
box-sizing: border-box;
}
body {
background-color: #001e4d;
}
.app {
background-color: #ffff;
width: 90%;
max-width: 600px;
margin: 100px auto 0;
border-radius: 10px;
padding: 30px;
}
.app h1 {
font-size: 25px;
color: #001e4d;
font-weight: 600;
border-bottom: 1px solid #333;
padding-bottom: 30px;
}
.quiz{
padding: 20px 0;
}
.quiz h2{
font-size: 18px;
color: #001e4d;
font-weight: 600;
}
.btn{
background-color: #fff;
color: #222;
font-weight: 500;
width: 100%;
border: 1px solid #222;
padding: 10px;
margin: 10px 0;
text-align: left;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover:not([disabled]){
background-color: #222;
color: #fff;
}
.btn:disabled{
cursor: no-drop;
}
#nextBtn{
color: #fff;
background-color: #001e4d;
font-weight: 500;
width: 150px;
border: 0;
padding: 10px;
margin: 20px auto 0;
border-radius: 4px;
cursor: pointer;
display: none;
}
.correct{
background-color: #9aeabc;
}
.inCorrect{
background-color: #ff9393;
}
script.js
const question = [
{
question: "What does HTML stand for?",
answer: [
{ text: "Hyperlinks and Text Markup Language", correct: false },
{ text: "Hyper Tool Markup Language", correct: false },
{ text: " Hyper Text Markup Language", correct: true },
{ text: "Home Tool Markup Language", correct: false },
]
},
{
question: "In CSS, which property is used to set the background color of an element",
answer: [
{ text: "color", correct: false },
{ text: "bg-color", correct: false },
{ text: "background-color", correct: true },
{ text: "element-color", correct: false },
]
},
{
question: "Which CSS property is used to create a shadow effect around an element's box?",
answer: [
{ text: "box-effect", correct: false },
{ text: "shadow-effect", correct: false },
{ text: "element-shadow", correct: false },
{ text: "box-shadow", correct: true },
]
},
{
question: "What does CSS stand for?",
answer: [
{ text: "Creative Style Sheets", correct: false },
{ text: "Colorful Style Sheets", correct: false },
{ text: "Computer Style Sheets", correct: false },
{ text: "Cascading Style Sheets", correct: true },
]
},
{
question: "Which CSS property is used to change the font size of an element?",
answer: [
{ text: "text-size", correct: false },
{ text: "font-style", correct: false },
{ text: "font-size", correct: true },
{ text: "size", correct: false },
]
},
{
question: "In JavaScript, which operator is used to assign a value to a variable?",
answer: [
{ text: "`=`", correct: true },
{ text: "`==`", correct: false },
{ text: "`===`", correct: false },
{ text: "`:`", correct: false },
]
},
{
question: "What does the concat() method do in JavaScript?",
answer: [
{ text: "Combines two or more arrays and returns a new array.", correct: true },
{ text: "Removes elements from an array and returns the removed elements.", correct: false },
{ text: "Returns a portion of an array into a new array.", correct: false },
{ text: "Sorts the elements of an array alphabetically.", correct: false },
]
},
{
question: "How do you declare a variable in JavaScript?",
answer: [
{ text: "var myVar;", correct: true },
{ text: "v myVar;", correct: false },
{ text: "declare myVar;", correct: false },
{ text: "variable myVar;", correct: false },
]
},
{
question: "What does the DOM stand for in JavaScript?",
answer: [
{ text: "Document Oriented Model", correct: false },
{ text: "Data Object Manipulation", correct: false },
{ text: "Data Object Model", correct: false },
{ text: "Document Object Model", correct: true },
]
},
{
question: "What does JavaScript do primarily?",
answer: [
{ text: "Defines document semantics", correct: false },
{ text: "Manages database operations", correct: false },
{ text: "Manipulates HTML/CSS", correct: true },
{ text: "Defines website structure", correct: false },
]
}
];
const questionElement = document.getElementById('question');
const answerButton = document.getElementById('answerButton');
const nextBtn = document.getElementById('nextBtn');
let currentQuestionIndex = 0;
let score = 0;
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
nextBtn.innerHTML = "Next";
showQuestion();
}
function showQuestion() {
resetState();
let currentQuestion = question[currentQuestionIndex];
let questionNo = currentQuestionIndex + 1;
questionElement.innerHTML = questionNo + ". " + currentQuestion.question;
currentQuestion.answer.forEach(answer => {
const button = document.createElement('button');
button.innerHTML = answer.text;
button.classList.add('btn');
answerButton.appendChild(button);
if (answer.correct) {
button.dataset.correct = answer.correct;
}
button.addEventListener("click", selectAnswer)
});
}
function resetState() {
nextBtn.style.display = "none";
while (answerButton.firstChild) {
answerButton.removeChild(answerButton.firstChild);
}
}
function selectAnswer(e) {
const selectedBtn = e.target;
const isCorrect = selectedBtn.dataset.correct === 'true';
if (isCorrect) {
selectedBtn.classList.add('correct');
score++;
} else {
selectedBtn.classList.add('inCorrect');
}
Array.from(answerButton.children).forEach(button => {
if (button.dataset.correct === 'true') {
button.classList.add('correct');
}
button.disabled = true;
});
nextBtn.style.display = 'block';
}
function showScore() {
resetState();
questionElement.innerHTML = `You Score ${score} Out Of ${question.length}!`
nextBtn.innerHTML = 'Play Again'
nextBtn.style.display = 'block'
}
function handleNextButton() {
currentQuestionIndex++;
if (currentQuestionIndex < question.length) {
showQuestion();
} else {
showScore();
}
}
nextBtn.addEventListener('click', () => {
if (currentQuestionIndex < question.length) {
handleNextButton();
} else {
startQuiz();
}
});
startQuiz();
Go Live:
Comments
Post a Comment