601 lines
22 KiB
JavaScript
601 lines
22 KiB
JavaScript
// Exam Mode Module
|
|
class ExamMode extends BaseModule {
|
|
constructor() {
|
|
super();
|
|
this.examAnswers = {};
|
|
this.examTimer = null;
|
|
this.examTimeLimit = 30; // minutes
|
|
this.examStartTime = null;
|
|
this.navigator = null;
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.setupEventListeners();
|
|
}
|
|
|
|
setupEventListeners() {
|
|
document.getElementById('start-exam')?.addEventListener('click', () => {
|
|
this.startExam();
|
|
});
|
|
|
|
document.getElementById('prev-exam-btn')?.addEventListener('click', () => {
|
|
this.previousQuestion();
|
|
});
|
|
|
|
document.getElementById('next-exam-btn')?.addEventListener('click', () => {
|
|
this.nextQuestion();
|
|
});
|
|
|
|
document.getElementById('finish-exam')?.addEventListener('click', () => {
|
|
this.showFinishConfirmation();
|
|
});
|
|
|
|
document.getElementById('retake-exam')?.addEventListener('click', () => {
|
|
this.resetExam();
|
|
});
|
|
|
|
document.getElementById('review-answers')?.addEventListener('click', () => {
|
|
this.showReviewMode();
|
|
});
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', (e) => {
|
|
this.handleKeyboard(e);
|
|
});
|
|
|
|
// Modal event listeners
|
|
this.setupModalListeners();
|
|
}
|
|
|
|
setupModalListeners() {
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.id === 'confirm-finish') {
|
|
this.finishExam();
|
|
this.hideConfirmModal();
|
|
} else if (e.target.id === 'confirmModalCancel' || e.target.id === 'confirmModalClose') {
|
|
this.hideConfirmModal();
|
|
} else if (e.target.id === 'confirmBackdrop') {
|
|
this.hideConfirmModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
async startExam() {
|
|
const questionCount = parseInt(document.getElementById('exam-questions').value);
|
|
this.examTimeLimit = parseInt(document.getElementById('exam-time').value);
|
|
|
|
try {
|
|
const data = await this.fetchQuestions({
|
|
mode: 'random',
|
|
count: questionCount
|
|
});
|
|
|
|
this.questions = data;
|
|
this.examAnswers = {};
|
|
this.currentIndex = 0;
|
|
this.examStartTime = new Date();
|
|
|
|
this.initializeNavigator();
|
|
this.displayQuestion();
|
|
this.startTimer();
|
|
|
|
BaseModule.hide('exam-setup');
|
|
BaseModule.show('exam-content');
|
|
|
|
this.updateExamProgress();
|
|
|
|
} catch (error) {
|
|
console.error('Error starting exam:', error);
|
|
}
|
|
}
|
|
|
|
initializeNavigator() {
|
|
if (!this.navigator) {
|
|
this.navigator = new QuestionNavigator('question-navigator', {
|
|
onQuestionSelect: (index) => {
|
|
this.currentIndex = index;
|
|
this.displayQuestion();
|
|
},
|
|
storagePrefix: 'exam_temp' // Don't persist exam navigation
|
|
});
|
|
}
|
|
|
|
this.navigator.setQuestions(this.questions);
|
|
}
|
|
|
|
displayQuestion() {
|
|
if (this.currentIndex >= this.questions.length) return;
|
|
|
|
const question = this.questions[this.currentIndex];
|
|
|
|
let html = this.createQuestionHTML(question, this.currentIndex, this.questions.length);
|
|
html += this.createExamOptionsHTML(question.options);
|
|
|
|
document.getElementById('exam-question-container').innerHTML = html;
|
|
document.getElementById('question-progress').textContent = `${this.currentIndex + 1} de ${this.questions.length}`;
|
|
|
|
// Setup option click handlers
|
|
this.setupExamOptionHandlers(question);
|
|
|
|
this.updateExamNavigation();
|
|
if (this.navigator) {
|
|
this.navigator.setCurrentIndex(this.currentIndex);
|
|
}
|
|
}
|
|
|
|
setupExamOptionHandlers(question) {
|
|
const optionButtons = document.querySelectorAll('.option-enhanced');
|
|
optionButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
this.playSound('click');
|
|
optionButtons.forEach(btn => btn.classList.remove('selected'));
|
|
button.classList.add('selected');
|
|
|
|
const selectedAnswer = button.getAttribute('data-answer');
|
|
this.examAnswers[question.id] = selectedAnswer;
|
|
|
|
if (this.navigator) {
|
|
this.navigator.updateNavigator();
|
|
}
|
|
this.updateExamProgress();
|
|
});
|
|
});
|
|
|
|
// Pre-select if already answered
|
|
if (this.examAnswers[question.id]) {
|
|
const selectedButton = document.querySelector(`[data-answer="${this.examAnswers[question.id]}"]`);
|
|
if (selectedButton) {
|
|
selectedButton.classList.add('selected');
|
|
}
|
|
}
|
|
}
|
|
|
|
previousQuestion() {
|
|
if (this.currentIndex > 0) {
|
|
this.currentIndex--;
|
|
this.displayQuestion();
|
|
}
|
|
}
|
|
|
|
nextQuestion() {
|
|
if (this.currentIndex < this.questions.length - 1) {
|
|
this.currentIndex++;
|
|
this.displayQuestion();
|
|
}
|
|
}
|
|
|
|
updateExamNavigation() {
|
|
document.getElementById('prev-exam-btn').disabled = this.currentIndex === 0;
|
|
document.getElementById('next-exam-btn').disabled = this.currentIndex === this.questions.length - 1;
|
|
}
|
|
|
|
updateExamProgress() {
|
|
const answeredCount = Object.keys(this.examAnswers).length;
|
|
const remainingCount = this.questions.length - answeredCount;
|
|
|
|
document.getElementById('answered-count').textContent = answeredCount;
|
|
document.getElementById('remaining-count').textContent = remainingCount;
|
|
}
|
|
|
|
startTimer() {
|
|
const endTime = new Date(this.examStartTime.getTime() + this.examTimeLimit * 60000);
|
|
|
|
this.examTimer = setInterval(() => {
|
|
const now = new Date();
|
|
const timeLeft = endTime - now;
|
|
|
|
if (timeLeft <= 0) {
|
|
clearInterval(this.examTimer);
|
|
this.finishExam();
|
|
return;
|
|
}
|
|
|
|
const minutes = Math.floor(timeLeft / 60000);
|
|
const seconds = Math.floor((timeLeft % 60000) / 1000);
|
|
|
|
document.getElementById('timer').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
|
|
// Change color when time is running out
|
|
const timerElement = document.getElementById('timer');
|
|
if (minutes < 5) {
|
|
timerElement.classList.remove('text-warning');
|
|
timerElement.classList.add('text-danger');
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
showFinishConfirmation() {
|
|
const unansweredCount = this.questions.length - Object.keys(this.examAnswers).length;
|
|
document.getElementById('unanswered-warning').textContent = unansweredCount;
|
|
|
|
document.getElementById('confirmModal').style.display = 'block';
|
|
document.body.classList.add('modal-open');
|
|
}
|
|
|
|
hideConfirmModal() {
|
|
document.getElementById('confirmModal').style.display = 'none';
|
|
document.body.classList.remove('modal-open');
|
|
}
|
|
|
|
finishExam() {
|
|
clearInterval(this.examTimer);
|
|
|
|
let correct = 0;
|
|
let incorrect = 0;
|
|
let unanswered = 0;
|
|
|
|
this.questions.forEach(question => {
|
|
if (this.examAnswers.hasOwnProperty(question.id)) {
|
|
if (this.examAnswers[question.id] === question.correct) {
|
|
correct++;
|
|
} else {
|
|
incorrect++;
|
|
}
|
|
} else {
|
|
unanswered++;
|
|
}
|
|
});
|
|
|
|
const score = Math.round((correct / this.questions.length) * 100);
|
|
const passed = score >= 70; // 70% to pass
|
|
|
|
// Update global stats
|
|
if (window.statsManager) {
|
|
for (let i = 0; i < correct; i++) {
|
|
window.statsManager.updateStats(true);
|
|
}
|
|
for (let i = 0; i < incorrect; i++) {
|
|
window.statsManager.updateStats(false);
|
|
}
|
|
window.statsManager.updateExamScore(score);
|
|
}
|
|
|
|
// Show results
|
|
this.showExamResults(correct, incorrect, unanswered, score, passed);
|
|
}
|
|
|
|
showExamResults(correct, incorrect, unanswered, score, passed) {
|
|
document.getElementById('exam-correct').textContent = correct;
|
|
document.getElementById('exam-incorrect').textContent = incorrect;
|
|
document.getElementById('exam-unanswered').textContent = unanswered;
|
|
document.getElementById('exam-score').textContent = score + '%';
|
|
|
|
const progressBar = document.getElementById('exam-progress-bar');
|
|
progressBar.style.width = score + '%';
|
|
|
|
const resultIcon = document.getElementById('result-icon');
|
|
const resultTitle = document.getElementById('result-title');
|
|
const passMessage = document.getElementById('pass-message');
|
|
|
|
if (passed) {
|
|
progressBar.classList.remove('bg-danger');
|
|
progressBar.classList.add('bg-success');
|
|
resultIcon.innerHTML = '<i class="fas fa-trophy fa-4x text-success"></i>';
|
|
resultTitle.textContent = '¡Felicitaciones! Has Aprobado';
|
|
passMessage.classList.add('alert-success');
|
|
passMessage.textContent = 'Has obtenido una calificación aprobatoria. ¡Buen trabajo!';
|
|
passMessage.style.display = 'block';
|
|
|
|
if (window.Utils) {
|
|
Utils.createConfetti();
|
|
Utils.playSound('complete');
|
|
}
|
|
} else {
|
|
progressBar.classList.remove('bg-success');
|
|
progressBar.classList.add('bg-danger');
|
|
resultIcon.innerHTML = '<i class="fas fa-times-circle fa-4x text-danger"></i>';
|
|
resultTitle.textContent = 'Examen No Aprobado';
|
|
passMessage.classList.add('alert-danger');
|
|
passMessage.textContent = 'Necesitas al menos 70% para aprobar. ¡Sigue estudiando y vuelve a intentarlo!';
|
|
passMessage.style.display = 'block';
|
|
}
|
|
|
|
BaseModule.hide('exam-content');
|
|
BaseModule.show('exam-results');
|
|
}
|
|
|
|
resetExam() {
|
|
this.examAnswers = {};
|
|
this.currentIndex = 0;
|
|
clearInterval(this.examTimer);
|
|
|
|
BaseModule.hide('exam-results');
|
|
BaseModule.show('exam-setup');
|
|
}
|
|
|
|
createExamOptionsHTML(options) {
|
|
let html = '<div class="options-container">';
|
|
options.forEach((option, index) => {
|
|
const letter = String.fromCharCode(97 + index); // a, b, c, d
|
|
html += `
|
|
<button class="option-enhanced" data-answer="${letter}">
|
|
<div class="d-flex align-items-center">
|
|
<span class="badge bg-primary me-3">${letter.toUpperCase()}</span>
|
|
<span>${option.replace(/^[a-d]\)\s*/, '')}</span>
|
|
</div>
|
|
</button>
|
|
`;
|
|
});
|
|
html += '</div>';
|
|
return html;
|
|
}
|
|
|
|
showReviewMode() {
|
|
this.reviewIndex = 0;
|
|
this.setupReviewEventListeners();
|
|
this.displayReviewQuestion();
|
|
this.createReviewNavigator();
|
|
|
|
BaseModule.hide('exam-results');
|
|
BaseModule.show('exam-review');
|
|
}
|
|
|
|
setupReviewEventListeners() {
|
|
// Remove existing listeners to avoid duplicates
|
|
document.getElementById('prev-review-btn')?.removeEventListener('click', this.prevReviewHandler);
|
|
document.getElementById('next-review-btn')?.removeEventListener('click', this.nextReviewHandler);
|
|
document.getElementById('back-to-results')?.removeEventListener('click', this.backToResultsHandler);
|
|
|
|
// Create bound handlers
|
|
this.prevReviewHandler = () => this.previousReviewQuestion();
|
|
this.nextReviewHandler = () => this.nextReviewQuestion();
|
|
this.backToResultsHandler = () => this.backToResults();
|
|
|
|
// Add event listeners
|
|
document.getElementById('prev-review-btn')?.addEventListener('click', this.prevReviewHandler);
|
|
document.getElementById('next-review-btn')?.addEventListener('click', this.nextReviewHandler);
|
|
document.getElementById('back-to-results')?.addEventListener('click', this.backToResultsHandler);
|
|
}
|
|
|
|
displayReviewQuestion() {
|
|
if (this.reviewIndex >= this.questions.length) return;
|
|
|
|
const question = this.questions[this.reviewIndex];
|
|
const userAnswer = this.examAnswers[question.id];
|
|
const isCorrect = userAnswer === question.correct;
|
|
const wasAnswered = userAnswer !== undefined;
|
|
|
|
let html = `
|
|
<div class="question-card-enhanced fade-in">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="mb-0 text-gradient">Pregunta ${question.id}</h5>
|
|
<div>
|
|
<span class="badge bg-primary me-2">${this.reviewIndex + 1} de ${this.questions.length}</span>
|
|
${wasAnswered ?
|
|
(isCorrect ?
|
|
'<span class="badge bg-success"><i class="fas fa-check me-1"></i>Correcta</span>' :
|
|
'<span class="badge bg-danger"><i class="fas fa-times me-1"></i>Incorrecta</span>'
|
|
) :
|
|
'<span class="badge bg-secondary"><i class="fas fa-question me-1"></i>Sin responder</span>'
|
|
}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
if (question.has_image && question.image) {
|
|
html += `<img src="${question.image}" class="question-image" alt="Imagen de la pregunta">`;
|
|
}
|
|
|
|
html += `<p class="lead mb-4">${question.question}</p>`;
|
|
|
|
html += '<div class="options-container">';
|
|
question.options.forEach((option, index) => {
|
|
const letter = String.fromCharCode(97 + index); // a, b, c, d
|
|
const isUserAnswer = letter === userAnswer;
|
|
const isCorrectAnswer = letter === question.correct;
|
|
|
|
let optionClass = 'option-enhanced';
|
|
let badgeClass = 'bg-primary';
|
|
let iconHtml = '';
|
|
|
|
if (isCorrectAnswer) {
|
|
optionClass += ' correct';
|
|
badgeClass = 'bg-success';
|
|
iconHtml = '<i class="fas fa-check ms-2 text-success"></i>';
|
|
} else if (isUserAnswer && !isCorrect) {
|
|
optionClass += ' incorrect';
|
|
badgeClass = 'bg-danger';
|
|
iconHtml = '<i class="fas fa-times ms-2 text-danger"></i>';
|
|
} else if (isUserAnswer) {
|
|
optionClass += ' selected';
|
|
}
|
|
|
|
html += `
|
|
<div class="${optionClass}">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center">
|
|
<span class="badge ${badgeClass} me-3">${letter.toUpperCase()}</span>
|
|
<span>${option.replace(/^[a-d]\)\s*/, '')}</span>
|
|
</div>
|
|
${iconHtml}
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
html += '</div>';
|
|
|
|
// Add explanation if available
|
|
if (!wasAnswered) {
|
|
html += `
|
|
<div class="alert alert-warning mt-3">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
<strong>No respondida:</strong> Esta pregunta no fue respondida durante el examen.
|
|
</div>
|
|
`;
|
|
} else if (!isCorrect) {
|
|
html += `
|
|
<div class="alert alert-info mt-3">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>Tu respuesta:</strong> ${userAnswer?.toUpperCase()} |
|
|
<strong>Respuesta correcta:</strong> ${question.correct.toUpperCase()}
|
|
</div>
|
|
`;
|
|
} else {
|
|
html += `
|
|
<div class="alert alert-success mt-3">
|
|
<i class="fas fa-check-circle me-2"></i>
|
|
<strong>¡Correcto!</strong> Seleccionaste la respuesta correcta.
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += '</div>';
|
|
|
|
document.getElementById('review-question-container').innerHTML = html;
|
|
document.getElementById('review-progress').textContent = `${this.reviewIndex + 1} de ${this.questions.length}`;
|
|
|
|
this.updateReviewNavigation();
|
|
this.updateReviewStats();
|
|
}
|
|
|
|
createReviewNavigator() {
|
|
const navigator = document.getElementById('review-navigator');
|
|
let html = '';
|
|
|
|
this.questions.forEach((question, index) => {
|
|
const userAnswer = this.examAnswers[question.id];
|
|
const isCorrect = userAnswer === question.correct;
|
|
const wasAnswered = userAnswer !== undefined;
|
|
|
|
let buttonClass = 'btn btn-sm me-1 mb-1';
|
|
let iconHtml = '';
|
|
|
|
if (wasAnswered) {
|
|
if (isCorrect) {
|
|
buttonClass += ' btn-success';
|
|
iconHtml = '<i class="fas fa-check"></i>';
|
|
} else {
|
|
buttonClass += ' btn-danger';
|
|
iconHtml = '<i class="fas fa-times"></i>';
|
|
}
|
|
} else {
|
|
buttonClass += ' btn-secondary';
|
|
iconHtml = '<i class="fas fa-question"></i>';
|
|
}
|
|
|
|
if (index === this.reviewIndex) {
|
|
buttonClass += ' active';
|
|
}
|
|
|
|
html += `
|
|
<button class="${buttonClass}" data-review-index="${index}">
|
|
${index + 1} ${iconHtml}
|
|
</button>
|
|
`;
|
|
});
|
|
|
|
navigator.innerHTML = html;
|
|
|
|
// Add click handlers for navigator buttons
|
|
navigator.querySelectorAll('button[data-review-index]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
this.reviewIndex = parseInt(button.getAttribute('data-review-index'));
|
|
this.displayReviewQuestion();
|
|
this.createReviewNavigator();
|
|
});
|
|
});
|
|
}
|
|
|
|
updateReviewNavigation() {
|
|
document.getElementById('prev-review-btn').disabled = this.reviewIndex === 0;
|
|
document.getElementById('next-review-btn').disabled = this.reviewIndex === this.questions.length - 1;
|
|
}
|
|
|
|
updateReviewStats() {
|
|
let correct = 0, incorrect = 0, unanswered = 0;
|
|
|
|
this.questions.forEach(question => {
|
|
const userAnswer = this.examAnswers[question.id];
|
|
if (userAnswer === undefined) {
|
|
unanswered++;
|
|
} else if (userAnswer === question.correct) {
|
|
correct++;
|
|
} else {
|
|
incorrect++;
|
|
}
|
|
});
|
|
|
|
document.getElementById('review-correct-count').textContent = correct;
|
|
document.getElementById('review-incorrect-count').textContent = incorrect;
|
|
document.getElementById('review-unanswered-count').textContent = unanswered;
|
|
}
|
|
|
|
previousReviewQuestion() {
|
|
if (this.reviewIndex > 0) {
|
|
this.reviewIndex--;
|
|
this.displayReviewQuestion();
|
|
this.createReviewNavigator();
|
|
}
|
|
}
|
|
|
|
nextReviewQuestion() {
|
|
if (this.reviewIndex < this.questions.length - 1) {
|
|
this.reviewIndex++;
|
|
this.displayReviewQuestion();
|
|
this.createReviewNavigator();
|
|
}
|
|
}
|
|
|
|
backToResults() {
|
|
BaseModule.hide('exam-review');
|
|
BaseModule.show('exam-results');
|
|
}
|
|
|
|
handleKeyboard(e) {
|
|
// Handle keyboard shortcuts during exam
|
|
if (document.getElementById('exam-content') && document.getElementById('exam-content').style.display !== 'none') {
|
|
const key = e.key.toLowerCase();
|
|
|
|
// Handle option selection (a, b, c, d)
|
|
if (['a', 'b', 'c', 'd'].includes(key)) {
|
|
e.preventDefault();
|
|
const optionButton = document.querySelector(`.option-enhanced[data-answer="${key}"]`);
|
|
if (optionButton) {
|
|
// Remove previous selection
|
|
document.querySelectorAll('.option-enhanced').forEach(btn => btn.classList.remove('selected'));
|
|
|
|
// Select the new option
|
|
optionButton.classList.add('selected');
|
|
|
|
// Save the answer
|
|
const question = this.questions[this.currentIndex];
|
|
this.examAnswers[question.id] = key;
|
|
|
|
if (this.navigator) {
|
|
this.navigator.updateNavigator();
|
|
}
|
|
this.updateExamProgress();
|
|
this.playSound('click');
|
|
}
|
|
}
|
|
// Navigation keys
|
|
else if (e.key === 'ArrowLeft' && this.currentIndex > 0) {
|
|
this.previousQuestion();
|
|
} else if (e.key === 'ArrowRight' && this.currentIndex < this.questions.length - 1) {
|
|
this.nextQuestion();
|
|
}
|
|
}
|
|
// Handle keyboard shortcuts during review
|
|
else if (document.getElementById('exam-review') && document.getElementById('exam-review').style.display !== 'none') {
|
|
if (e.key === 'ArrowLeft' && this.reviewIndex > 0) {
|
|
this.previousReviewQuestion();
|
|
} else if (e.key === 'ArrowRight' && this.reviewIndex < this.questions.length - 1) {
|
|
this.nextReviewQuestion();
|
|
} else if (e.key === 'Escape') {
|
|
this.backToResults();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Auto-initialize when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (document.getElementById('exam-setup')) {
|
|
window.examMode = new ExamMode();
|
|
}
|
|
});
|
|
|
|
// Export for global use
|
|
window.ExamMode = ExamMode;
|