Merge pull request #2318 from aditya-bhaumik/gk

added general knowlege quiz extension
Sulagna-Dutta-Roy · Jul 11, 2024 · 2bc5331 · 2bc5331
2 parents d6c8507 + 932ed58
commit 2bc5331
Show file tree

Hide file tree

Showing 6 changed files with 272 additions and 0 deletions.
diff --git a/General Knowlege Quiz/README.md b/General Knowlege Quiz/README.md
@@ -0,0 +1,53 @@
+# **General Knowledge Quiz**
+
+<br>
+
+## **Description 📃**
+The General Knowledge Quiz is an engaging and educational Chrome extension designed to test and improve your general knowledge across various topics. 
+
+The quiz consists of 10 multiple-choice questions, and at the end of the quiz, your score is displayed, allowing you to track your progress and challenge yourself to improve.
+
+<br>
+
+## **Functionalities 🎮**
+- **Answering the questions**: The player can interact with the quiz by selecting an answer for each question. 
+- **Counting moves**: The quiz keeps track of the number of correct answers the player has made and displays the final score at the end of the quiz.
+- **Displaying results**: The quiz checks the player's answers and displays the final score once all questions have been answered. This helps the player understand their performance.
+- **Restarting the quiz**: The player can choose to restart the quiz at any point, which resets the quiz state and allows them to start again from the beginning.
+
+<br>
+
+## **How to play? 🕹️**
+The quiz starts with a series of 10 multiple-choice questions. The player needs to select one of the provided answers for each question. After answering all the questions, the player submits their answers to see their final score.
+
+- Read each question carefully.
+- Select the answer you believe is correct by clicking on the corresponding option.
+- Once all questions are answered, click the "Submit" button to see your score.
+- If you want to try again, you can restart the quiz and attempt to improve your score.
+
+<br>
+
+## **Screenshots 📸**
+![image](https://github.com/aditya-bhaumik/GGExtensions/assets/92214013/96bc4ba4-ebd9-4513-9f9b-06e8af33578e)
+
+<br>
+
+## **Installation 📥**
+1. Download the extension files and save them to a folder on your computer.
+2. Open Google Chrome and navigate to `chrome://extensions/`.
+3. Enable "Developer mode" by toggling the switch in the top right corner.
+4. Click "Load unpacked" and select the folder where you saved the extension files.
+5. The General Knowledge Quiz extension should now appear in your list of extensions and be ready to use.
+
+<br>
+
+## **Usage Instructions 📘**
+1. Click on the General Knowledge Quiz extension icon in your Chrome toolbar.
+2. The quiz popup will appear with the questions and answer options.
+3. Answer all the questions and click the "Submit" button.
+4. Your score will be displayed, showing how many questions you answered correctly.
+5. To restart the quiz, click the "Restart" button.
+
+
+
+
diff --git a/General Knowlege Quiz/icon.png b/General Knowlege Quiz/icon.png
diff --git a/General Knowlege Quiz/index.html b/General Knowlege Quiz/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>General Knowledge Quiz</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="quiz-container">
+        <h1>General Knowledge Quiz</h1>
+        <form id="quiz-form">
+            <div class="question">
+                <p>1. What is the capital of France?</p>
+                <input type="radio" name="q1" value="a" id="q1a"><label for="q1a"> Berlin</label><br>
+                <input type="radio" name="q1" value="b" id="q1b"><label for="q1b"> Madrid</label><br>
+                <input type="radio" name="q1" value="c" id="q1c"><label for="q1c"> Paris</label><br>
+                <input type="radio" name="q1" value="d" id="q1d"><label for="q1d"> Rome</label><br>
+            </div>
+            <!-- Repeat for other questions -->
+            <div class="question">
+                <p>2. Which planet is known as the Red Planet?</p>
+                <input type="radio" name="q2" value="a" id="q2a"><label for="q2a"> Earth</label><br>
+                <input type="radio" name="q2" value="b" id="q2b"><label for="q2b"> Mars</label><br>
+                <input type="radio" name="q2" value="c" id="q2c"><label for="q2c"> Jupiter</label><br>
+                <input type="radio" name="q2" value="d" id="q2d"><label for="q2d"> Saturn</label><br>
+            </div>
+
+            <!-- Continue adding questions here -->
+        <div class="question">
+            <p>3. Who wrote 'To Kill a Mockingbird'?</p>
+             <input type="radio" name="q3" value="a" id="q3a"><label for="q3a"> Harper Lee</label><br>
+             <input type="radio" name="q3" value="b" id="q3b"><label for="q3b"> J.K. Rowling</label><br>
+             <input type="radio" name="q3" value="c" id="q3c"><label for="q3c"> Ernest Hemingway</label><br>
+             <input type="radio" name="q3" value="d" id="q3d"><label for="q3d"> Mark Twain</label><br>
+        </div>
+<div class="question">
+    <p>4. What is the largest ocean on Earth?</p>
+    <input type="radio" name="q4" value="a" id="q4a"><label for="q4a"> Atlantic Ocean</label><br>
+    <input type="radio" name="q4" value="b" id="q4b"><label for="q4b"> Indian Ocean</label><br>
+    <input type="radio" name="q4" value="c" id="q4c"><label for="q4c"> Arctic Ocean</label><br>
+    <input type="radio" name="q4" value="d" id="q4d"><label for="q4d"> Pacific Ocean</label><br>
+</div>
+<div class="question">
+    <p>5. What is the smallest country in the world?</p>
+    <input type="radio" name="q5" value="a" id="q5a"><label for="q5a"> Monaco</label><br>
+    <input type="radio" name="q5" value="b" id="q5b"><label for="q5b"> Vatican City</label><br>
+    <input type="radio" name="q5" value="c" id="q5c"><label for="q5c"> San Marino</label><br>
+    <input type="radio" name="q5" value="d" id="q5d"><label for="q5d"> Liechtenstein</label><br>
+</div>
+<div class="question">
+    <p>6. What is the chemical symbol for gold?</p>
+    <input type="radio" name="q6" value="a" id="q6a"><label for="q6a"> Au</label><br>
+    <input type="radio" name="q6" value="b" id="q6b"><label for="q6b"> Ag</label><br>
+    <input type="radio" name="q6" value="c" id="q6c"><label for="q6c"> Hg</label><br>
+    <input type="radio" name="q6" value="d" id="q6d"><label for="q6d"> Fe</label><br>
+</div>
+<div class="question">
+    <p>7. Who painted the Mona Lisa?</p>
+    <input type="radio" name="q7" value="a" id="q7a"><label for="q7a"> Vincent van Gogh</label><br>
+    <input type="radio" name="q7" value="b" id="q7b"><label for="q7b"> Pablo Picasso</label><br>
+    <input type="radio" name="q7" value="c" id="q7c"><label for="q7c"> Leonardo da Vinci</label><br>
+    <input type="radio" name="q7" value="d" id="q7d"><label for="q7d"> Claude Monet</label><br>
+</div>
+<div class="question">
+    <p>8. What is the main ingredient in guacamole?</p>
+    <input type="radio" name="q8" value="a" id="q8a"><label for="q8a"> Tomatoes</label><br>
+    <input type="radio" name="q8" value="b" id="q8b"><label for="q8b"> Onions</label><br>
+    <input type="radio" name="q8" value="c" id="q8c"><label for="q8c"> Avocados</label><br>
+    <input type="radio" name="q8" value="d" id="q8d"><label for="q8d"> Peppers</label><br>
+</div>
+<div class="question">
+    <p>9. What is the longest river in the world?</p>
+    <input type="radio" name="q9" value="a" id="q9a"><label for="q9a"> Nile</label><br>
+    <input type="radio" name="q9" value="b" id="q9b"><label for="q9b"> Amazon</label><br>
+    <input type="radio" name="q9" value="c" id="q9c"><label for="q9c"> Yangtze</label><br>
+    <input type="radio" name="q9" value="d" id="q9d"><label for="q9d"> Mississippi</label><br>
+</div>
+<div class="question">
+    <p>10. Who discovered penicillin?</p>
+    <input type="radio" name="q10" value="a" id="q10a"><label for="q10a"> Louis Pasteur</label><br>
+    <input type="radio" name="q10" value="b" id="q10b"><label for="q10b"> Marie Curie</label><br>
+    <input type="radio" name="q10" value="c" id="q10c"><label for="q10c"> Alexander Fleming</label><br>
+    <input type="radio" name="q10" value="d" id="q10d"><label for="q10d"> Gregor Mendel</label><br>
+</div>
+
+            <!-- Add more questions up to 10 here -->
+            <button type="button" onclick="submitQuiz()">Submit Quiz</button>
+        </form>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/General Knowlege Quiz/manifest.json b/General Knowlege Quiz/manifest.json
@@ -0,0 +1,16 @@
+{
+    "manifest_version": 3,
+    "name": "General Knowledge Quiz",
+    "version": "1.0",
+    "description": "A simple general knowledge quiz extension",
+    "action": {
+        "default_popup": "index.html",
+        "default_icon": "icon.png"
+    },
+    "icons": {
+        "16": "icon.png",
+        "48": "icon.png",
+        "128": "icon.png"
+    },
+    "permissions": []
+}
diff --git a/General Knowlege Quiz/script.js b/General Knowlege Quiz/script.js
@@ -0,0 +1,29 @@
+function submitQuiz() {
+    const correctAnswers = {
+        q1: "c",
+        q2: "b",
+        q3: "a",
+        q4: "d",
+        q5: "b",
+        q6: "a",
+        q7: "c",
+        q8: "c",
+        q9: "b",
+        q10: "c",
+    };
+
+    const form = document.getElementById('quiz-form');
+    let score = 0;
+    const totalQuestions = Object.keys(correctAnswers).length;
+
+    for (let i = 1; i <= totalQuestions; i++) {
+        const question = `q${i}`;
+        const selectedAnswer = form.elements[question].value;
+        if (selectedAnswer === correctAnswers[question]) {
+            score++;
+        }
+    }
+
+    const resultDiv = document.getElementById('result');
+    resultDiv.innerHTML = `You scored ${score} out of ${totalQuestions}.`;
+}
diff --git a/General Knowlege Quiz/style.css b/General Knowlege Quiz/style.css
@@ -0,0 +1,80 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.quiz-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 600px;
+    height: 80vh;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 24px;
+}
+
+.question {
+    margin-bottom: 20px;
+}
+
+.question p {
+    margin: 0 0 10px;
+    font-size: 18px;
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: #f9f9f9;
+    transition: background-color 0.3s;
+}
+
+label:hover {
+    background-color: #f1f1f1;
+}
+
+input[type="radio"] {
+    margin-right: 10px;
+}
+
+button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    margin-top: 20px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 20px;
+    text-align: center;
+}