<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grammar Quiz (Simple Tenses & Modals)</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
.question {
background: white;
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
background: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background: #45a049;
}
#result {
font-weight: bold;
margin-top: 20px;
padding: 10px;
background: #e9e9e9;
border-radius: 5px;
display: none;
}
</style>
</head>
<body>
<h1>Grammar Quiz (Simple Tenses & Modals)</h1>
<div id="quiz">
<div class="question">
<p>1. She ____ to school every day.</p>
<label><input type="radio" name="q1" value="a"> a) go</label><br>
<label><input type="radio" name="q1" value="b"> b) goes</label><br>
<label><input type="radio" name="q1" value="c"> c) went</label>
</div>
<div class="question">
<p>2. They ____ football yesterday.</p>
<label><input type="radio" name="q2" value="a"> a) play</label><br>
<label><input type="radio" name="q2" value="b"> b) plays</label><br>
<label><input type="radio" name="q2" value="c"> c) played</label>
</div>
<div class="question">
<p>3. My brother ____ TV in the evening.</p>
<label><input type="radio" name="q3" value="a"> a) watches</label><br>
<label><input type="radio" name="q3" value="b"> b) watch</label><br>
<label><input type="radio" name="q3" value="c"> c) watched</label>
</div>
<div class="question">
<p>4. We ____ a great movie last night.</p>
<label><input type="radio" name="q4" value="a"> a) see</label><br>
<label><input type="radio" name="q4" value="b"> b) saw</label><br>
<label><input type="radio" name="q4" value="c"> c) seen</label>
</div>
<div class="question">
<p>5. The book ____ by J.K. Rowling.</p>
<label><input type="radio" name="q5" value="a"> a) wrote</label><br>
<label><input type="radio" name="q5" value="b"> b) was written</label><br>
<label><input type="radio" name="q5" value="c"> c) writes</label>
</div>
<div class="question">
<p>6. English ____ in many countries.</p>
<label><input type="radio" name="q6" value="a"> a) is spoken</label><br>
<label><input type="radio" name="q6" value="b"> b) speaks</label><br>
<label><input type="radio" name="q6" value="c"> c) spoke</label>
</div>
<div class="question">
<p>7. The cake ____ by my mom yesterday.</p>
<label><input type="radio" name="q7" value="a"> a) baked</label><br>
<label><input type="radio" name="q7" value="b"> b) was baked</label><br>
<label><input type="radio" name="q7" value="c"> c) is baked</label>
</div>
<div class="question">
<p>8. The letter ____ last week.</p>
<label><input type="radio" name="q8" value="a"> a) sent</label><br>
<label><input type="radio" name="q8" value="b"> b) was sent</label><br>
<label><input type="radio" name="q8" value="c"> c) sends</label>
</div>
<div class="question">
<p>9. ____ you help me with my homework?</p>
<label><input type="radio" name="q9" value="a"> a) Can</label><br>
<label><input type="radio" name="q9" value="b"> b) Will</label><br>
<label><input type="radio" name="q9" value="c"> c) Shall</label>
</div>
<div class="question">
<p>10. She ____ swim when she was five.</p>
<label><input type="radio" name="q10" value="a"> a) can</label><br>
<label><input type="radio" name="q10" value="b"> b) could</label><br>
<label><input type="radio" name="q10" value="c"> c) should</label>
</div>
<div class="question">
<p>11. We ____ visit the museum tomorrow.</p>
<label><input type="radio" name="q11" value="a"> a) shall</label><br>
<label><input type="radio" name="q11" value="b"> b) should</label><br>
<label><input type="radio" name="q11" value="c"> c) could</label>
</div>
<div class="question">
<p>12. You ____ eat more vegetables.</p>
<label><input type="radio" name="q12" value="a"> a) will</label><br>
<label><input type="radio" name="q12" value="b"> b) should</label><br>
<label><input type="radio" name="q12" value="c"> c) would</label>
</div>
<div class="question">
<p>13. I ____ call you later.</p>
<label><input type="radio" name="q13" value="a"> a) will</label><br>
<label><input type="radio" name="q13" value="b"> b) would</label><br>
<label><input type="radio" name="q13" value="c"> c) shall</label>
</div>
<div class="question">
<p>14. ____ you like some coffee?</p>
<label><input type="radio" name="q14" value="a"> a) Will</label><br>
<label><input type="radio" name="q14" value="b"> b) Would</label><br>
<label><input type="radio" name="q14" value="c"> c) Should</label>
</div>
<div class="question">
<p>15. They ____ arrive by 8 PM.</p>
<label><input type="radio" name="q15" value="a"> a) shall</label><br>
<label><input type="radio" name="q15" value="b"> b) should</label><br>
<label><input type="radio" name="q15" value="c"> c) could</label>
</div>
<div class="question">
<p>16. If it rains, we ____ cancel the picnic.</p>
<label><input type="radio" name="q16" value="a"> a) will</label><br>
<label><input type="radio" name="q16" value="b"> b) would</label><br>
<label><input type="radio" name="q16" value="c"> c) should</label>
</div>
<div class="question">
<p>17. The keys ____ on the table.</p>
<label><input type="radio" name="q17" value="a"> a) were left</label><br>
<label><input type="radio" name="q17" value="b"> b) left</label><br>
<label><input type="radio" name="q17" value="c"> c) leave</label>
</div>
<div class="question">
<p>18. ____ I open the window?</p>
<label><input type="radio" name="q18" value="a"> a) Shall</label><br>
<label><input type="radio" name="q18" value="b"> b) Should</label><br>
<label><input type="radio" name="q18" value="c"> c) Would</label>
</div>
<div class="question">
<p>19. He ____ his homework every day.</p>
<label><input type="radio" name="q19" value="a"> a) do</label><br>
<label><input type="radio" name="q19" value="b"> b) does</label><br>
<label><input type="radio" name="q19" value="c"> c) did</label>
</div>
<div class="question">
<p>20. The museum ____ at 9 AM.</p>
<label><input type="radio" name="q20" value="a"> a) opens</label><br>
<label><input type="radio" name="q20" value="b"> b) is opened</label><br>
<label><input type="radio" name="q20" value="c"> c) opened</label>
</div>
<button onclick="checkAnswers()">Submit Quiz</button>
</div>
<div id="result"></div>
<script>
function checkAnswers() {
const correctAnswers = {
q1: "b", q2: "c", q3: "a", q4: "b", q5: "b",
q6: "a", q7: "b", q8: "b", q9: "a", q10: "b",
q11: "a", q12: "b", q13: "a", q14: "b", q15: "b",
q16: "a", q17: "a", q18: "a", q19: "b", q20: "a"
};
let score = 0;
for (let i = 1; i <= 20; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (selected && selected.value === correctAnswers[`q${i}`]) {
score++;
}
}
const resultDiv = document.getElementById("result");
resultDiv.style.display = "block";
resultDiv.innerHTML = `Your score: ${score}/20 (${Math.round((score / 20) * 100)}%)`;
}
</script>
</body>
</html>