-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
297 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
*{ | ||
margin:0; | ||
padding:0; | ||
font-family: 'poppins', sans-serif; | ||
box-sizing:border-box; | ||
} | ||
|
||
body{ | ||
width:100%; | ||
height:100%; | ||
background-image: url(img.png); | ||
} | ||
|
||
.app{ | ||
background: white; | ||
width: 90%; | ||
max-width:600px; | ||
margin: 100px auto 0; | ||
border-radius: 30px; | ||
padding: 30px; | ||
} | ||
|
||
.app h1{ | ||
font-size:38px; | ||
color: #001e4d; | ||
font-weight:600; | ||
border-bottom: 2px solid #333; | ||
padding-bottom: 20px; | ||
} | ||
|
||
.quiz{ | ||
padding:20px 0; | ||
} | ||
|
||
.quiz h2{ | ||
font-size:18px; | ||
color: #001e4d; | ||
font-weight:600; | ||
} | ||
|
||
#question{ | ||
font-size: 1.2em; | ||
font-weight: 700; | ||
font-family: Verdana, Geneva, Tahoma, sans-serif; | ||
margin-bottom:15px; | ||
} | ||
|
||
.btn{ | ||
background: #fff; | ||
color:#2d2929; | ||
font-weight:600; | ||
font-size: 1.2rem; | ||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | ||
width:100%; | ||
border:1px solid #222; | ||
padding: 10px; | ||
margin: 10px 0; | ||
text-align: left; | ||
border-radius: 50px; | ||
cursor: pointer; | ||
transition: all 0.3s; | ||
} | ||
|
||
.btn:hover:not([disabled]){ | ||
background: #222; | ||
color:#fff; | ||
} | ||
|
||
.btn:disabled{ | ||
cursor: no-drop; | ||
} | ||
#next-btn{ | ||
background: #001e4d; | ||
color:#fff; | ||
font-weight:700; | ||
font-size:large; | ||
width:150px; | ||
border:0; | ||
padding:10px; | ||
margin:20px auto 0; | ||
border-radius: 8px; | ||
cursor: pointer; | ||
display:none; | ||
} | ||
|
||
.correct{ | ||
background: #199850; | ||
} | ||
|
||
.incorrect{ | ||
background: #d26666; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Quiz</title> | ||
<link rel="stylesheet" href="index.css"> | ||
<link rel="shortcut icon" href="logo.png" type="image/x-icon"> | ||
</head> | ||
<body> | ||
<div class="app"> | ||
<h1>Test of Knowledge</h1> | ||
<div class="quiz"> | ||
<h2 id="question">Question goes here</h2> | ||
<div id="answer-buttons"> | ||
<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="next-btn">Next</button> | ||
</div> | ||
</div> | ||
<script src="index.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,179 @@ | ||
const questions = [ | ||
{ | ||
question: "What does the abbreviation HTML stand for?", | ||
answers: [ | ||
{ text: "HyperText Markup Language", correct: true}, | ||
{ text: "HighText Markup Language", correct: false}, | ||
{ text: "HyperText Markdown Language", correct: false}, | ||
{ text: "None of the above", correct: false}, | ||
] | ||
}, | ||
{ | ||
question: "What is the smallest header in HTML by default?", | ||
answers: [ | ||
{ text: "h1", correct: false}, | ||
{ text: "h2", correct: false}, | ||
{ text: "h6", correct: true}, | ||
{ text: "h4", correct: false}, | ||
] | ||
}, | ||
{ | ||
question: "How to create an ordered list in HTML", | ||
answers: [ | ||
{ text: "ul", correct: false}, | ||
{ text: "ol", correct: true}, | ||
{ text: "href", correct: false}, | ||
{ text: "b", correct: false}, | ||
] | ||
}, | ||
{ | ||
question: "What are the attributes used to change the size of an image?", | ||
answers: [ | ||
{ text: "Width and height", correct: true}, | ||
{ text: "Big and Small", correct: false}, | ||
{ text: "Top and Bottom", correct: false}, | ||
{ text: "None of the above", correct: false}, | ||
] | ||
}, | ||
{ | ||
question: "Colors are defined in HTML using?", | ||
answers: [ | ||
{ text: "RGB Values", correct: false}, | ||
{ text: "HEX Values", correct: false}, | ||
{ text: "RGBA Values", correct: false}, | ||
{ text: "All of the above", correct: true}, | ||
] | ||
}, | ||
{ | ||
question: "What are the main components of the frontend of any working website?", | ||
answers: [ | ||
{ text: "HTML,CSS,JavaScript", correct: true}, | ||
{ text: "HTML only", correct: false}, | ||
{ text: "JavaScript", correct: false}, | ||
{ text: "Node.js", correct: false}, | ||
] | ||
}, | ||
{ | ||
question: "The Full Form of CSS is:", | ||
answers: [ | ||
{ text: "Cascading Style Sheets", correct: true}, | ||
{ text: "Coloured Special Sheets", correct: false}, | ||
{ text: "Color and Style Sheets", correct: false}, | ||
{ text: "None of the above", correct: false}, | ||
] | ||
}, | ||
{ | ||
question: "How can we change the background color of an element?", | ||
answers: [ | ||
{ text: "Background-color", correct: true}, | ||
{ text: "Color", correct: false}, | ||
{ text: "Both A and B", correct: false}, | ||
{ text: "None of the above", correct: false}, | ||
] | ||
}, | ||
{ | ||
question: "In how many ways can CSS be written in?", | ||
answers: [ | ||
{ text: "1", correct: false}, | ||
{ text: "2", correct: false}, | ||
{ text: "4", correct: false}, | ||
{ text: "3", correct: true}, | ||
] | ||
}, | ||
{ | ||
question: "The CSS property used to specify the transparency of an element is?", | ||
answers: [ | ||
{ text: "Filter", correct: false}, | ||
{ text: "Visibility", correct: false}, | ||
{ text: "Opacity", correct: true}, | ||
{ text: "None of the above", correct: false}, | ||
] | ||
} | ||
]; | ||
|
||
const questionElement = document.getElementById("question"); | ||
const answerButtons = document.getElementById("answer-buttons"); | ||
const nextButton = document.getElementById("next-btn"); | ||
|
||
let currentQuestionIndex = 0; | ||
let score = 0; | ||
|
||
function startQuiz(){ | ||
currentQuestionIndex = 0; | ||
score = 0; | ||
nextButton.innerHTML = "Next"; | ||
showQuestion(); | ||
} | ||
|
||
function showQuestion(){ | ||
resetState(); | ||
let currentQuestion = questions[currentQuestionIndex]; | ||
let questionNo = currentQuestionIndex + 1; | ||
questionElement.innerHTML = questionNo + ". " + currentQuestion. | ||
question; | ||
|
||
currentQuestion.answers.forEach(answer => { | ||
const button = document.createElement("button"); | ||
button.innerHTML = answer.text; | ||
button.classList.add("btn"); | ||
answerButtons.appendChild(button); | ||
|
||
if(answer.correct){ | ||
button.dataset.correct = answer.correct; | ||
} | ||
button.addEventListener("click", selectAnswer); | ||
}); | ||
} | ||
|
||
function resetState(){ | ||
nextButton.style.display = "none"; | ||
while(answerButtons.firstChild){ | ||
answerButtons.removeChild(answerButtons.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(answerButtons.children).forEach(buttton => { | ||
if(buttton.dataset.correct === "true"){ | ||
buttton.classList.add("correct"); | ||
} | ||
buttton.disabled = true; | ||
}); | ||
nextButton.style.display = "block"; | ||
} | ||
|
||
function showscore(){ | ||
resetState(); | ||
questionElement.innerHTML = `You scored ${score} out of ${questions.length}!`; | ||
nextButton.innerHTML = "Play Again"; | ||
nextButton.style.display = "block"; | ||
} | ||
|
||
function handleNextButton(){ | ||
currentQuestionIndex++; | ||
if(currentQuestionIndex < questions.length){ | ||
showQuestion(); | ||
} | ||
else{ | ||
showscore(); | ||
} | ||
} | ||
nextButton.addEventListener("click", ()=>{ | ||
if(currentQuestionIndex < questions.length){ | ||
handleNextButton(); | ||
} | ||
else{ | ||
startQuiz(); | ||
} | ||
}); | ||
startQuiz(); |