Skip to content

Commit 2bc5331

Browse files
Sulagna-Dutta-RoySulagna-Dutta-Roy
authored
Merge pull request #2318 from aditya-bhaumik/gk
added general knowlege quiz extension
2 parents d6c8507 + 932ed58 commit 2bc5331

File tree

6 files changed

+272
-0
lines changed

6 files changed

+272
-0
lines changed

‎General Knowlege Quiz/README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# **General Knowledge Quiz**
2+
3+
<br>
4+
5+
## **Description 📃**
6+
The General Knowledge Quiz is an engaging and educational Chrome extension designed to test and improve your general knowledge across various topics.
7+
8+
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.
9+
10+
<br>
11+
12+
## **Functionalities 🎮**
13+
- **Answering the questions**: The player can interact with the quiz by selecting an answer for each question.
14+
- **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.
15+
- **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.
16+
- **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.
17+
18+
<br>
19+
20+
## **How to play? 🕹️**
21+
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.
22+
23+
- Read each question carefully.
24+
- Select the answer you believe is correct by clicking on the corresponding option.
25+
- Once all questions are answered, click the "Submit" button to see your score.
26+
- If you want to try again, you can restart the quiz and attempt to improve your score.
27+
28+
<br>
29+
30+
## **Screenshots 📸**
31+
![image](https://github.com/aditya-bhaumik/GGExtensions/assets/92214013/96bc4ba4-ebd9-4513-9f9b-06e8af33578e)
32+
33+
<br>
34+
35+
## **Installation 📥**
36+
1. Download the extension files and save them to a folder on your computer.
37+
2. Open Google Chrome and navigate to `chrome://extensions/`.
38+
3. Enable "Developer mode" by toggling the switch in the top right corner.
39+
4. Click "Load unpacked" and select the folder where you saved the extension files.
40+
5. The General Knowledge Quiz extension should now appear in your list of extensions and be ready to use.
41+
42+
<br>
43+
44+
## **Usage Instructions 📘**
45+
1. Click on the General Knowledge Quiz extension icon in your Chrome toolbar.
46+
2. The quiz popup will appear with the questions and answer options.
47+
3. Answer all the questions and click the "Submit" button.
48+
4. Your score will be displayed, showing how many questions you answered correctly.
49+
5. To restart the quiz, click the "Restart" button.
50+
51+
52+
53+

‎General Knowlege Quiz/icon.png

563 KB
Loading

‎General Knowlege Quiz/index.html

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>General Knowledge Quiz</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="quiz-container">
11+
<h1>General Knowledge Quiz</h1>
12+
<form id="quiz-form">
13+
<div class="question">
14+
<p>1. What is the capital of France?</p>
15+
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a"> Berlin</label><br>
16+
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b"> Madrid</label><br>
17+
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c"> Paris</label><br>
18+
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d"> Rome</label><br>
19+
</div>
20+
<!-- Repeat for other questions -->
21+
<div class="question">
22+
<p>2. Which planet is known as the Red Planet?</p>
23+
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a"> Earth</label><br>
24+
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b"> Mars</label><br>
25+
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c"> Jupiter</label><br>
26+
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d"> Saturn</label><br>
27+
</div>
28+
29+
<!-- Continue adding questions here -->
30+
<div class="question">
31+
<p>3. Who wrote 'To Kill a Mockingbird'?</p>
32+
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a"> Harper Lee</label><br>
33+
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b"> J.K. Rowling</label><br>
34+
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c"> Ernest Hemingway</label><br>
35+
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d"> Mark Twain</label><br>
36+
</div>
37+
<div class="question">
38+
<p>4. What is the largest ocean on Earth?</p>
39+
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a"> Atlantic Ocean</label><br>
40+
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b"> Indian Ocean</label><br>
41+
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c"> Arctic Ocean</label><br>
42+
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d"> Pacific Ocean</label><br>
43+
</div>
44+
<div class="question">
45+
<p>5. What is the smallest country in the world?</p>
46+
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a"> Monaco</label><br>
47+
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b"> Vatican City</label><br>
48+
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c"> San Marino</label><br>
49+
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d"> Liechtenstein</label><br>
50+
</div>
51+
<div class="question">
52+
<p>6. What is the chemical symbol for gold?</p>
53+
<input type="radio" name="q6" value="a" id="q6a"><label for="q6a"> Au</label><br>
54+
<input type="radio" name="q6" value="b" id="q6b"><label for="q6b"> Ag</label><br>
55+
<input type="radio" name="q6" value="c" id="q6c"><label for="q6c"> Hg</label><br>
56+
<input type="radio" name="q6" value="d" id="q6d"><label for="q6d"> Fe</label><br>
57+
</div>
58+
<div class="question">
59+
<p>7. Who painted the Mona Lisa?</p>
60+
<input type="radio" name="q7" value="a" id="q7a"><label for="q7a"> Vincent van Gogh</label><br>
61+
<input type="radio" name="q7" value="b" id="q7b"><label for="q7b"> Pablo Picasso</label><br>
62+
<input type="radio" name="q7" value="c" id="q7c"><label for="q7c"> Leonardo da Vinci</label><br>
63+
<input type="radio" name="q7" value="d" id="q7d"><label for="q7d"> Claude Monet</label><br>
64+
</div>
65+
<div class="question">
66+
<p>8. What is the main ingredient in guacamole?</p>
67+
<input type="radio" name="q8" value="a" id="q8a"><label for="q8a"> Tomatoes</label><br>
68+
<input type="radio" name="q8" value="b" id="q8b"><label for="q8b"> Onions</label><br>
69+
<input type="radio" name="q8" value="c" id="q8c"><label for="q8c"> Avocados</label><br>
70+
<input type="radio" name="q8" value="d" id="q8d"><label for="q8d"> Peppers</label><br>
71+
</div>
72+
<div class="question">
73+
<p>9. What is the longest river in the world?</p>
74+
<input type="radio" name="q9" value="a" id="q9a"><label for="q9a"> Nile</label><br>
75+
<input type="radio" name="q9" value="b" id="q9b"><label for="q9b"> Amazon</label><br>
76+
<input type="radio" name="q9" value="c" id="q9c"><label for="q9c"> Yangtze</label><br>
77+
<input type="radio" name="q9" value="d" id="q9d"><label for="q9d"> Mississippi</label><br>
78+
</div>
79+
<div class="question">
80+
<p>10. Who discovered penicillin?</p>
81+
<input type="radio" name="q10" value="a" id="q10a"><label for="q10a"> Louis Pasteur</label><br>
82+
<input type="radio" name="q10" value="b" id="q10b"><label for="q10b"> Marie Curie</label><br>
83+
<input type="radio" name="q10" value="c" id="q10c"><label for="q10c"> Alexander Fleming</label><br>
84+
<input type="radio" name="q10" value="d" id="q10d"><label for="q10d"> Gregor Mendel</label><br>
85+
</div>
86+
87+
<!-- Add more questions up to 10 here -->
88+
<button type="button" onclick="submitQuiz()">Submit Quiz</button>
89+
</form>
90+
<div id="result"></div>
91+
</div>
92+
<script src="script.js"></script>
93+
</body>
94+
</html>

‎General Knowlege Quiz/manifest.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "General Knowledge Quiz",
4+
"version": "1.0",
5+
"description": "A simple general knowledge quiz extension",
6+
"action": {
7+
"default_popup": "index.html",
8+
"default_icon": "icon.png"
9+
},
10+
"icons": {
11+
"16": "icon.png",
12+
"48": "icon.png",
13+
"128": "icon.png"
14+
},
15+
"permissions": []
16+
}

