Spaces:
Running
Running
File size: 10,431 Bytes
c001f24 |
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 |
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enter Question Details</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="card bg-dark text-white">
<div class="card-header">
<h2>Step 3: Enter Question Details</h2>
</div>
<div class="card-body">
<form id="questions-form">
<!-- NEW: Same Subject Toggle -->
<div class="form-check form-switch mb-4">
<input class="form-check-input" type="checkbox" role="switch" id="same-subject-toggle">
<label class="form-check-label" for="same-subject-toggle">Same Subject for All</label>
</div>
{% for image in images %}
<div class="row mb-4 border-bottom pb-3">
<div class="col-md-3">
<img src="/image/processed/{{ image.processed_filename or image.filename }}" class="img-fluid rounded">
</div>
<div class="col-md-9">
<h5>{{ image.original_name }}</h5>
<div class="row">
<div class="col-md-6 mb-2">
<label class="form-label">Question Number</label>
<input type="number" class="form-control" name="question_number_{{ loop.index0 }}" required>
</div>
<div class="col-md-6 mb-2">
<label class="form-label">Subject</label>
<input type="text" class="form-control subject-input" name="subject_{{ loop.index0 }}" data-index="{{ loop.index0 }}">
</div>
<div class="col-md-6 mb-2">
<label class="form-label">Your Answer</label>
<input type="text" class="form-control" name="marked_solution_{{ loop.index0 }}">
</div>
<div class="col-md-6 mb-2">
<label class="form-label">Correct Answer</label>
<input type="text" class="form-control" name="actual_solution_{{ loop.index0 }}">
</div>
<div class="col-md-6 mb-2">
<label class="form-label">Status</label>
<select class="form-select" name="status_{{ loop.index0 }}">
<option value="correct">Correct</option>
<option value="wrong">Wrong</option>
<option value="unattempted">Unattempted</option>
</select>
</div>
<!-- MODIFIED: Time Taken with Disable Checkbox -->
<div class="col-md-6 mb-2">
<label class="form-label">Time Taken (s)</label>
<div class="input-group">
<input type="number" class="form-control time-input" name="time_taken_{{ loop.index0 }}" data-index="{{ loop.index0 }}">
<div class="input-group-text">
<input class="form-check-input mt-0 disable-time-cb" type="checkbox" title="Disable Time" data-index="{{ loop.index0 }}">
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<hr>
<h4>Generate PDF</h4>
<div class="row">
<div class="col-md-4 mb-2">
<label class="form-label">PDF Name</label>
<input type="text" id="pdf_name" class="form-control" value="My-Test-Analysis">
</div>
<div class="col-md-4 mb-2">
<label class="form-label">Images per Page</label>
<select id="images_per_page" class="form-select">
<option value="1">1</option> <option value="2">2</option>
<option value="4" selected>4</option> <option value="6">6</option>
<option value="8">8</option>
</select>
</div>
<div class="col-md-4 mb-2">
<label class="form-label">Filter Questions</label>
<select id="filter_type" class="form-select">
<option value="all">All Questions</option>
<option value="wrong">Wrong Only</option>
<option value="unattempted">Unattempted Only</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary w-100 mt-3">Generate PDF</button>
</form>
<div id="status" class="mt-3"></div>
</div>
</div>
</div>
<script>
const numImages = {{ images|length }};
const subjectInputs = document.querySelectorAll('.subject-input');
// --- Logic for "Same Subject for All" ---
document.getElementById('same-subject-toggle').addEventListener('change', function() {
const isChecked = this.checked;
subjectInputs.forEach((input, index) => {
if (index > 0) { // All subjects except the first one
input.disabled = isChecked;
if(isChecked) {
input.value = subjectInputs[0].value; // Sync with the first
}
}
});
});
if(subjectInputs.length > 0){
subjectInputs[0].addEventListener('input', function() {
if (document.getElementById('same-subject-toggle').checked) {
const firstSubjectValue = this.value;
subjectInputs.forEach((input, index) => {
if (index > 0) {
input.value = firstSubjectValue;
}
});
}
});
}
// --- Logic for "Disable Time" Checkboxes ---
document.querySelectorAll('.disable-time-cb').forEach(checkbox => {
checkbox.addEventListener('change', function() {
const index = this.dataset.index;
const timeInput = document.querySelector(`.time-input[data-index='${index}']`);
timeInput.disabled = this.checked;
if(this.checked) timeInput.value = '';
});
});
// --- Form Submission Logic ---
document.getElementById('questions-form').addEventListener('submit', async function(e) {
e.preventDefault();
const statusDiv = document.getElementById('status');
statusDiv.innerHTML = `<div class="alert alert-info">Saving data and generating PDF...</div>`;
const questions = [];
for (let i = 0; i < numImages; i++) {
const timeInput = document.querySelector(`input[name='time_taken_${i}']`);
const isTimeDisabled = document.querySelector(`.disable-time-cb[data-index='${i}']`).checked;
questions.push({
question_number: document.querySelector(`input[name='question_number_${i}']`).value,
subject: document.querySelector(`input[name='subject_${i}']`).value,
status: document.querySelector(`select[name='status_${i}']`).value,
marked_solution: document.querySelector(`input[name='marked_solution_${i}']`).value,
actual_solution: document.querySelector(`input[name='actual_solution_${i}']`).value,
time_taken: isTimeDisabled ? 'x' : timeInput.value // Send 'x' if disabled
});
}
const sessionId = '{{ session_id }}';
// 1. Save questions data
await fetch('/save_questions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ session_id: sessionId, questions: questions })
});
// 2. Generate PDF
const pdfResponse = await fetch('/generate_pdf', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
session_id: sessionId,
pdf_name: document.getElementById('pdf_name').value,
images_per_page: parseInt(document.getElementById('images_per_page').value),
filter_type: document.getElementById('filter_type').value
})
});
const result = await pdfResponse.json();
if (result.error) {
statusDiv.innerHTML = `<div class="alert alert-danger">${result.error}</div>`;
} else {
statusDiv.innerHTML = `
<div class="alert alert-success">PDF generated successfully!</div>
<a href="/download/${result.pdf_filename}" class="btn btn-success w-100">Download PDF</a>
`;
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
|