Add files via upload

13Sharad · Jan 13, 2024 · dbe7c93 · dbe7c93
1 parent be12fc5
commit dbe7c93
Show file tree

Hide file tree

Showing 5 changed files with 297 additions and 0 deletions.
diff --git a/img.png b/img.png
diff --git a/index.css 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;
+}
diff --git a/index.html b/index.html
@@ -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>
diff --git a/index.js 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();
diff --git a/logo.png b/logo.png