‎General Knowlege Quiz/script.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
function submitQuiz() {
2+
const correctAnswers = {
3+
q1: "c",
4+
q2: "b",
5+
q3: "a",
6+
q4: "d",
7+
q5: "b",
8+
q6: "a",
9+
q7: "c",
10+
q8: "c",
11+
q9: "b",
12+
q10: "c",
13+
};
14+
15+
const form = document.getElementById('quiz-form');
16+
let score = 0;
17+
const totalQuestions = Object.keys(correctAnswers).length;
18+
19+
for (let i = 1; i <= totalQuestions; i++) {
20+
const question = `q${i}`;
21+
const selectedAnswer = form.elements[question].value;
22+
if (selectedAnswer === correctAnswers[question]) {
23+
score++;
24+
}
25+
}
26+
27+
const resultDiv = document.getElementById('result');
28+
resultDiv.innerHTML = `You scored ${score} out of ${totalQuestions}.`;
29+
}

‎General Knowlege Quiz/style.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f5f5f5;
4+
color: #333;
5+
margin: 0;
6+
padding: 0;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
}
12+
13+
.quiz-container {
14+
background-color: #fff;
15+
padding: 20px;
16+
border-radius: 8px;
17+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
18+
width: 100%;
19+
max-width: 600px;
20+
height: 80vh;
21+
overflow-y: auto;
22+
box-sizing: border-box;
23+
}
24+
25+
h1 {
26+
text-align: center;
27+
margin-bottom: 20px;
28+
font-size: 24px;
29+
}
30+
31+
.question {
32+
margin-bottom: 20px;
33+
}
34+
35+
.question p {
36+
margin: 0 0 10px;
37+
font-size: 18px;
38+
}
39+
40+
label {
41+
display: block;
42+
margin-bottom: 10px;
43+
padding: 10px;
44+
border: 1px solid #ddd;
45+
border-radius: 4px;
46+
cursor: pointer;
47+
background-color: #f9f9f9;
48+
transition: background-color 0.3s;
49+
}
50+
51+
label:hover {
52+
background-color: #f1f1f1;
53+
}
54+
55+
input[type="radio"] {
56+
margin-right: 10px;
57+
}
58+
59+
button {
60+
display: block;
61+
width: 100%;
62+
padding: 10px;
63+
background-color: #007bff;
64+
color: white;
65+
border: none;
66+
border-radius: 5px;
67+
cursor: pointer;
68+
font-size: 16px;
69+
margin-top: 20px;
70+
}
71+
72+
button:hover {
73+
background-color: #0056b3;
74+
}
75+
76+
#result {
77+
margin-top: 20px;
78+
font-size: 20px;
79+
text-align: center;
80+
}

0 commit comments

Comments
 (0)