devfestquiz/index.html at main · setif-developers-group/devfestquiz · GitHub

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>quiz 2</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet" />

    <style>
        body {
            margin: 0;
            height: 100vh;
            background: linear-gradient(135deg, #ffffff 40%, #00aa55 100%);
            color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: "Orbitron", sans-serif;
            text-align: center;
        }

        h1 {
            font-size: 3rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
        }

        #opts button {
            display: block;
            margin: 10px auto;
            padding: 12px 25px;
            border: 2px solid rgba(0, 255, 0, 0.6);
            border-radius: 10px;
            background: #fff;
            color: #000;
            font-size: 1.1rem;
            cursor: pointer;
            transition: 0.3s ease;
            box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
            display: block;
            width: 100%;
            margin: 8px 0;
            padding: 10px;
            border-radius: 6px;
            border: 0;
            cursor: pointer;
        }

        #opts button:hover {
            background: #00ff55;
            color: #000;
            box-shadow: 0 0 12px rgba(0, 255, 0, 0.8);
        }

        #opts button.correct {
            border-color: #00ff55;
            background: #00ff55;
            color: #000;
            box-shadow: 0 0 10px #00ff55;
        }

        #opts button.wrong {
            border-color: red;
            background: #ff4d4d;
            color: #fff;
            box-shadow: 0 0 10px red;
        }

        #nextbtn,
        #playAgain {
            margin-top: 20px;
            padding: 12px 25px;
            border: none;
            border-radius: 10px;
            background: #00ff55;
            color: black;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s ease;
        }

        #nextbtn:hover,
        #playAgain:hover {
            background: #008833;
            color: #fff;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="quiz-cont">
        <img src="logo.png" alt="missing" height="140px" width="140px" />
        <h1>SDG Quiz</h1>
        <div class="quiz" id="quiz">
            <p id="qst"></p>
            <div id="opts"></div>
            <button id="nextbtn">Next</button>
        </div>
        <div id="result" class="hidden"></div>
    </div>

    <script>
        // Questions
        const quiz = [

             {
        question: "What is the main purpose of DevFest events organized by Google Developer Groups?",
        options: [
            "To showcase university research projects",
            "To connect developers and share the latest in Google technologies",
            "To promote non-technical community volunteering"
        ],
        answer: "To connect developers and share the latest in Google technologies"
    },
    {
        question: "Which of the following technologies is most commonly discussed at DevFest?",
        options: [
            "Google Cloud and AI tools",
            "Adobe Photoshop",
            "Microsoft Office Suite"
        ],
        answer: "Google Cloud and AI tools"
    },
    {
        question: "DevFest events are usually organized by:",
        options: [
            "Google Developer Groups (GDGs)",
            "University student clubs only",
            "Professional marketing agencies"
        ],
        answer: "Google Developer Groups (GDGs)"
    },
    {
        question: "What is a typical format of DevFest sessions?",
        options: [
            "Hands-on workshops, tech talks, and networking",
            "Sports competitions and gaming tournaments",
            "Only online lectures with no Q&A"
        ],
        answer: "Hands-on workshops, tech talks, and networking"
    },
    {
        question: "During a DevFest, talks about AI often focus on:",
        options: [
            "Machine learning, prompt engineering, and responsible AI",
            "Basic computer literacy for beginners",
            "AI used only for video games"
        ],
        answer: "Machine learning, prompt engineering, and responsible AI"
    },
    {
        question: "What does GDG stand for in the context of DevFest?",
        options: [
            "Global Development Guild",
            "Google Developer Group",
            "General Data Grid"
        ],
        answer: "Google Developer Group"
    },
    {
        question: "How is DevFest different from a typical tech conference?",
        options: [
            "It’s community-driven and organized locally by volunteers",
            "It’s hosted only by Google headquarters",
            "It’s invitation-only for certified developers"
        ],
        answer: "It’s community-driven and organized locally by volunteers"
    },
    {
        question: "Which topic would most likely appear in a DevFest workshop?",
        options: [
            "Building Android apps with Kotlin",
            "Learning watercolor painting",
            "Designing furniture with AutoCAD"
        ],
        answer: "Building Android apps with Kotlin"
    },
    {
        question: "Why is networking important at DevFest?",
        options: [
            "To build local tech communities and exchange ideas",
            "To find investors for personal startups only",
            "Because prizes are given to the biggest groups"
        ],
        answer: "To build local tech communities and exchange ideas"
    },
    {
        question: "What is the global impact of DevFest events?",
        options: [
            "They connect thousands of developers worldwide to learn, build, and share knowledge",
            "They are limited to one country per year",
            "They focus only on marketing Google products"
        ],
        answer: "They connect thousands of developers worldwide to learn, build, and share knowledge"
    }
];

        // State
        let current = 0;
        let score = 0;
        let answered = false;

        // Elements
        const qst = document.getElementById("qst");
        const opts = document.getElementById("opts");
        const nextbtn = document.getElementById("nextbtn");
        const quizEl = document.getElementById("quiz");
        const result = document.getElementById("result");

        function loadQuestion() {
            answered = false;
            nextbtn.style.display = "none";
            opts.innerHTML = "";

            const q = quiz[current];
            qst.textContent = q.question;

            q.options.forEach((opt) => {
                const btn = document.createElement("button");
                btn.type = "button";
                btn.textContent = opt;

                btn.addEventListener("click", () => {
                    if (answered) return;
                    answered = true;

                    // mark correct/wrong
                    if (opt === q.answer) {
                        score++;
                        btn.classList.add("correct");
                    } else {
                        btn.classList.add("wrong");
                        // highlight the correct one
                        Array.from(opts.children).forEach((b) => {
                            if (b.textContent === q.answer) {
                                b.classList.add("correct");
                            }
                        });
                    }

                    Array.from(opts.children).forEach((b) => (b.disabled = true));
                    nextbtn.style.display = "inline-block";
                });

                opts.appendChild(btn);
            });
        }

        // Next question handler
        nextbtn.addEventListener("click", () => {
            current++;
            if (current < quiz.length) {
                loadQuestion();
            } else {
                endQuiz();
            }
        });

        // End the quiz and save best score
        function endQuiz() {
            quizEl.classList.add("hidden");

            const stored = parseInt(localStorage.getItem("bestScore") || "0", 10);
            const bestScore = Math.max(score, isNaN(stored) ? 0 : stored);
            localStorage.setItem("bestScore", String(bestScore));

            result.classList.remove("hidden");
            result.innerHTML =
                "<h2>Your Score: " +
                score +
                "/" +
                quiz.length +
                "</h2>" +
                "<h3>Best Score: 👑 " +
                bestScore +
                "/" +
                quiz.length +
                "</h3>" +
                '<button id="playAgain">Play Again</button>';

            document
                .getElementById("playAgain")
                .addEventListener("click", restartQuiz);
        }

        function restartQuiz() {
            score = 0;
            current = 0;
            result.classList.add("hidden");
            quizEl.classList.remove("hidden");
            loadQuestion();
        }

        // Init
        loadQuestion();
        nextbtn.style.display = "none";
    </script>
</body>


</html>