File size: 8,901 Bytes
1677ecc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
242f01a
b0a7145
 
 
 
 
 
 
242f01a
b0a7145
 
 
 
242f01a
b0a7145
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44f0b86
b0a7145
eda232c
b0a7145
57819f8
b0a7145
 
 
242f01a
44f0b86
b0a7145
 
 
 
 
1677ecc
b0a7145
 
811236f
b0a7145
242f01a
811236f
1677ecc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90e32d4
 
595d9d6
 
90e32d4
 
 
 
 
 
 
 
 
 
 
 
 
 
1677ecc
90e32d4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fff0efe
 
595d9d6
fff0efe
 
 
 
 
 
595d9d6
 
 
 
 
fff0efe
90e32d4
 
fff0efe
 
 
90e32d4
 
 
 
 
 
 
 
27200ef
66efcf5
27200ef
 
 
 
 
 
 
90e32d4
 
 
 
 
 
 
 
 
595d9d6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7b4ae91
 
595d9d6
7b4ae91
037c967
90e32d4
1677ecc
90e32d4
1677ecc
 
15ca1e9
7e8a856
811236f
 
 
 
 
 
15ca1e9
1677ecc
 
57819f8
 
 
 
 
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
let questions = [];
let currentIndex = 0;
let userAnswers = [];
let startTime;

document.getElementById('start-session').addEventListener('click', async () => {
    const file = document.getElementById('file').value;
    if (!file) return alert("Please select a file");

    const response = await fetch('/load_questions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ file_name: file })
    });

    questions = await response.json();
    userAnswers = Array(questions.length).fill([]);
    startQuiz();
});

function startQuiz() {
    document.getElementById('file-selection').style.display = 'none';
    document.getElementById('quiz-container').style.display = 'block';
    startTime = Date.now();
    displayQuestion();
    setInterval(updateTimer, 1000);
}

function displayQuestion() {
    const question = questions[currentIndex];
    document.getElementById('question-number').innerText = `Question ${currentIndex + 1} of ${questions.length}`;
    document.getElementById('question').innerText = question.question;

    // Verifica se ci sono risposte multiple
    const isMultipleChoice = question.correct.length > 1;

    const optionsDiv = document.getElementById('options');
    optionsDiv.innerHTML = '';

    const form = document.createElement('form');
    form.id = 'question-options';

    question.options.forEach((option, i) => {
        const input = document.createElement('input');
        input.type = isMultipleChoice ? 'checkbox' : 'radio';
        input.name = 'answer';
        input.value = i;
        input.checked = userAnswers[currentIndex].includes(i);

        input.addEventListener('change', () => {
            if (isMultipleChoice) {
                if (input.checked) {
                    userAnswers[currentIndex].push(i);
                } else {
                    userAnswers[currentIndex] = userAnswers[currentIndex].filter(j => j !== i);
                }
            } else {
                userAnswers[currentIndex] = [i];
            }
        });

        const label = document.createElement('label');
        label.appendChild(input);
        label.appendChild(document.createTextNode(option));
        label.style.display = 'block';
        label.style.marginBottom = '10px';

        form.appendChild(label);
    });

    optionsDiv.appendChild(form);
}

function selectAnswer(optionIndex) {
    const currentAnswers = userAnswers[currentIndex];
    if (currentAnswers.includes(optionIndex)) {
        userAnswers[currentIndex] = currentAnswers.filter(i => i !== optionIndex);
    } else {
        userAnswers[currentIndex].push(optionIndex);
    }
    displayQuestion();
}

document.getElementById('next').addEventListener('click', () => {
    currentIndex = Math.min(currentIndex + 1, questions.length - 1);
    displayQuestion();
});

document.getElementById('prev').addEventListener('click', () => {
    currentIndex = Math.max(currentIndex - 1, 0);
    displayQuestion();
});

