Kindly add assignment details which are "Course Name" and "Assignment Number" in the same div container beside student information to the right side - Follow Up Deployment

index.html

@@ -60,7 +60,7 @@
             <!-- Student Info Form -->
             <div id="studentInfoForm" class="mb-8">
                 <h2 class="text-xl font-semibold mb-4">Student Information</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                     <div>
                         <label for="rollNumber" class="block text-sm font-medium text-gray-700 mb-1">Roll Number</label>
                         <input type="text" id="rollNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
@@ -69,6 +69,16 @@
                         <label for="studentName" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                         <input type="text" id="studentName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label for="courseName" class="block text-sm font-medium text-gray-700 mb-1">Course Name</label>
+                            <input type="text" id="courseName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label for="assignmentNumber" class="block text-sm font-medium text-gray-700 mb-1">Assignment #</label>
+                            <input type="text" id="assignmentNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                    </div>
                 </div>
                 <button id="startAssignmentBtn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Start Assignment</button>
             </div>
@@ -126,8 +136,8 @@
                 </div>
 
                 <div id="studentInfoDisplay" class="mt-6 p-4 bg-gray-100 rounded-md">
-                    <h3 class="font-medium mb-2">Student Information (Locked)</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <h3 class="font-medium mb-2">Submission Information (Locked)</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                         <div>
                             <p class="text-sm text-gray-600">Roll Number</p>
                             <p id="displayRollNumber" class="font-medium"></p>
@@ -136,6 +146,16 @@
                             <p class="text-sm text-gray-600">Full Name</p>
                             <p id="displayStudentName" class="font-medium"></p>
                         </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <p class="text-sm text-gray-600">Course Name</p>
+                                <p id="displayCourseName" class="font-medium"></p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-600">Assignment #</p>
+                                <p id="displayAssignmentNumber" class="font-medium"></p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -214,9 +234,13 @@
         const assignmentArea = document.getElementById('assignmentArea');
         const rollNumberInput = document.getElementById('rollNumber');
         const studentNameInput = document.getElementById('studentName');
+        const courseNameInput = document.getElementById('courseName');
+        const assignmentNumberInput = document.getElementById('assignmentNumber');
         const startAssignmentBtn = document.getElementById('startAssignmentBtn');
         const displayRollNumber = document.getElementById('displayRollNumber');
         const displayStudentName = document.getElementById('displayStudentName');
+        const displayCourseName = document.getElementById('displayCourseName');
+        const displayAssignmentNumber = document.getElementById('displayAssignmentNumber');
         const languageSelect = document.getElementById('languageSelect');
         const charCount = document.getElementById('charCount');
         const submitAssignmentBtn = document.getElementById('submitAssignmentBtn');
@@ -323,9 +347,11 @@
             startAssignmentBtn.addEventListener('click', () => {
                 const rollNumber = rollNumberInput.value.trim();
                 const studentName = studentNameInput.value.trim();
+                const courseName = courseNameInput.value.trim();
+                const assignmentNumber = assignmentNumberInput.value.trim();
                 
-                if (!rollNumber || !studentName) {
-                    alert('Please enter both roll number and name');
+                if (!rollNumber || !studentName || !courseName || !assignmentNumber) {
+                    alert('Please fill in all required fields');
                     return;
                 }
                 
@@ -333,6 +359,8 @@
                 studentInfoLocked = true;
                 displayRollNumber.textContent = rollNumber;
                 displayStudentName.textContent = studentName;
+                displayCourseName.textContent = courseName;
+                displayAssignmentNumber.textContent = assignmentNumber;
                 studentInfoForm.classList.add('hidden');
                 assignmentArea.classList.remove('hidden');
                 
@@ -449,6 +477,8 @@
             const assignmentData = {
                 rollNumber: displayRollNumber.textContent,
                 studentName: displayStudentName.textContent,
+                courseName: displayCourseName.textContent,
+                assignmentNumber: displayAssignmentNumber.textContent,
                 language: languageSelect.value,
                 content: editor.getValue(),
                 prompt: document.getElementById('assignmentPrompt').textContent,
@@ -583,6 +613,8 @@
         function displayAssignment(assignmentData) {
             submissionRollNumber.textContent = assignmentData.rollNumber;
             submissionStudentName.textContent = assignmentData.studentName;
+            submissionCourseName.textContent = assignmentData.courseName || 'N/A';
+            submissionAssignmentNumber.textContent = assignmentData.assignmentNumber || 'N/A';
             submissionPrompt.textContent = assignmentData.prompt;
             submissionContent.textContent = assignmentData.content;
             submissionCharCount.textContent = assignmentData.content.length;