-
Notifications
You must be signed in to change notification settings - Fork 2
/
Q_card.html
133 lines (122 loc) · 7.89 KB
/
Q_card.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Quiz</title>
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<header>
<h1>News Quiz</h1>
</header>
<main>
<section id="quiz-container">
<h2>Quiz Time!</h2>
<!-- Question 1 -->
<div class="question-card">
<p class="question-text">1. Who won the 2024 FIFA World Cup?</p>
<ul class="options-list">
<li><input type="radio" id="q1-option1" name="answer1"><label for="q1-option1">Brazil</label></li>
<li><input type="radio" id="q1-option2" name="answer1"><label for="q1-option2">Germany</label></li>
<li><input type="radio" id="q1-option3" name="answer1"><label for="q1-option3">Argentina</label></li>
<li><input type="radio" id="q1-option4" name="answer1"><label for="q1-option4">France</label></li>
</ul>
</div>
<!-- Question 2 -->
<div class="question-card">
<p class="question-text">2. What is the latest tech company to launch AI-powered glasses?</p>
<ul class="options-list">
<li><input type="radio" id="q2-option1" name="answer2"><label for="q2-option1">Apple</label></li>
<li><input type="radio" id="q2-option2" name="answer2"><label for="q2-option2">Meta</label></li>
<li><input type="radio" id="q2-option3" name="answer2"><label for="q2-option3">Google</label></li>
<li><input type="radio" id="q2-option4" name="answer2"><label for="q2-option4">Microsoft</label></li>
</ul>
</div>
<!-- Question 3 -->
<div class="question-card">
<p class="question-text">3. Which country recently declared a state of emergency due to wildfires?</p>
<ul class="options-list">
<li><input type="radio" id="q3-option1" name="answer3"><label for="q3-option1">Canada</label></li>
<li><input type="radio" id="q3-option2" name="answer3"><label for="q3-option2">Australia</label></li>
<li><input type="radio" id="q3-option3" name="answer3"><label for="q3-option3">Greece</label></li>
<li><input type="radio" id="q3-option4" name="answer3"><label for="q3-option4">Brazil</label></li>
</ul>
</div>
<!-- Question 4 -->
<div class="question-card">
<p class="question-text">4. What was the theme of the 2024 World Economic Forum?</p>
<ul class="options-list">
<li><input type="radio" id="q4-option1" name="answer4"><label for="q4-option1">Climate Action</label></li>
<li><input type="radio" id="q4-option2" name="answer4"><label for="q4-option2">Global Health</label></li>
<li><input type="radio" id="q4-option3" name="answer4"><label for="q4-option3">Tech for Good</label></li>
<li><input type="radio" id="q4-option4" name="answer4"><label for="q4-option4">Future of Work</label></li>
</ul>
</div>
<!-- Question 5 -->
<div class="question-card">
<p class="question-text">5. Which country recently launched a mission to explore the far side of the moon?</p>
<ul class="options-list">
<li><input type="radio" id="q5-option1" name="answer5"><label for="q5-option1">USA</label></li>
<li><input type="radio" id="q5-option2" name="answer5"><label for="q5-option2">China</label></li>
<li><input type="radio" id="q5-option3" name="answer5"><label for="q5-option3">India</label></li>
<li><input type="radio" id="q5-option4" name="answer5"><label for="q5-option4">Russia</label></li>
</ul>
</div>
<!-- Question 6 -->
<div class="question-card">
<p class="question-text">6. Which streaming platform recently released a documentary about climate change?</p>
<ul class="options-list">
<li><input type="radio" id="q6-option1" name="answer6"><label for="q6-option1">Netflix</label></li>
<li><input type="radio" id="q6-option2" name="answer6"><label for="q6-option2">Amazon Prime</label></li>
<li><input type="radio" id="q6-option3" name="answer6"><label for="q6-option3">Disney+</label></li>
<li><input type="radio" id="q6-option4" name="answer6"><label for="q6-option4">Hulu</label></li>
</ul>
</div>
<!-- Question 7 -->
<div class="question-card">
<p class="question-text">7. Which city recently hosted the 2024 Summer Olympics?</p>
<ul class="options-list">
<li><input type="radio" id="q7-option1" name="answer7"><label for="q7-option1">Los Angeles</label></li>
<li><input type="radio" id="q7-option2" name="answer7"><label for="q7-option2">Paris</label></li>
<li><input type="radio" id="q7-option3" name="answer7"><label for="q7-option3">Tokyo</label></li>
<li><input type="radio" id="q7-option4" name="answer7"><label for="q7-option4">Rome</label></li>
</ul>
</div>
<!-- Question 8 -->
<div class="question-card">
<p class="question-text">8. What was the top-grossing movie of 2024?</p>
<ul class="options-list">
<li><input type="radio" id="q8-option1" name="answer8"><label for="q8-option1">Avatar 3</label></li>
<li><input type="radio" id="q8-option2" name="answer8"><label for="q8-option2">The Marvels</label></li>
<li><input type="radio" id="q8-option3" name="answer8"><label for="q8-option3">Mission Impossible 8</label></li>
<li><input type="radio" id="q8-option4" name="answer8"><label for="q8-option4">John Wick 5</label></li>
</ul>
</div>
<!-- Question 9 -->
<div class="question-card">
<p class="question-text">9. Which country recently announced plans to ban petrol and diesel cars by 2030?</p>
<ul class="options-list">
<li><input type="radio" id="q9-option1" name="answer9"><label for="q9-option1">Norway</label></li>
<li><input type="radio" id="q9-option2" name="answer9"><label for="q9-option2">Germany</label></li>
<li><input type="radio" id="q9-option3" name="answer9"><label for="q9-option3">UK</label></li>
<li><input type="radio" id="q9-option4" name="answer9"><label for="q9-option4">Netherlands</label></li>
</ul>
</div>
<!-- Question 10 -->
<div class="question-card">
<p class="question-text">10. What is the latest scientific breakthrough in 2024?</p>
<ul class="options-list">
<li><input type="radio" id="q10-option1" name="answer10"><label for="q10-option1">Cure for Alzheimer's</label></li>
<li><input type="radio" id="q10-option2" name="answer10"><label for="q10-option2">Artificial Heart</label></li>
<li><input type="radio" id="q10-option3" name="answer10"><label for="q10-option3">Quantum Computing</label></li>
<li><input type="radio" id="q10-option4" name="answer10"><label for="q10-option4">Fusion Energy</label></li>
</ul>
</div>
<button id="submit-btn">Submit</button>
<div id="result-text"></div>
</section>
</main>
<script src="script1.js"></script>
</body>
</html>