Merge pull request #2350 from 1911aditi/master

added an extension for quick math quiz
Sulagna-Dutta-Roy · Jul 12, 2024 · e0f66ae · e0f66ae
2 parents 7db2f5b + 7e3c72a
commit e0f66ae
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 0 deletions.
diff --git a/Quick Math Quiz/manifest.json b/Quick Math Quiz/manifest.json
@@ -0,0 +1,11 @@
+{
+    "manifest_version": 3,
+    "name": "Quick Math Quiz",
+    "version": "1.0",
+    "description": "A quick math quiz to test your skills!",
+    "action": {
+      "default_popup": "popup.html"
+    },
+    "permissions": []
+  }
+
diff --git a/Quick Math Quiz/popup.css b/Quick Math Quiz/popup.css
@@ -0,0 +1,32 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+  }
+
+  #quiz {
+    margin: 20px auto;
+  }
+
+  h1 {
+    color: #333;
+  }
+
+  input, button {
+    padding: 10px;
+    margin: 10px;
+    font-size: 16px;
+  }
+
+  #feedback {
+    margin-top: 10px;
+    font-weight: bold;
+  }
+
+  #score {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
diff --git a/Quick Math Quiz/popup.html b/Quick Math Quiz/popup.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Quick Math Quiz</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div id="quiz">
+    <h1>Quick Math Quiz</h1>
+    <p id="question">Question will appear here</p>
+    <input type="number" id="answer" placeholder="Your answer">
+    <button id="submit">Submit</button>
+    <p id="feedback"></p>
+    <p>Score: <span id="score">0</span></p>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/Quick Math Quiz/popup.js b/Quick Math Quiz/popup.js
@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const questionElement = document.getElementById('question');
+    const answerInput = document.getElementById('answer');
+    const submitButton = document.getElementById('submit');
+    const feedbackElement = document.getElementById('feedback');
+    const scoreElement = document.getElementById('score');
+
+    let score = 0;
+    let currentQuestion = {};
+
+    function generateQuestion() {
+      const num1 = Math.floor(Math.random() * 10) + 1;
+      const num2 = Math.floor(Math.random() * 10) + 1;
+      currentQuestion = {
+        question: `${num1} + ${num2}`,
+        answer: num1 + num2
+      };
+      questionElement.textContent = currentQuestion.question;
+      answerInput.value = '';
+      feedbackElement.textContent = '';
+    }
+
+    submitButton.addEventListener('click', function() {
+      const userAnswer = parseInt(answerInput.value, 10);
+      if (userAnswer === currentQuestion.answer) {
+        feedbackElement.textContent = 'Correct!';
+        score++;
+      } else {
+        feedbackElement.textContent = 'Wrong. Try again!';
+      }
+      scoreElement.textContent = score;
+      generateQuestion();
+    });
+
+    generateQuestion();
+  });
+