DataHandlingSession2_EndQuiz/index.html at main · prabeshl/DataHandlingSession2_EndQuiz · 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
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PrabeshQuiz</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #333;
            line-height: 1.5;
        }

        .quiz-container {
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 25px;
            max-width: 700px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .question {
            font-size: clamp(18px, 4vw, 22px);
            margin-bottom: 20px;
            font-weight: 600;
            color: #2c3e50;
            line-height: 1.4;
        }

        .options {
            list-style-type: none;
            padding: 0;
        }

        .options li {
            margin-bottom: 12px;
            padding: 12px;
            border-radius: 8px;
            transition: background-color 0.2s;
            border: 1px solid #e0e0e0;
        }

        .options li:hover {
            background-color: #f5f9ff;
        }

        .options label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: clamp(16px, 3.5vw, 18px);
        }

        .options input {
            margin-right: 12px;
            transform: scale(1.2);
            min-width: 18px;
        }

        .btn {
            display: inline-block;
            padding: 12px 25px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(to right, #2575fc, #6a11cb);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(106, 17, 203, 0.3);
            width: 100%;
            max-width: 200px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(106, 17, 203, 0.4);
        }

        .btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .score {
            font-size: clamp(20px, 5vw, 24px);
            margin: 20px 0;
            text-align: center;
            font-weight: 700;
            color: #2c3e50;
        }

        .feedback-container {
            margin-top: 25px;
            border-top: 2px solid #ecf0f1;
            padding-top: 20px;
        }

        .feedback-item {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 10px;
            background-color: #f8f9fa;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .feedback-question {
            font-weight: 600;
            margin-bottom: 12px;
            color: #2c3e50;
            font-size: clamp(16px, 3.5vw, 18px);
        }

        .feedback-answer {
            display: flex;
            flex-direction: column;
            margin: 8px 0;
            padding: 10px;
            border-radius: 5px;
            font-size: clamp(14px, 3vw, 16px);
        }

        .correct {
            background-color: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }

        .incorrect {
            background-color: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }

        .feedback-label {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .progress-bar {
            height: 8px;
            background-color: #ecf0f1;
            border-radius: 4px;
            margin: 20px 0;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: linear-gradient(to right, #2575fc, #6a11cb);
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .question-counter {
            text-align: right;
            color: #7f8c8d;
            margin-bottom: 10px;
            font-size: clamp(14px, 3vw, 16px);
        }

        .result-emoji {
            font-size: clamp(30px, 8vw, 40px);
            text-align: center;
            margin: 10px 0;
        }

        .restart-btn {
            display: block;
            margin: 20px auto 0;
            background: linear-gradient(to right, #00b09b, #96c93d);
            max-width: 250px;
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: clamp(24px, 5vw, 32px);
        }

        .quiz-description {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 25px;
            font-size: clamp(14px, 3vw, 16px);
        }

        .btn-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .shuffle-info {
            text-align: center;
            color: #6c757d;
            font-size: 14px;
            margin-top: 10px;
            font-style: italic;
        }

        /* Mobile-specific adjustments */
        @media (max-width: 768px) {
            body {
                padding: 15px;
            }

            .quiz-container {
                padding: 20px 15px;
                border-radius: 10px;
            }

            .options li {
                padding: 10px;
                margin-bottom: 10px;
            }

            .feedback-item {
                padding: 12px;
                margin-bottom: 15px;
            }

            .feedback-answer {
                padding: 8px;
            }

            .btn {
                padding: 10px 20px;
                font-size: 15px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .quiz-container {
                padding: 15px 10px;
            }

            .options li {
                padding: 8px;
            }

            .feedback-item {
                padding: 10px;
            }

            .question-counter {
                text-align: center;
            }

            .feedback-answer {
                flex-direction: column;
            }

            .feedback-label {
                min-width: auto;
                margin-bottom: 5px;
            }
        }

        /* Large screen adjustments */
        @media (min-width: 1200px) {
            .quiz-container {
                max-width: 800px;
                padding: 30px;
            }
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h1 id="quiz-title">Quiz Title</h1>
        <p id="quiz-description" class="quiz-description">Quiz Description</p>
        <div class="shuffle-info">Practice is the path to excellence - every line of code moves you forward</div>

        <div class="question-counter">
            Question <span id="current-question">1</span> of <span id="total-questions">0</span>
        </div>
        <div class="progress-bar">
            <div class="progress" id="progress" style="width: 0%"></div>
        </div>

        <div id="quiz">
            <!-- Quiz content will be injected here -->
        </div>
        <div class="btn-container">
            <button id="next-btn" class="btn" disabled>Next Question</button>
        </div>
        <div id="result" class="score"></div>
        <!-- Copyright footer -->
        <div style="margin-top:12px; text-align:center; color:#95a5a6; font-size:12px; user-select:none;">
        © <script>document.write(new Date().getFullYear());</script> Prabesh Luitel
        </div>
    </div>

    <script>
        // ============================================
        // QUIZ CONFIGURATION - EDIT THIS SECTION ONLY
        // ============================================
        const quizConfig = {
            // Page title (shown in browser tab)
            pageTitle: "Topic 2 Quiz",

            // Quiz title (shown on the page)
            quizTitle: "Pandas NumPy in Action",

            // Quiz description
            quizDescription: "Test your knowledge of Pandas and NumPy",

            // Quiz questions array
            questions: [
    {
        question: "What is the purpose of a user-defined function in Python?",
        options: [
            "To create reusable blocks of code",
            "To process missing values",
            "To filter rows and columns in a DataFrame",
            "To visualize data"
        ],
        answer: "To create reusable blocks of code",
        explanation: "User-defined functions allow you to create reusable blocks of code that can be called multiple times with different inputs."
    },
    {
        question: "Which of the following is a valid way to call a function in Python?",
        options: [
            "function name",
            "function name()",
            "call function name()",
            "None of the above"
        ],
        answer: "None of the above",
        explanation: "The correct way to call a function in Python is by using its name followed by parentheses, like function_name()."
    },
    {
        question: "What method is used to filter rows in a DataFrame based on a condition?",
        options: [
            "df.isnull()",
            "df.filter()",
            "df.loc[condition]",
            "df.fillna()"
        ],
        answer: "df.loc[condition]",
        explanation: "The df.loc[] method is used to filter rows based on a condition in a pandas DataFrame."
    },
    {
        question: "How can you check for missing values in a DataFrame?",
        options: [
            "df.isnull()",
            "df.describe()",
            "df.dropna()",
            "df.mean()"
        ],
        answer: "df.isnull()",
        explanation: "The df.isnull() method returns a DataFrame of the same shape with True where values are missing and False otherwise."
    },
    {
        question: "What is the first step when handling missing values in a dataset?",
        options: [
            "Delete rows with missing values",
            "Identify the missing data",
            "Replace missing values with the mean",
            "Ignore the missing values"
        ],
        answer: "Identify the missing data",
        explanation: "The first step in handling missing values is always to identify where and how much data is missing using methods like df.isnull().sum()."
    },
    {
        question: "What is the purpose of a return statement in a function?",
        options: ["Terminate a function", "Return a value to the caller", "Print a message", "None of the above"],
        answer: "Return a value to the caller",
        explanation: "The return statement sends a value back to the code that called the function, allowing the function to produce output."
    },
    {
        question: "Which of these is a correct function definition in Python?",
        options: [
            "def my_function: return 5",
            "def my_function(): return 5",
            "function my_function(): return 5",
            "function my_function: return 5"
        ],
        answer: "def my_function(): return 5",
        explanation: "Python function definitions use the 'def' keyword followed by the function name, parentheses, and a colon."
    },
    {
        question: "What does the following code do?<br><br><pre style='font-family: monospace; background: #f5f5f5; padding: 10px; border-radius: 5px; white-space: pre-wrap;'>def add(a, b):\n    return a + b</pre>",
        options: ["Adds two numbers", "Subtracts two numbers", "Multiplies two numbers", "None of the above"],
        answer: "Adds two numbers",
        explanation: "The function takes two parameters (a and b) and returns their sum using the + operator."
    },
    {
        question: "Which pandas method is used to filter rows by condition?",
        options: ["df.loc[]", "df.filter()", "df.query()", "df.drop()"],
        answer: "df.loc[]",
        explanation: "df.loc[] is primarily used for label-based indexing but can also filter rows using boolean conditions."
    },
    {
        question: "What does df.head() do in pandas?",
        options: ["Displays the first n rows", "Displays the last n rows", "Sorts the rows", "Drops missing values"],
        answer: "Displays the first n rows",
        explanation: "By default, df.head() shows the first 5 rows, but you can specify a different number as an argument."
    },
    {
        question: "What method is used to select specific columns in pandas?",
        options: ["df[['col1', 'col2']]", "df.select('col1', 'col2')", "df.choose(['col1', 'col2'])", "df.columns('col1', 'col2')"],
        answer: "df[['col1', 'col2']]",
        explanation: "Using double brackets df[['col1', 'col2']] is the standard way to select multiple specific columns from a DataFrame."
    },
    {
        question: "What function checks for missing values in a DataFrame?",
        options: ["df.isnull()", "df.notnull()", "df.checknull()", "df.isnan()"],
        answer: "df.isnull()",
        explanation: "df.isnull() returns a DataFrame of the same shape with True where values are missing (NaN or None) and False otherwise."
    },
    {
        question: "Which method is used to fill missing values in pandas?",
        options: ["df.fillna()", "df.dropna()", "df.impute()", "df.fill()"],
        answer: "df.fillna()",
        explanation: "df.fillna() replaces missing values with a specified value or using methods like forward fill or backward fill."
    },
    {
        question: "What is the first step when handling missing data?",
        options: ["Identify missing data", "Fill missing values", "Drop missing rows", "Replace missing values with zero"],
        answer: "Identify missing data",
        explanation: "Before handling missing data, you must first identify where and how much data is missing using methods like df.isnull().sum()."
    },
    {
        question: "What does the following function return?<br><br><pre style='font-family: monospace; background: #f5f5f5; padding: 10px; border-radius: 5px; white-space: pre-wrap;'>def square(x):\n    return x * x\n\nprint(square(4))</pre>",
        options: ["16", "8", "4", "Error"],
        answer: "16",
        explanation: "The square function multiplies the input by itself, so square(4) returns 4 * 4 = 16."
    },
    {
        question: "Which of the following filters rows where column 'A' is greater than 10?",
        options: [
            "df[df['A'] > 10]",
            "df.loc[df['A'] > 10]",
            "df.query('A > 10')",
            "All of the above"
        ],
        answer: "All of the above",
        explanation: "All three methods are valid ways to filter rows in pandas based on a condition. They achieve the same result using different syntax."
    },
    {
        question: "What does df.dropna() do?",
        options: ["Removes missing values", "Fills missing values", "Imputes missing values", "Checks for missing values"],
        answer: "Removes missing values",
        explanation: "df.dropna() removes rows or columns containing missing values from the DataFrame entirely."
    }
]
        };
        // ============================================
        // DO NOT EDIT
        // ============================================

        // Shuffle helper function
        function shuffleArray(arr) {
            for (let i = arr.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [arr[i], arr[j]] = [arr[j], arr[i]];
            }
            return arr;
        }

        // Set page title
        document.title = quizConfig.pageTitle;

        // Set quiz title and description
        document.getElementById('quiz-title').textContent = quizConfig.quizTitle;
        document.getElementById('quiz-description').textContent = quizConfig.quizDescription;

        // Quiz variables
        let currentQuestionIndex = 0;
        let score = 0;
        let userAnswers = [];

        // DOM elements
        const quizContainer = document.getElementById('quiz');
        const nextButton = document.getElementById('next-btn');
        const resultContainer = document.getElementById('result');
        const currentQuestionElement = document.getElementById('current-question');
        const totalQuestionsElement = document.getElementById('total-questions');
        const progressElement = document.getElementById('progress');

        // Initialize total questions display
        totalQuestionsElement.textContent = quizConfig.questions.length;

        // Shuffle questions initially
        shuffleArray(quizConfig.questions);

        // Display the current question with shuffled options
        function displayQuestion() {
            const question = quizConfig.questions[currentQuestionIndex];
            currentQuestionElement.textContent = currentQuestionIndex + 1;

            // Update progress bar
            const progressPercentage = ((currentQuestionIndex + 1) / quizConfig.questions.length) * 100;
            progressElement.style.width = `${progressPercentage}%`;

            // Shuffle the options for this question
            const shuffledOptions = shuffleArray([...question.options]);

            // Keep "None/All of the above" last if present
            const SPECIALS = ["None of the above", "All of the above", "None of the abouve", "None", "All"]; // typo included just in case
            const idx = shuffledOptions.findIndex(
            opt => SPECIALS.some(s => opt.trim().toLowerCase() === s.toLowerCase())
            );
            if (idx !== -1) {
            const [special] = shuffledOptions.splice(idx, 1);
            shuffledOptions.push(special);
            }

            quizContainer.innerHTML = `
                <div class="question">${question.question}</div>
                <ul class="options">
                    ${shuffledOptions
                        .map(
                            (option, index) => `
                                <li>
                                    <label>
                                        <input type="radio" name="option" value="${option}" />
                                        ${option}
                                    </label>
                                </li>
                            `
                        )
                        .join('')}
                </ul>
            `;

            nextButton.disabled = true;
            const options = document.querySelectorAll('input[name="option"]');
            options.forEach(option => {
                option.addEventListener('change', () => {
                    nextButton.disabled = false;
                });
            });
        }

        // Show results with detailed feedback
        function showResult() {
            quizContainer.style.display = 'none';
            nextButton.style.display = 'none';

            // Determine emoji based on score
            let emoji = "😞";
            let message = "Keep practicing to improve!";

            if (score === quizConfig.questions.length) {
                emoji = "🏆";
                message = "Congratulations! You are a Quiz Master!";
            } else if (score >= quizConfig.questions.length / 2) {
                emoji = "🎉";
                message = "Well done! Keep it up!";
            }

            resultContainer.innerHTML = `
                <div class="result-emoji">${emoji}</div>
                <div class="score">Your score: ${score}/${quizConfig.questions.length}</div>
                <div style="text-align: center; margin-bottom: 20px; font-size: clamp(16px, 3.5vw, 18px);">${message}</div>
                <div class="feedback-container">
                    <h2 style="text-align: center; color: #2c3e50; margin-bottom: 20px; font-size: clamp(18px, 4vw, 22px);">Detailed Feedback</h2>
                    ${userAnswers.map((item, index) => {
                        const isCorrect = item.userAnswer === item.correctAnswer;
                        return `
                            <div class="feedback-item">
                                <div class="feedback-question">${index + 1}. ${item.question}</div>
                                <div class="feedback-answer ${isCorrect ? 'correct' : 'incorrect'}">
                                    <span class="feedback-label">Your answer:</span> ${item.userAnswer || "Not answered"}
                                </div>
                                <div class="feedback-answer correct">
                                    <span class="feedback-label">Correct answer:</span> ${item.correctAnswer}
                                </div>
                                <div style="margin-top: 10px; font-style: italic; color: #7f8c8d; font-size: clamp(14px, 3vw, 16px);"> Explanation: ${item.explanation}</div>

                            </div>
                        `;
                    }).join('')}
                </div>
                <div class="btn-container">
                    <button id="restart-btn" class="btn restart-btn">Take Quiz Again</button>
                </div>
            `;

            // Add event listener for restart button
            document.getElementById('restart-btn').addEventListener('click', restartQuiz);
        }

        // Restart the quiz with new randomization
        function restartQuiz() {
            currentQuestionIndex = 0;
            score = 0;
            userAnswers = [];

            // Reshuffle questions for a new order
            shuffleArray(quizConfig.questions);

            quizContainer.style.display = 'block';
            nextButton.style.display = 'inline-block';
            resultContainer.innerHTML = '';
            displayQuestion();
        }

        // Next button event listener
        nextButton.addEventListener('click', () => {
            const selectedOption = document.querySelector('input[name="option"]:checked');
            const userAnswer = selectedOption ? selectedOption.value : null;
            const correctAnswer = quizConfig.questions[currentQuestionIndex].answer;
            const explanation = quizConfig.questions[currentQuestionIndex].explanation;

            // Store user's answer and correct answer
            userAnswers.push({
                question: quizConfig.questions[currentQuestionIndex].question,
                userAnswer: userAnswer,
                correctAnswer: correctAnswer,
                explanation: explanation
            });

            if (userAnswer === correctAnswer) {
                score++;
            }

            currentQuestionIndex++;
            if (currentQuestionIndex < quizConfig.questions.length) {
                displayQuestion();
            } else {
                showResult();
            }
        });

        // Initialize the quiz
        displayQuestion();
    </script>
</body>
</html>