Application changes

app/static/script.js

@@ -91,18 +91,92 @@ document.getElementById('prev').addEventListener('click', () => {
     displayQuestion();
 });
 
-document.getElementById('end-session').addEventListener('click', async () => {
-    const response = await fetch('/submit_results', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ questions, user_answers: userAnswers })
+document.getElementById('end-session').addEventListener('click', () => {
+    let correctCount = 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);
     });
-    const result = await response.json();
+    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');
+        const correctAnswersText = question.correct.map(ansIndex => question.options[ansIndex]).join(', ');
+        correctAnswerCell.innerText = correctAnswersText;
+        correctAnswerCell.style.border = '1px solid #ddd';
+        correctAnswerCell.style.padding = '10px';
+        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 if (
+            JSON.stringify(userAnswers[index].sort()) === JSON.stringify(question.correct.sort())
+        ) {
+            statusCell.innerText = 'Correct';
+            statusCell.style.color = 'green';
+            correctCount++;
+        } 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 score = (correctCount / questions.length) * 100;
+
+    // Mostra il punteggio
+    document.getElementById('score').innerText = `Your score: ${score.toFixed(2)}%`;
+
+    // Aggiungi la tabella ai risultati
+    const resultsContainer = document.getElementById('results-container');
+    resultsContainer.appendChild(resultsTable);
+
+    // Mostra il contenitore dei risultati e nascondi il quiz
     document.getElementById('quiz-container').style.display = 'none';
-    document.getElementById('results-container').style.display = 'block';
-    document.getElementById('score').innerText = `Your score: ${result.score.toFixed(2)}%`;
+    resultsContainer.style.display = 'block';
 });
 
+
 document.getElementById('restart').addEventListener('click', () => {
     document.getElementById('results-container').style.display = 'none';
     document.getElementById('file-selection').style.display = 'block';

app/static/style.css

@@ -79,3 +79,34 @@ button#restart {
 button#restart:hover {
     background-color: #218838;
 }
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th, td {
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: left;
+}
+
+th {
+    background-color: #f4f4f4;
+}
+
+td.correct {
+    background-color: #d4edda;
+    color: #155724;
+}
+
+td.incorrect {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+td.not-answered {
+    background-color: #fff3cd;
+    color: #856404;
+}