Mobile Answer Sheet Capture¶
Learners upload physical-exam answer sheets from their phones: snap each page with the camera, compress it client-side, and upload all pages in one batch. This is the learner side of offline exam grading, aimed at low-connectivity schools where phones are the primary device. The current upload page is desktop-shaped (drag-and-drop plus a file picker, single file, no compression), so this work adds the mobile capture path.
How it works¶
On mobile the upload page shows two buttons: Take Photo and Browse Files. Take Photo opens the device camera through <input capture="environment">, the HTML standard that works on Android Chrome and iOS Safari without a native plugin. On desktop the existing drag-and-drop zone stays.
Each photo is compressed client-side to roughly 500 KB / 1200px longest edge (JPEG preserved) via browser-image-compression before upload. A mid-range phone camera produces 4-8 MB JPEGs; on a 2G connection an 8 MB file takes minutes, while 500 KB takes seconds, and the quality loss is negligible for high-contrast handwritten text.
Uploads are multi-file with per-file progress. Answer booklets run 2-8 pages, so the page accepts multiple files and shows a progress card per file (name, thumbnail, upload %, remove button). Each file uploads independently, so a failure on page 3 does not lose pages 1-2. The backend stitches the separate page images; the browser does not combine them into a PDF. PDFs from a scanner already work and are unchanged.
Out of scope here: OCR roll-number detection (a trainer-side grading feature) and offline upload queuing.
Where it lives¶
Routes: /my-exams, /my-exams/:examId/upload.
apps/web/src/pages/learner/MyPhysicalExamUploadPage/index.tsx: the upload pageapps/web/src/pages/learner/MyPhysicalExamsPage/index.tsx: exam listapps/web/src/services/physical-exams.ts:uploadMyAnswerSheet(examId, file)API