Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Chemistry Quiz Extension #2365

Merged
merged 1 commit into from
Jul 13, 2024
Merged

Chemistry Quiz Extension #2365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Chemistry Quiz/icon.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}
Loading