Update app.py

app.py

@@ -698,40 +698,44 @@ with gr.Blocks(title="UNEB Exam Prep - Primary 6 & 7", theme=gr.themes.Soft(), c
         return f"Welcome, {session.student_name}!"
     
     student_name_input.change(update_student_name, student_name_input, None)
+    
+    # Grade, Subject, Topic selection (shared across all tabs)
+    with gr.Group():
+        gr.Markdown("### Choose Your Topic")
+        with gr.Row():
+            grade_select = gr.Dropdown(
+                choices=["Primary 6", "Primary 7"],
+                label="Grade Level",
+                value="Primary 7"
+            )
+            subject_select = gr.Dropdown(
+                choices=["Mathematics", "English", "Social Studies", "Science"],
+                label="Subject",
+                value="Mathematics"
+            )
+            topic_select = gr.Dropdown(
+                label="Topic",
+                choices=syllabus_topics["Primary 7"]["Mathematics"],
+                value=syllabus_topics["Primary 7"]["Mathematics"][0]
+            )
+        
+        # Update topics when grade or subject changes
+        def update_topics_shared(grade, subject):
+            topics = syllabus_topics.get(grade, {}).get(subject, [])
+            if not topics:
+                topics = ["General - " + subject]
+            return gr.Dropdown(choices=topics, value=topics[0])
+        
+        grade_select.change(update_topics_shared, [grade_select, subject_select], topic_select)
+        subject_select.change(update_topics_shared, [grade_select, subject_select], topic_select)
+    
     # Shared question display (placed below name and above the tabs to avoid large empty header)
     questions_display = gr.HTML(value="", elem_classes="question-display")
 
     with gr.Tabs():
         # ===== TAB 1: GENERATE QUESTIONS =====
         with gr.Tab("1️⃣ Generate Questions"):
-            gr.Markdown("### Step 1: Generate Practice Questions\n\nChoose the Grade, Subject and Topic, then set the Number of Questions (1–100).")
-            
-            with gr.Row():
-                grade_input = gr.Dropdown(
-                    choices=["Primary 6", "Primary 7"],
-                    label="Grade Level",
-                    value="Primary 7"
-                )
-                subject_input = gr.Dropdown(
-                    choices=["Mathematics", "English", "Social Studies", "Science"],
-                    label="Subject",
-                    value="Mathematics"
-                )
-                topic_input = gr.Dropdown(
-                    label="Topic",
-                    choices=syllabus_topics["Primary 7"]["Mathematics"],
-                    value=syllabus_topics["Primary 7"]["Mathematics"][0]
-                )
-            
-            # Update topics when grade or subject changes
-            def update_topics(grade, subject):
-                topics = syllabus_topics.get(grade, {}).get(subject, [])
-                if not topics:
-                    topics = ["General - " + subject]
-                return gr.Dropdown(choices=topics, value=topics[0])
-            
-            grade_input.change(update_topics, [grade_input, subject_input], topic_input)
-            subject_input.change(update_topics, [grade_input, subject_input], topic_input)
+            gr.Markdown("### Step 1: Generate Practice Questions\n\nSet the Number of Questions (1–100) and click Generate.")
             
             with gr.Row():
                 num_questions_input = gr.Slider(minimum=1, maximum=100, step=1, value=20, label="Number of Questions")
@@ -769,7 +773,7 @@ with gr.Blocks(title="UNEB Exam Prep - Primary 6 & 7", theme=gr.themes.Soft(), c
             
             generate_btn.click(
                 fn=generate_and_display,
-                inputs=[grade_input, subject_input, topic_input, num_questions_input],
+                inputs=[grade_select, subject_select, topic_select, num_questions_input],
                 outputs=[questions_display, questions_state, status_output]
             )            
             # Download handler - returns file path for gr.DownloadButton
@@ -799,55 +803,50 @@ with gr.Blocks(title="UNEB Exam Prep - Primary 6 & 7", theme=gr.themes.Soft(), c
             gr.Markdown("### Step 2: Answer the Questions")
             gr.Markdown("Write out your working and answers. You can use any of the three methods below.")
 
-            # Two-column layout: left = questions, right = answer methods
+            gr.Markdown("**Note:** Questions are displayed above. Scroll up to see them while answering.")
+            
             with gr.Row():
-                with gr.Column(scale=6):
-                    gr.Markdown("**Questions (keep visible while answering)**")
-                    # show the same shared questions_display here
-                    q_left = questions_display
-                with gr.Column(scale=6):
-                    with gr.Row():
-                        method_info = gr.Textbox(
-                            label="How to Submit Answers",
-                            value="Method 1: Draw/Write in canvas\nMethod 2: Upload photo of your written work\nMethod 3: Type your answers directly",
+                method_info = gr.Textbox(
+                    label="How to Submit Answers",
+                    value="Method 1: Draw/Write in canvas\nMethod 2: Upload photo of your written work\nMethod 3: Type your answers directly",
+                    interactive=False,
+                    lines=3
+                )
+                
+                with gr.Tabs():
+                    # Method 1: Draw
+                    with gr.Tab("✏️ Draw Answers"):
+                        canvas = gr.Sketchpad(
+                            label="Draw or write your answers here",
+                            type="pil",
+                            height=500,
+                            brush=gr.Brush(
+                                colors=["#000000", "#0000FF", "#FF0000"],
+                                default_size=4
+                            )
+                        )
+                        canvas_status = gr.Textbox(
+                            label="Canvas Status",
                             interactive=False,
-                            lines=3
+                            value="Ready to draw"
                         )
                     
-                    with gr.Tabs():
-                        # Method 1: Draw
-                        with gr.Tab("✏️ Draw Answers"):
-                            canvas = gr.Sketchpad(
-                                label="Draw or write your answers here",
-                                type="pil",
-                                height=500,
-                                brush=gr.Brush(
-                                    colors=["#000000", "#0000FF", "#FF0000"],
-                                    default_size=4
-                                )
-                            )
-                            canvas_status = gr.Textbox(
-                                label="Canvas Status",
-                                interactive=False,
-                                value="Ready to draw"
-                            )
-                        
-                        # Method 2: Upload
-                        with gr.Tab("📸 Upload Photo"):
-                            upload_image = gr.Image(
-                                label="Upload photo of your written work",
-                                type="pil",
-                                height=500
-                            )
-                            upload_status = gr.Textbox(
-                                label="Upload Status",
-                                interactive=False,
-                                value="Ready to upload"
-                            )
-                        
-                        # Method 3: Type
-                        with gr.Tab(" Type Answers"):
-                            gr.Markdown("""
+                    # Method 2: Upload
+                    with gr.Tab("📸 Upload Photo"):
+                        upload_image = gr.Image(
+                            label="Upload photo of your written work",
+                            type="pil",
+                            height=500
+                        )
+                        upload_status = gr.Textbox(
+                            label="Upload Status",
+                            interactive=False,
+                            value="Ready to upload"
+                        )
+                    
+                    # Method 3: Type
+                    with gr.Tab(" Type Answers"):
+                        gr.Markdown("""
 ### 📝 Type Your Answers
 
 **Instructions:** Type each answer in the box below. Use one of these formats:
@@ -874,24 +873,24 @@ with gr.Blocks(title="UNEB Exam Prep - Primary 6 & 7", theme=gr.themes.Soft(), c
   Q2: Your answer here
   Q3: Your answer here
   ```
-                            """)
-                            
-                            typed_answers = gr.Textbox(
-                                label="Type Your Answers Here",
-                                lines=20,
-                                placeholder="Type your answers using any of the formats shown above...",
-                                elem_classes="answer-input"
-                            )
+                        """)
                         
-                        # Combined submit button
-                        with gr.Row():
-                            submit_btn = gr.Button(" Submit for Correction", variant="primary", size="lg")
-                        
-                        submit_status = gr.Textbox(
-                            label="Submission Status",
-                            interactive=False,
-                            lines=2
+                        typed_answers = gr.Textbox(
+                            label="Type Your Answers Here",
+                            lines=20,
+                            placeholder="Type your answers using any of the formats shown above...",
+                            elem_classes="answer-input"
                         )
+                    
+                    # Combined submit button
+                    with gr.Row():
+                        submit_btn = gr.Button(" Submit for Correction", variant="primary", size="lg")
+                    
+                    submit_status = gr.Textbox(
+                        label="Submission Status",
+                        interactive=False,
+                        lines=2
+                    )
             
             # Improved submission handler with better parsing
             def submit_answers(canvas_input, upload_input, typed_input):