Questionaire/result.html at main · jittyk/Questionaire · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Questionnaire</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <style>
            #studentDetails {
            display: none;
            }
            .background-image {
            width: 100%;
            }
            .back-button {
            margin-bottom: 20px;
            }
        </style>
    </head>
    <body class="d-flex flex-column min-vh-100">
        <header class="navbar navbar-expand-lg navbar-dark bg-primary" style="
    background-color: #4682b4; /* Default color in case the image doesn't load */
    color: white;
    padding: 10px 0;
    background-image: url('https://cdn.kekastatic.net/shared/assets/images/components/page-header/0.png'); /* Update this path */
    background-size: cover; /* Ensure the image covers the area */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: center; /* Center the image */
">
            <div class="container-fluid d-flex justify-content-between align-items-center">
                <a class="navbar-brand">
                    <h2>Q</h2>
                </a>
                <button class="homeButton btn btn-light" style="margin: 10px" onclick="window.location.href='Project_Questionaire.html'">
                <i class="fas fa-home"></i>
                </button>
            </div>
        </header>
        <div class="container mt-4" style="flex: 1">
            <!-- Students List Section -->
            <div id="studentsList" class="text-center">
                <h2>Exam Results</h2>
                <ul class="list-group" id="students"></ul>
            </div>
            <div class="col-12 text-end">
                <button id="back" class="btn btn-primary back-button">Back to Results</button>
            </div>
            <!-- Student Details Section -->
            <div id="studentDetails" class="text-start">
                <h3 id="studentName"></h3>
                <h3>Score: <span id="studentScore"></span></h3>
                <h4 class="text-center">Question Details</h4>
                <table class="table table-bordered text-center" id="questionsTable">
                    <thead>
                        <tr>
                            <th>Question</th>
                            <th>Your Answer</th>
                            <th>Correct Answer</th>
                            <th>Is Correct?</th>
                        </tr>
                    </thead>
                    <tbody id="questionsList" class="text-start"></tbody>
                </table>
            </div>
        </div>
        <footer class="bg-primary" style="
    background-color: #4682b4;
    color: white;
    padding: 10px 0;
    background-image: url('https://cdn.kekastatic.net/shared/assets/images/components/page-header/0.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
">
            <p style="text-align: center; color: white; padding: 10px">©Questionnaire</p>
        </footer>
        <script>
            $(document).ready(function () {
                $('#back').hide(); // Hide the back button initially
                let results = []; // Declare results variable

                // Load JSON data
                $.getJSON('result.json', function (data) {
                    results = data.examResults; // Assign data to the outer variable

                    // Loop through each student's results and append to the list
                    results.forEach(function(result) {
            var listItem = '<li class="list-group-item list-group-item-action student-item text-center" data-id="' + result.id + '">';
            listItem += result.studentName + ' - Score: ' + result.score;
            listItem += '</li>';
            $('#students').append(listItem);
            });

                });

                // Event delegation to handle dynamic .student-item elements
                $('#studentsList').on('click', '.student-item', function () {
                    const studentId = $(this).data('id');
                    const student = results.find((s) => s.id === studentId);

                    // Hide students list and show details
                    $('#studentsList').hide();
                    $('#studentDetails').show();
                    $('#back').show(); // Show the back button

                    // Fill in student details
                    $('#studentName').text(student.studentName);
                    $('#studentScore').text(student.score);

                    // Clear previous questions and fill new data
                    $('#questionsList').empty();
                    student.questions.forEach((question) => {
                        const correctnessSymbol = question.isCorrect ? '✔️' : '❌'; // Use symbols for correctness
                        $('#questionsList').append(`
                            <tr>
                                <td>${question.question}</td>
                                <td>${question.answerGiven}</td>
                                <td>${question.correctAnswer}</td>
                                <td class="text-center">${correctnessSymbol}</td>
                            </tr>
                        `);
                    });
                });

                // Back to results button
                $('.back-button').click(function () {
                    $('#studentDetails').hide();
                    $('#studentsList').show();
                    $('#back').hide(); // Hide the back button when going back to results
                });
            });
        </script>
    </body>
</html>