Guide 3.18: Real Projects
Implement Practice Mode
While Exam Mode is great for testing readiness, Practice Mode is for actual learning. In Practice Mode, we want to give the user immediate feedback. If they click the wrong answer, we should instantly tell them why.
Instant Feedback Logic
3.18.1Update your option selection listener. If isExamMode is false, we instantly evaluate the answer instead of waiting for the final submit.
optionsContainer.addEventListener('change', (e) => {
if (e.target.name === 'exam_option') {
const selectedValue = e.target.value;
userAnswers[currentQuestionIndex] = selectedValue;
updateGridColors();
// NEW: Practice Mode Instant Feedback
if (!isExamMode) {
const qData = examQuestions[currentQuestionIndex];
const allInputs = document.querySelectorAll('input[name="exam_option"]');
// Disable inputs so they can't change their answer
allInputs.forEach(input => input.disabled = true);
if (selectedValue === qData.answer) {
alert("Correct!");
} else {
alert(`Incorrect! The correct answer was ${qData.answer.toUpperCase()}.\n\nExplanation: ${qData.solution || 'No explanation available.'}`);
}
}
}
});The V4 AI Advantage
3.18.2If you are building a premium application, Practice Mode is where you should utilize the SdashAPI V4 Endpoint. Instead of just showing the solution when they fail, you can show the AI-generated hint dynamically when they hover over a question, turning your app into an active learning tool rather than just a testing tool.