Skip to content

Commit

Permalink
Merge pull request #2365 from vivekvardhan2810/chemistry
Browse files Browse the repository at this point in the history 
Chemistry Quiz Extension
  • Loading branch information
@Sulagna-Dutta-Roy
Sulagna-Dutta-Roy authored Jul 13, 2024
2 parents 78a7887 + 4869c59 commit ed6cb51
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 0 deletions.
Binary file added Chemistry Quiz/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 90 additions & 0 deletions Chemistry Quiz/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cricket Quiz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container">
<h1>Cricket Quiz</h1>
<form id="quiz-form">
<div class="question">
<p>1. What is the chemical symbol for Gold?</p>
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Au</label><br>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Ag</label><br>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Fe</label><br>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Pb</label><br>
</div>
<div class="question">
<p>2. What is the atomic number of Carbon?</p>
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">6</label><br>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">12</label><br>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">8</label><br>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">14</label><br>
</div>
<div class="question">
<p>3. Which gas is most abundant in the Earth's atmosphere?</p>
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Oxygen</label><br>
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">Carbon Dioxide</label><br>
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">Nitrogen</label><br>
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">Hydrogen</label><br>
</div>
<div class="question">
<p>4. What is the pH of pure water?</p>
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">5</label><br>
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">7</label><br>
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">9</label><br>
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">11</label><br>
</div>
<div class="question">
<p>5. Who is known as the father of modern chemistry?</p>
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a">Dmitri Mendeleev</label><br>
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b">Robert Boyle</label><br>
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c">Antoine Lavoisier</label><br>
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d">John Dalton</label><br>
</div>
<div class="question">
<p>6. What is the most electronegative element?</p>
<input type="radio" name="q6" value="a" id="q6a"><label for="q6a">Oxygen</label><br>
<input type="radio" name="q6" value="b" id="q6b"><label for="q6b">Fluorine</label><br>
<input type="radio" name="q6" value="c" id="q6c"><label for="q6c">Chlorine</label><br>
<input type="radio" name="q6" value="d" id="q6d"><label for="q6d">Nitrogen</label><br>
</div>
<div class="question">
<p>7. Which element has the highest melting point?</p>
<input type="radio" name="q7" value="a" id="q7a"><label for="q7a">Iron</label><br>
<input type="radio" name="q7" value="b" id="q7b"><label for="q7b">Tungsten</label><br>
<input type="radio" name="q7" value="c" id="q7c"><label for="q7c">Gold</label><br>
<input type="radio" name="q7" value="d" id="q7d"><label for="q7d">Silver</label><br>
</div>
<div class="question">
<p>8. What is the formula for ammonium sulfate?</p>
<input type="radio" name="q8" value="a" id="q8a"><label for="q8a">(NH<sub>4</sub>)<sub>2</sub>SO<sub>4</sub></label><br>
<input type="radio" name="q8" value="b" id="q8b"><label for="q8b">NH<sub>4</sub>SO<sub>4</sub></label><br>
<input type="radio" name="q8" value="c" id="q8c"><label for="q8c">NH<sub>4</sub>(SO<sub>4</sub>)<sub>2</sub></label><br>
<input type="radio" name="q8" value="d" id="q8d"><label for="q8d">NH<sub>3</sub>SO<sub>4</sub></label><br>
</div>
<div class="question">
<p>9. Which of the following is an alkali metal?</p>
<input type="radio" name="q9" value="a" id="q9a"><label for="q9a">Calcium</label><br>
<input type="radio" name="q9" value="b" id="q9b"><label for="q9b">Magnesium</label><br>
<input type="radio" name="q9" value="c" id="q9c"><label for="q9c">Sodium</label><br>
<input type="radio" name="q9" value="d" id="q9d"><label for="q9d">Aluminum</label><br>
</div>
<div class="question">
<p>10. What is the main gas found in the air we breathe?</p>
<input type="radio" name="q10" value="a" id="q10a"><label for="q10a">Oxygen</label><br>
<input type="radio" name="q10" value="b" id="q10b"><label for="q10b">Carbon Dioxide</label><br>
<input type="radio" name="q10" value="c" id="q10c"><label for="q10c">Nitrogen</label><br>
<input type="radio" name="q10" value="d" id="q10d"><label for="q10d">Argon</label><br>
</div>

<button type="button" onclick="submitQuiz()">Submit</button>
<div id="result"></div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
16 changes: 16 additions & 0 deletions Chemistry Quiz/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"manifest_version": 3,
"name": "Chemistry Quiz",
"version": "1.0",
"description": "A simple Chemistry quiz extension",
"action": {
"default_popup": "index.html",
"default_icon": "icon.png"
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"permissions": []
}
21 changes: 21 additions & 0 deletions Chemistry Quiz/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// Function to handle quiz submission and scoring
function submitQuiz() {
const quizForm = document.getElementById('quiz-form'); // Get the quiz form element
const resultDiv = document.getElementById('result'); // Get the result display element
const correctAnswers = ['c', 'b', 'a', 'd', 'c', 'b', 'a', 'd', 'a', 'd']; // Array of correct answers
let score = 0; // Initialize score

// Loop through each question
for (let i = 0; i < correctAnswers.length; i++) {
const question = `q${i + 1}`; // Construct the name of each question input
const selectedAnswer = quizForm[question].value; // Get the selected answer

// Check if the selected answer matches the correct answer
if (selectedAnswer === correctAnswers[i]) {
score++; // Increment score if answer is correct
}
}

// Display the final score
resultDiv.textContent = `You scored ${score} out of ${correctAnswers.length}!`;
}
81 changes: 81 additions & 0 deletions Chemistry Quiz/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/* Global styles */
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;
}

0 comments on commit ed6cb51

Please sign in to comment.