Spaces:
Running
Running
| <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> | |