document.getElementById('end-session').addEventListener('click', () => {
    let correctCount = 0;
    let incorrectCount = 0;
    let unansweredCount = 0;

    const resultsTable = document.createElement('table');
    resultsTable.style.width = '100%';
    resultsTable.style.borderCollapse = 'collapse';

    // Crea l'intestazione della tabella
    const headerRow = document.createElement('tr');
    ['Question', 'Your Answer', 'Correct Answer', 'Status'].forEach(header => {
        const th = document.createElement('th');
        th.innerText = header;
        th.style.border = '1px solid #ddd';
        th.style.padding = '10px';
        th.style.backgroundColor = '#f4f4f4';
        headerRow.appendChild(th);
    });
    resultsTable.appendChild(headerRow);

    questions.forEach((question, index) => {
        const row = document.createElement('tr');

        // Colonna domanda
        const questionCell = document.createElement('td');
        questionCell.innerText = question.question;
        questionCell.style.border = '1px solid #ddd';
        questionCell.style.padding = '10px';
        row.appendChild(questionCell);

        // Colonna risposta dell'utente
        const userAnswerCell = document.createElement('td');
        const userAnswersText = userAnswers[index].length
            ? userAnswers[index].map(ansIndex => question.options[ansIndex]).join(', ')
            : 'No answer';
        userAnswerCell.innerText = userAnswersText;
        userAnswerCell.style.border = '1px solid #ddd';
        userAnswerCell.style.padding = '10px';
        row.appendChild(userAnswerCell);

        // Colonna risposta corretta
        const correctAnswerCell = document.createElement('td');
        if (userAnswers[index].length === 0) {
            correctAnswerCell.innerText = 'No answer';
            unansweredCount++;  // Aumenta il contatore delle risposte non date
        } else {
            const correctAnswersText = question.correct.map(letter => {
                const optionIndex = letter.charCodeAt(0) - 65; // A = 0, B = 1, C = 2, ...
                return question.options[optionIndex];
            }).join(', ');
            correctAnswerCell.innerText = correctAnswersText;
            if (JSON.stringify(userAnswers[index].sort()) === JSON.stringify(question.correct.sort().map(letter => letter.charCodeAt(0) - 65))) {
                correctCount++;  // Aumenta il contatore delle risposte corrette
            } else {
                incorrectCount++;  // Aumenta il contatore delle risposte sbagliate
            }
        }
        correctAnswerCell.style.border = '1px solid #ddd';
        correctAnswerCell.style.padding = '10px';
        if (userAnswers[index].length > 0) {
            correctAnswerCell.style.backgroundColor = '#d4edda'; // Verde chiaro per evidenziare la risposta corretta
        }
        row.appendChild(correctAnswerCell);

        // Colonna stato
        const statusCell = document.createElement('td');
        if (userAnswers[index].length === 0) {
            statusCell.innerText = 'Not answered';
            statusCell.style.color = 'orange';
        } else {
            // Confronto corretto per risposte multiple (controllo che le risposte dell'utente corrispondano alle risposte corrette)
            const isCorrect = JSON.stringify(userAnswers[index].sort()) === JSON.stringify(question.correct.sort().map(letter => letter.charCodeAt(0) - 65));
            if (isCorrect) {
                statusCell.innerText = 'Correct';
                statusCell.style.color = 'green';
            } else {
                statusCell.innerText = 'Incorrect';
                statusCell.style.color = 'red';
            }
        }
        statusCell.style.border = '1px solid #ddd';
        statusCell.style.padding = '10px';
        row.appendChild(statusCell);

        resultsTable.appendChild(row);
    });

    // Calcola lo score
    const totalQuestions = questions.length;
    const score = (correctCount / totalQuestions) * 100;

    // Mostra il punteggio con i dettagli
    const scoreDetails = document.createElement('div');
    scoreDetails.style.marginBottom = '20px';

    scoreDetails.innerHTML = `
        <h3>Quiz Results</h3>
        <p><strong>Total Questions:</strong> ${totalQuestions}</p>
        <p><strong>Correct Answers:</strong> ${correctCount}</p>
        <p><strong>Incorrect Answers:</strong> ${incorrectCount}</p>
        <p><strong>Unanswered Questions:</strong> ${unansweredCount}</p>
        <p><strong>Your score:</strong> ${score.toFixed(2)}%</p>
    `;

    // Aggiungi i dettagli del punteggio e la tabella ai risultati
    const resultsContainer = document.getElementById('results-container');
    resultsContainer.innerHTML = ''; // Pulisci i risultati precedenti
    resultsContainer.appendChild(scoreDetails);
    resultsContainer.appendChild(resultsTable);

    // Mostra il contenitore dei risultati e nascondi il quiz
    document.getElementById('quiz-container').style.display = 'none';
    resultsContainer.style.display = 'block';
});

document.getElementById('restart').addEventListener('click', () => {
    document.getElementById('results-container').style.display = 'none';
    document.getElementById('file-selection').style.display = 'block';
    document.getElementById('quiz-container').style.display = 'none';
    currentIndex = 0;
    questions = [];
    userAnswers = [];
    document.getElementById('file').value = ''; // Reset file selection
});
function updateTimer() {
    const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
    const hours = String(Math.floor(elapsedTime / 3600)).padStart(2, '0');
    const minutes = String(Math.floor((elapsedTime % 3600) / 60)).padStart(2, '0');
    const seconds = String(elapsedTime % 60).padStart(2, '0');
    document.getElementById('timer').innerText = `Time: ${hours}:${minutes}:${seconds}`;
}