Added Student ID converter

Author: CalebHendren

README.md

@@ -9,7 +9,7 @@ This program simply adds a new page to the backs of multiple choice scanforms fo
 **Example Input and Output files:**  
 [https://github.com/CalebHendren/zipmerge/tree/master/Example](https://github.com/CalebHendren/zipmerge/tree/master/Example)
 
-## Usage
+## Bubble Sheet + Written Sheet Merger Usage
 
 > **Note:** Step 1 is optional if you don't want student names and other information pre-printed on the sheets, but at that point, you may as well just merge the two single-page PDF files manually in Adobe Acrobat. But you can still use this if you don't like dealing with Acrobat (my hatred of Acrobat is what prompted me to make this).
 
@@ -31,10 +31,14 @@ Take your Answer Sheet Packets from ZipGrade and the Written Sheet PDF that you
 2. Select the Written Sheet as the **Written Answer Sheet**
 3. Click **Merge**
 
-## Upcoming Features
+## Student ID Processor for ZipGrade Usage
 
-### Accept Microsoft Word documents for the Written Answer Sheet to avoid the conversion to PDF. 
-The issue is that after being uploaded, they will have to be converted into HTML then into a PDF because I cannot find a way to directly convert into a PDF in a way that can be done 100% in the browser.
+This tool converts student IDs from the format `#A00123456` to a ZipGrade-compatible numeric format `123456` by removing the unnecessary `#A00`.
 
-### Process student IDs to make them ZipGrade compatable
-ZipGrade only accepts numbers in the student ID field. When exported from Brightspace, they are in the format #A00123456. ZipGrade can automatically assign random numbers as IDs, but if you would rather use their actual IDs, I plan to add a way to automatically cut off the unnecessary "#A00" and keep the "123456." In the mean time, this can be done quickly in Excel using the formula =RIGHT(A2, LEN(A2) - 4) and dragging the fill handle down.
+### Steps:
+1.  **Prepare your CSV File:** Export your student roster from your LMS as a CSV file. Student IDs should be in the first column.
+2.  **Go to the Website:** Navigate to [https://calebhendren.github.io/zipmerge/](https://calebhendren.github.io/zipmerge/).
+3.  **Locate the ID Processor:** Scroll down to the "Student ID Processor for ZipGrade" section.
+4.  **Upload CSV:** Click "Choose File" under "Student IDs CSV File (.csv only)" and select your CSV file.
+5.  **Process IDs:** Click the "Process IDs" button.
+6.  **Download:** The processed CSV file (e.g., `yourfile_processed_IDs.csv`) will be automatically downloaded by your browser. You can then import this file into ZipGrade as part of Step 1 in the above section.

index.html

@@ -222,6 +222,23 @@ <h1>Bubble Sheet + Written Sheet Merger</h1>
     <div id="status" class="status"></div>
 </div>
 
+<div class="container" style="margin-top: 40px;">
+    <h1>Student ID Processor for ZipGrade</h1>
+    <p class="subtitle" style="font-size: 0.9em; color: var(--comment);">
+        Converts eLearn IDs (e.g., #A00123456) to ZipGrade compatible IDs (e.g., 123456).
+        <br>Processes the first column of a CSV file.
+    </p>
+
+    <div class="input-group">
+        <label for="studentIdFile">Student IDs CSV File (.csv only):</label>
+        <input type="file" id="studentIdFile" accept=".csv">
+        <div id="studentIdFileInfo" class="file-info">No file selected</div>
+    </div>
+
+    <button id="processIdsBtn" onclick="processStudentIds()">Process IDs</button>
+    <div id="idStatus" class="status"></div>
+</div>
+
 <script>
     document.getElementById('sheetPack').addEventListener('change', function(e) {
         updateFileInfo(e, 'sheetPackInfo');
@@ -330,6 +347,119 @@ <h1>Bubble Sheet + Written Sheet Merger</h1>
             processBtn.disabled = false;
         }
     }
+
+    // For Student ID Processor
+    const studentIdFileInput = document.getElementById('studentIdFile');
+    const processIdsButtonElement = document.getElementById('processIdsBtn');
+
+    if (studentIdFileInput) {
+        studentIdFileInput.addEventListener('change', function(e) {
+            updateFileInfo(e, 'studentIdFileInfo'); // Reuses existing updateFileInfo
+            toggleProcessIdsButtonState();
+        });
+    }
+
+    function toggleProcessIdsButtonState() {
+        if (processIdsButtonElement && studentIdFileInput) {
+            processIdsButtonElement.disabled = studentIdFileInput.files.length === 0;
+        }
+    }
+
+    function formatStudentIdCore(idString) {
+        let currentId = idString.trim();
+        if (currentId.startsWith("#A00")) {
+            currentId = currentId.substring(4);
+        }
+        return currentId.replace(/\D/g, ''); // Return only digits
+    }
+
+    async function processStudentIds() {
+        const statusElement = document.getElementById('idStatus');
+        const processBtn = document.getElementById('processIdsBtn'); // processIdsButtonElement can be used here too
+        // const studentIdFileElement = document.getElementById('studentIdFile'); // Already studentIdFileInput
+
+        statusElement.textContent = 'Processing IDs...';
+        statusElement.className = 'status'; // Reset status style
+        processBtn.disabled = true;
+
+        try {
+            const csvFile = studentIdFileInput.files[0];
+            if (!csvFile) {
+                throw new Error("No CSV file selected.");
+            }
+
+            const originalName = csvFile.name.replace(/\.csv$/i, '');
+            const outputFilename = `${originalName}_processed_IDs.csv`;
+
+            const fileContent = await csvFile.text();
+            const lines = fileContent.split(/\r\n|\r|\n/);
+            const processedLines = [];
+
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+
+                if (line.trim() === '') {
+                    if (i === lines.length - 1 && processedLines.length > 0 && processedLines[processedLines.length-1].trim() === '') {
+                        continue;
+                    } else if (i === lines.length -1 && lines.length > 1) {
+                        continue;
+                    } else if (lines.length === 1) {
+                         processedLines.push('');
+                         continue;
+                    } else if (i < lines.length -1 ) {
+                         processedLines.push('');
+                         continue;
+                    }
+                }
+
+
+                const columns = line.split(','); // Simple CSV split
+                let firstColumnValue = columns[0];
+                let processedFirstColumn;
+
+                if (i === 0) { // Header row: try to preserve text headers
+                    const formattedHeaderCell = formatStudentIdCore(firstColumnValue);
+                    if (/[a-zA-Z]/.test(firstColumnValue) && 
+                        (formattedHeaderCell === "" || (/^\d+$/.test(formattedHeaderCell) && firstColumnValue.trim() !== formattedHeaderCell))) {
+                        processedFirstColumn = firstColumnValue; 
+                    } else {
+                        processedFirstColumn = formattedHeaderCell;
+                    }
+                } else { // Data rows: always apply formatting
+                    processedFirstColumn = formatStudentIdCore(firstColumnValue);
+                }
+
+                if (columns.length > 1) {
+                    columns[0] = processedFirstColumn;
+                    processedLines.push(columns.join(','));
+                } else {
+                    processedLines.push(processedFirstColumn);
+                }
+            }
+
+            while (processedLines.length > 0 && processedLines[processedLines.length - 1].trim() === "") {
+                processedLines.pop();
+            }
+
+            const processedCsvContent = processedLines.join('\n');
+            download(new Blob([processedCsvContent], { type: 'text/csv;charset=utf-8;' }), outputFilename, "text/csv");
+
+            statusElement.textContent = `Success! Processed IDs saved as ${outputFilename}`;
+            statusElement.className = 'status success';
+
+        } catch (error) {
+            console.error("Error processing student IDs:", error);
+            statusElement.textContent = `Error: ${error.message}`;
+            statusElement.className = 'status error';
+        } finally {
+            processBtn.disabled = false;
+        }
+    }
+
+    toggleProcessButton(); 
+    if (document.getElementById('processIdsBtn')) {
+        toggleProcessIdsButtonState();
+    }
 </script>
 </body>
 </html>