File size: 8,666 Bytes
5888c6a 43ac838 e0d9bb9 5888c6a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 |
document.addEventListener('DOMContentLoaded', function() {
// Elements
const form = document.getElementById('evaluation-form');
const evaluateBtn = document.getElementById('evaluate-btn');
const newEvaluationBtn = document.getElementById('new-evaluation-btn');
const uploadSection = document.querySelector('.upload-section');
const resultsSection = document.querySelector('.results-section');
const loadingOverlay = document.querySelector('.loading-overlay');
const loadingStep = document.getElementById('loading-step');
const flowSteps = document.querySelectorAll('.flow-step');
// File upload areas
setupFileUpload('question');
setupFileUpload('student');
setupFileUpload('reference');
// Check if all files are uploaded to enable the evaluate button
function checkAllUploaded() {
const questionPreview = document.getElementById('question-preview');
const studentPreview = document.getElementById('student-preview');
const referencePreview = document.getElementById('reference-preview');
if (questionPreview.style.display === 'block' &&
studentPreview.style.display === 'block' &&
referencePreview.style.display === 'block') {
evaluateBtn.disabled = false;
} else {
evaluateBtn.disabled = true;
}
}
// Setup file upload functionality
function setupFileUpload(type) {
const uploadArea = document.getElementById(`${type}-upload`);
const fileInput = document.getElementById(`${type}-input`);
const preview = document.getElementById(`${type}-preview`);
// Click to upload
uploadArea.addEventListener('click', () => {
fileInput.click();
});
// Drag and drop
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.classList.add('drag-over');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('drag-over');
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.classList.remove('drag-over');
if (e.dataTransfer.files.length) {
fileInput.files = e.dataTransfer.files;
handleFileSelect(fileInput, preview, uploadArea);
}
});
// File input change
fileInput.addEventListener('change', () => {
handleFileSelect(fileInput, preview, uploadArea);
});
}
// Handle file selection
function handleFileSelect(fileInput, preview, uploadArea) {
if (fileInput.files && fileInput.files[0]) {
const file = fileInput.files[0];
// Check file type
const fileType = file.type;
if (fileType !== 'image/jpeg' && fileType !== 'image/png' && fileType !== 'image/jpg') {
alert('Please upload an image file (JPEG, JPG or PNG)');
return;
}
// Display preview
const reader = new FileReader();
reader.onload = function(e) {
preview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
preview.style.display = 'block';
uploadArea.style.display = 'none';
checkAllUploaded();
};
reader.readAsDataURL(file);
}
}
// Form submission
form.addEventListener('submit', function(e) {
e.preventDefault();
// Show loading overlay
loadingOverlay.style.display = 'flex';
updateFlowStep(0); // Upload step
const formData = new FormData(form);
// Ensure files are included (debugging)
console.log("Files being sent:");
console.log("Question file:", formData.get('question'));
console.log("Student answer file:", formData.get('student_answer'));
console.log("Reference answer file:", formData.get('reference_answer'));
// Simulate the processing steps with delays for better UX
setTimeout(() => {
loadingStep.textContent = 'Preprocessing images...';
updateFlowStep(1); // Preprocessing step
setTimeout(() => {
loadingStep.textContent = 'Evaluating answer...';
updateFlowStep(2); // Evaluating step
// Send data to server
fetch('/evaluate', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
if (data.error) {
throw new Error(data.error);
}
// Update score
updateScore(data.score);
// Hide loading and show results
loadingOverlay.style.display = 'none';
uploadSection.style.display = 'none';
resultsSection.style.display = 'block';
updateFlowStep(3); // Score step
})
.catch(error => {
alert('Error: ' + error.message);
loadingOverlay.style.display = 'none';
});
}, 1500);
}, 1500);
});
// Update the flow step indicators
function updateFlowStep(activeIndex) {
flowSteps.forEach((step, index) => {
if (index < activeIndex) {
step.classList.remove('active');
step.classList.add('completed');
} else if (index === activeIndex) {
step.classList.add('active');
step.classList.remove('completed');
} else {
step.classList.remove('active', 'completed');
}
});
}
// Update score display
function updateScore(score) {
const scoreValue = document.getElementById('score-value');
const scoreProgress = document.querySelector('.score-progress');
const scoreMessage = document.getElementById('score-message');
// Convert score to percentage if it's a decimal
const scorePercent = score <= 1 ? Math.round(score * 100) : score;
// Update score text
scoreValue.textContent = `${scorePercent}%`;
// Update circle progress
const circumference = 2 * Math.PI * 90; // 2πr where r=90
const offset = circumference - (scorePercent / 100) * circumference;
scoreProgress.style.strokeDashoffset = offset;
// Set color based on score
if (scorePercent >= 80) {
scoreProgress.style.stroke = '#28a745'; // Success
scoreMessage.textContent = 'Excellent! The answer matches the reference very well.';
} else if (scorePercent >= 60) {
scoreProgress.style.stroke = '#17a2b8'; // Info
scoreMessage.textContent = 'Good job! The answer is quite similar to the reference.';
} else if (scorePercent >= 40) {
scoreProgress.style.stroke = '#ffc107'; // Warning
scoreMessage.textContent = 'Average match. There is room for improvement.';
} else {
scoreProgress.style.stroke = '#dc3545'; // Danger
scoreMessage.textContent = 'The answer differs significantly from the reference.';
}
}
// New evaluation button
newEvaluationBtn.addEventListener('click', function() {
// Reset form
form.reset();
// Reset previews
document.querySelectorAll('.preview').forEach(preview => {
preview.style.display = 'none';
preview.innerHTML = '';
});
// Show upload areas
document.querySelectorAll('.upload-area').forEach(area => {
area.style.display = 'block';
});
// Reset flow steps
updateFlowStep(0);
// Show upload section, hide results
uploadSection.style.display = 'block';
resultsSection.style.display = 'none';
// Disable evaluate button
evaluateBtn.disabled = true;
});
}); |