Fix 'Review Answer' button in Quiz doing nothing & improvements to quiz

views/quiz.ejs

@@ -143,7 +143,7 @@
     <!-- Results Container -->
     <div id="results-container" class="d-none">
         <div class="row">
-            <div class="col-lg-8">
+            <div class="col-lg-12">
                 <div class="card shadow-sm border-0">
                     <div class="card-header bg-info text-white">
                         <h4 class="mb-0"><i class="fas fa-chart-line me-2"></i>Quiz Results</h4>
@@ -166,15 +166,6 @@
                     </div>
                 </div>
             </div>
-            
-            <div class="col-lg-4">
-                <div class="card border-0 shadow-sm">
-                    <div class="card-body">
-                        <h5><i class="fas fa-trophy me-2"></i>Performance</h5>
-                        <div id="performance-chart"></div>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </div>
@@ -339,6 +330,14 @@ document.addEventListener('DOMContentLoaded', function() {
                 resetQuiz();
             });
         }
+        
+        // Add event listener for review button
+        const reviewBtn = document.getElementById('review-btn');
+        if (reviewBtn) {
+            reviewBtn.addEventListener('click', () => {
+                reviewAnswers();
+            });
+        }
     }
     
     function displayQuestion(index) {
@@ -556,6 +555,9 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     function displayResults(results) {
+        // Store results globally for review functionality
+        window.lastQuizResults = results;
+        
         quizContainer.classList.add('d-none');
         resultsContainer.classList.remove('d-none');
         
@@ -636,6 +638,256 @@ document.addEventListener('DOMContentLoaded', function() {
         
         quizForm.reset();
     }
+    
+    function reviewAnswers() {
+        // Switch from results view back to quiz view for review
+        resultsContainer.classList.add('d-none');
+        quizContainer.classList.remove('d-none');
+        
+        // Set to review mode and start from first question
+        currentQuestion = 0;
+        displayQuestionInReviewMode(currentQuestion);
+        displayOverviewInReviewMode();
+        
+        // Update navigation for review mode
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const submitBtn = document.getElementById('submit-btn');
+        
+        // Remove existing event listeners by cloning elements
+        if (prevBtn) {
+            const newPrevBtn = prevBtn.cloneNode(true);
+            prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+            newPrevBtn.onclick = () => {
+                if (currentQuestion > 0) {
+                    currentQuestion--;
+                    displayQuestionInReviewMode(currentQuestion);
+                }
+            };
+        }
+        
+        if (nextBtn) {
+            const newNextBtn = nextBtn.cloneNode(true);
+            nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+            newNextBtn.onclick = () => {
+                if (currentQuestion < currentQuiz.length - 1) {
+                    currentQuestion++;
+                    displayQuestionInReviewMode(currentQuestion);
+                }
+            };
+        }
+        
+        // Hide submit button completely in review mode
+        if (submitBtn) {
+            submitBtn.classList.add('d-none');
+        }
+        
+        // Add a "Back to Results" button
+        const cardBody = submitBtn.parentElement;
+        let backToResultsBtn = document.getElementById('back-to-results-btn');
+        if (!backToResultsBtn) {
+            backToResultsBtn = document.createElement('button');
+            backToResultsBtn.id = 'back-to-results-btn';
+            backToResultsBtn.className = 'btn btn-info';
+            backToResultsBtn.innerHTML = '<i class="fas fa-arrow-left me-2"></i>Back to Results';
+            backToResultsBtn.onclick = () => {
+                quizContainer.classList.add('d-none');
+                resultsContainer.classList.remove('d-none');
+                // Remove the back button
+                backToResultsBtn.remove();
+            };
+            cardBody.appendChild(backToResultsBtn);
+        }
+    }
+    
+    function displayQuestionInReviewMode(index) {
+        if (!currentQuiz || index >= currentQuiz.length) {
+            console.error('Invalid question index or quiz not loaded');
+            return;
+        }
+        
+        const question = currentQuiz[index];
+        const questionsDiv = document.getElementById('quiz-questions');
+        
+        if (!questionsDiv) {
+            console.error('Questions div not found!');
+            return;
+        }
+        
+        // Get the quiz results from the last submission
+        const resultForThisQuestion = window.lastQuizResults ? 
+            window.lastQuizResults.results[index] : null;
+        
+        let html = `
+            <div class="mb-4">
+                <h5 class="mb-3">
+                    Question ${index + 1} 
+                    ${resultForThisQuestion ? 
+                        `<span class="badge ${resultForThisQuestion.isCorrect ? 'bg-success' : 'bg-danger'} ms-2">
+                            ${resultForThisQuestion.isCorrect ? 'Correct' : 'Incorrect'}
+                        </span>` : ''
+                    }
+                </h5>
+                <p class="lead">${escapeHtml(question.question)}</p>
+            </div>
+        `;
+        
+        if (question.options) {
+            // Multiple choice - show options with user's answer and correct answer highlighted
+            html += '<div class="mb-3">';
+            question.options.forEach((option, i) => {
+                const optionLetter = option.charAt(0);
+                const userSelected = userAnswers[index] === optionLetter;
+                const isCorrect = question.correct === optionLetter;
+                
+                let className = 'form-check mb-2';
+                let labelClass = 'form-check-label';
+                
+                if (userSelected && isCorrect) {
+                    className += ' bg-success bg-opacity-10 border border-success rounded p-2';
+                    labelClass += ' text-success fw-bold';
+                } else if (userSelected && !isCorrect) {
+                    className += ' bg-danger bg-opacity-10 border border-danger rounded p-2';
+                    labelClass += ' text-danger fw-bold';
+                } else if (!userSelected && isCorrect) {
+                    className += ' bg-warning bg-opacity-10 border border-warning rounded p-2';
+                    labelClass += ' text-warning fw-bold';
+                }
+                
+                html += `
+                    <div class="${className}">
+                        <input class="form-check-input" type="radio" disabled 
+                               ${userSelected ? 'checked' : ''}>
+                        <label class="${labelClass}">
+                            ${escapeHtml(option)}
+                            ${isCorrect ? ' ✓ (Correct answer)' : ''}
+                        </label>
+                    </div>
+                `;
+            });
+            html += '</div>';
+        } else if (question.correct === 'True' || question.correct === 'False') {
+            // True/False
+            const userSelected = userAnswers[index];
+            const correctAnswer = question.correct;
+            
+            ['True', 'False'].forEach(option => {
+                const userSelectedThis = userSelected === option;
+                const isCorrect = correctAnswer === option;
+                
+                let className = 'form-check mb-2';
+                let labelClass = 'form-check-label';
+                
+                if (userSelectedThis && isCorrect) {
+                    className += ' bg-success bg-opacity-10 border border-success rounded p-2';
+                    labelClass += ' text-success fw-bold';
+                } else if (userSelectedThis && !isCorrect) {
+                    className += ' bg-danger bg-opacity-10 border border-danger rounded p-2';
+                    labelClass += ' text-danger fw-bold';
+                } else if (!userSelectedThis && isCorrect) {
+                    className += ' bg-warning bg-opacity-10 border border-warning rounded p-2';
+                    labelClass += ' text-warning fw-bold';
+                }
+                
+                html += `
+                    <div class="${className}">
+                        <input class="form-check-input" type="radio" disabled 
+                               ${userSelectedThis ? 'checked' : ''}>
+                        <label class="${labelClass}">
+                            ${option}
+                            ${isCorrect ? ' ✓ (Correct answer)' : ''}
+                        </label>
+                    </div>
+                `;
+            });
+        } else {
+            // Short answer
+            const userAnswer = userAnswers[index] || '';
+            const correctAnswer = question.correct || '';
+            
+            html += `
+                <div class="mb-3">
+                    <label class="form-label fw-bold">Your Answer:</label>
+                    <div class="p-3 bg-light border rounded">
+                        ${userAnswer ? escapeHtml(userAnswer) : '<em>No answer provided</em>'}
+                    </div>
+                    <label class="form-label fw-bold mt-3 text-success">Correct Answer:</label>
+                    <div class="p-3 bg-success bg-opacity-10 border border-success rounded">
+                        ${escapeHtml(correctAnswer)}
+                    </div>
+                </div>
+            `;
+        }
+        
+        // Add explanation if available
+        if (resultForThisQuestion && resultForThisQuestion.explanation) {
+            html += `
+                <div class="mt-3 p-3 bg-info bg-opacity-10 border border-info rounded">
+                    <strong>Explanation:</strong>
+                    <p class="mb-0 mt-2">${escapeHtml(resultForThisQuestion.explanation)}</p>
+                </div>
+            `;
+        }
+        
+        questionsDiv.innerHTML = html;
+        
+        // Update progress
+        const progressEl = document.getElementById('quiz-progress');
+        if (progressEl) {
+            progressEl.textContent = `Review: Question ${index + 1} of ${currentQuiz.length}`;
+        }
+        
+        // Update navigation buttons for review mode
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const submitBtn = document.getElementById('submit-btn');
+        
+        if (prevBtn) prevBtn.disabled = index === 0;
+        if (nextBtn) {
+            nextBtn.disabled = index === currentQuiz.length - 1;
+            nextBtn.classList.remove('d-none');
+        }
+        // Keep submit button hidden in review mode
+        if (submitBtn) {
+            submitBtn.classList.add('d-none');
+        }
+    }
+    
+    function displayOverviewInReviewMode() {
+        const overviewDiv = document.getElementById('quiz-overview');
+        let html = '<div class="row">';
+        
+        currentQuiz.forEach((_, i) => {
+            const resultForQuestion = window.lastQuizResults ? 
+                window.lastQuizResults.results[i] : null;
+            const isCurrent = i === currentQuestion;
+            
+            let btnClass = 'btn btn-sm w-100 ';
+            if (isCurrent) {
+                btnClass += 'btn-primary';
+            } else if (resultForQuestion) {
+                btnClass += resultForQuestion.isCorrect ? 'btn-success' : 'btn-danger';
+            } else {
+                btnClass += 'btn-outline-secondary';
+            }
+            
+            html += `
+                <div class="col-4 mb-2">
+                    <button class="${btnClass}" onclick="goToQuestionInReview(${i})">
+                        ${i + 1}
+                    </button>
+                </div>
+            `;
+        });
+        
+        html += '</div>';
+        overviewDiv.innerHTML = html;
+    }
+    
+    window.goToQuestionInReview = function(index) {
+        currentQuestion = index;
+        displayQuestionInReviewMode(currentQuestion);
+    };
 });
 </script>