Update index.html

index.html

@@ -105,7 +105,7 @@
             font-weight: bold;
         }
         
-        /* Prompt Display Styling (Same as Answer Box) */
+        /* Prompt Display Styling */
         #prompt-display-container {
             margin-top: 20px;
         }
@@ -121,7 +121,7 @@
             box-sizing: border-box;
             white-space: pre-wrap;
             word-wrap: break-word;
-            font-family: monospace; /* Typewriter feel */
+            font-family: monospace;
         }
 
         .cursor {
@@ -164,6 +164,9 @@
             border: none;
             background-color: transparent;
         }
+        #tailored-plan-options {
+             display: none; /* Initially hidden, controlled by JS */
+        }
 
         @media (max-width: 480px) {
             .container { padding: 20px; border-radius: 12px; }
@@ -179,12 +182,24 @@
 
         <form id="prompt-form">
             <div class="section">
-                <label for="combined-input-box">1. Grade, Subject, Board & Topic (Input)</label>
-                <textarea id="combined-input-box" placeholder="e.g., Grade 8, Science, Punjab Board, Topic: Gravity and Motion"></textarea>
+                <label for="combined-input-box">1. Grade, Subject & Topic (Input)</label>
+                <textarea id="combined-input-box" placeholder="e.g., Grade 8, Science, Topic: Gravity and Motion"></textarea>
+            </div>
+            
+            <div class="section">
+                <label for="board-select">2. Select Curriculum / Board</label>
+                <select id="board-select">
+                    <option value="Punjab Textbook Board">Punjab Textbook Board</option>
+                    <option value="Sindh Textbook Board">Sindh Textbook Board</option>
+                    <option value="Federal Board">Federal Board</option>
+                    <option value="Agha Khan Board">Agha Khan Board</option>
+                    <option value="Cambridge (O/A Level)">Cambridge (O/A Level)</option>
+                    <option value="Self-designed">Self-designed</option>
+                </select>
             </div>
             
             <div class="section">
-                <label for="plan-type-select">2. Select Plan Type</label>
+                <label for="plan-type-select">3. Select Plan Type</label>
                 <select id="plan-type-select">
                     <option value="Daily Lesson Plan">Daily Lesson Plan</option>
                     <option value="Weekly Plan">Weekly Plan</option>
@@ -208,7 +223,7 @@
             </div>
 
             <div class="section">
-                <label for="sessions-select">3. Sessions Per Week</label>
+                <label for="sessions-select">4. Sessions Per Week</label>
                 <select id="sessions-select">
                     <option value="1">1</option>
                     <option value="2">2</option>
@@ -220,7 +235,7 @@
             </div>
 
             <div class="section">
-                <label for="duration-select">4. Session Duration (Minutes)</label>
+                <label for="duration-select">5. Session Duration (Minutes)</label>
                 <select id="duration-select">
                     <option value="30">30 minutes</option>
                     <option value="40" selected>40 minutes</option>
@@ -230,7 +245,7 @@
             </div>
 
             <div class="section">
-                <label for="profile-select">5. Student Profile</label>
+                <label for="profile-select">6. Student Profile</label>
                 <select id="profile-select">
                     <option value="Beginner">Beginner</option>
                     <option value="Average" selected>Average</option>
@@ -250,8 +265,9 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // Updated IDs to match the new HTML structure
+            // Get all necessary elements
             const combinedInput = document.getElementById('combined-input-box');
+            const boardSelect = document.getElementById('board-select');
             const planTypeSelect = document.getElementById('plan-type-select');
             const tailoredPlanOptions = document.getElementById('tailored-plan-options');
             const unitInput = document.getElementById('unit-input');
@@ -268,6 +284,7 @@
             // --- PROMPT GENERATION LOGIC ---
             function generatePromptText() {
                 const combined = combinedInput.value.trim();
+                const board = boardSelect.value;
                 const planType = planTypeSelect.value;
                 const sessions = sessionsSelect.value;
                 const duration = durationSelect.value;
@@ -276,11 +293,11 @@
                 const week = weekInput.value.trim();
                 
                 if (!combined) {
-                    return "Please enter Grade, Subject, Board, and Topic in the box above to generate the prompt.";
+                    return "Please enter Grade, Subject, and Topic in the box above to generate the prompt.";
                 }
 
                 // Construct the base prompt using the combined input
-                let prompt = `Using the following details: "${combined}". Generate a comprehensive ${planType}. The student profile is ${profile}. The plan should accommodate ${sessions} sessions per week, with each session lasting ${duration} minutes.`;
+                let prompt = `Generate a comprehensive ${planType} for a class with the following details: "${combined}". The curriculum should follow the ${board}. The student profile is ${profile}. The plan should accommodate ${sessions} sessions per week, with each session lasting ${duration} minutes.`;
                 
                 // Add optional details based on plan type selection
                 if (planType === 'Weekly Plan' || planType === 'Daily Lesson Plan') {
@@ -327,7 +344,7 @@
             }
 
             // --- EVENT LISTENERS ---
-            const allInputs = [combinedInput, planTypeSelect, sessionsSelect, durationSelect, profileSelect, unitInput, weekInput];
+            const allInputs = [combinedInput, boardSelect, planTypeSelect, sessionsSelect, durationSelect, profileSelect, unitInput, weekInput];
             
             planTypeSelect.addEventListener('change', toggleTailoredOptions);