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