diff --git a/img.png b/img.png
new file mode 100644
index 0000000..9e704e4
Binary files /dev/null and b/img.png differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..898b11d
--- /dev/null
+++ b/index.css
@@ -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;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9ee54e9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ Quiz
+
+
+
+
+
+
Test of Knowledge
+
+
Question goes here
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..5bb76a1
--- /dev/null
+++ b/index.js
@@ -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();
\ No newline at end of file
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..093a260
Binary files /dev/null and b/logo.png differ