Application changes

app/static/script.js

@@ -97,8 +97,9 @@ document.getElementById('prev').addEventListener('click', () => {
 
 document.getElementById('end-session').addEventListener('click', () => {
     let correctCount = 0;
+    let incorrectCount = 0;
+    let unansweredCount = 0;
 
-    // Crea la tabella dei risultati
     const resultsTable = document.createElement('table');
     resultsTable.style.width = '100%';
     resultsTable.style.borderCollapse = 'collapse';
@@ -139,12 +140,18 @@ document.getElementById('end-session').addEventListener('click', () => {
         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';
@@ -164,7 +171,6 @@ document.getElementById('end-session').addEventListener('click', () => {
             if (isCorrect) {
                 statusCell.innerText = 'Correct';
                 statusCell.style.color = 'green';
-                correctCount++;
             } else {
                 statusCell.innerText = 'Incorrect';
                 statusCell.style.color = 'red';
@@ -178,16 +184,26 @@ document.getElementById('end-session').addEventListener('click', () => {
     });
 
     // Calcola lo score
-    const score = (correctCount / questions.length) * 100;
-
-    // Mostra il punteggio
-    const scoreElement = document.getElementById('score');
-    scoreElement.innerText = `Your score: ${score.toFixed(2)}%`;
-
-    // Aggiungi la tabella ai risultati
+    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(scoreElement);
+    resultsContainer.appendChild(scoreDetails);
     resultsContainer.appendChild(resultsTable);
 
     // Mostra il contenitore dei risultati e nascondi il quiz
@@ -200,6 +216,7 @@ document.getElementById('end-session').addEventListener('click', () => {
 
 
 
+
 document.getElementById('restart').addEventListener('click', () => {
     document.getElementById('results-container').style.display = 'none';
     document.getElementById('file-selection').style.display = 'block';

app/templates/index.html

@@ -22,7 +22,7 @@
         <div id="quiz-container" style="display: none;">
             <div id="question-container">
                 <h2 id="question-number"></h2>
-                <p id="timer">Time: 0s</p>
+                <p id="timer">Time: 00:00:00</p>
                 <h2 id="question" style="font-weight: normal;"></h2>
                 <div id="options"></div>
                 <div id="navigation">