Update app.py

app.py

@@ -534,11 +534,11 @@ def create_quiz_interface():
     quiz_app = QuizApp(os.getenv("GROQ_API_KEY"))
     
     with gr.Blocks(title="CertifyMe AI", theme=gr.themes.Soft()) as demo:
-
         # State management
         current_questions = gr.State([])
+        current_question_idx = gr.State(0)
         
-        # UI Components layout
+        # Header
         gr.Markdown("""
         # 🎓 CertifyMe AI
         ### Transform Your Knowledge into Recognized Achievements
@@ -572,14 +572,29 @@ def create_quiz_interface():
                 generate_btn = gr.Button("Generate Assessment", variant="primary", size="lg")
             
             # Assessment Tab
-            with gr.Tab("📝 Step 2: Take Assessment"):
-                feedback_box = gr.Markdown("")
-                question_box = gr.Markdown("")
-                answers = [
-                    gr.Radio(choices=[], label=f"Question {i+1}", visible=False)
-                    for i in range(5)
-                ]
-                submit_btn = gr.Button("Submit Assessment", variant="primary", size="lg")
+            with gr.Tab("📝 Step 2: Take Assessment") as assessment_tab:
+                with gr.Box(visible=True):
+                    # Question display
+                    question_display = gr.Markdown("", label="Current Question")
+                    
+                    # Single radio group for current question
+                    current_options = gr.Radio(
+                        choices=[],
+                        label="Select your answer",
+                        visible=False
+                    )
+                    
+                    # Navigation
+                    with gr.Row():
+                        prev_btn = gr.Button("← Previous", variant="secondary", size="sm")
+                        question_counter = gr.Markdown("Question 1 of 3")
+                        next_btn = gr.Button("Next →", variant="secondary", size="sm")
+                    
+                    submit_btn = gr.Button("Submit Assessment", variant="primary", size="lg")
+                
+                # Results section
+                with gr.Group(visible=False) as results_group:
+                    feedback_box = gr.Markdown("")
             
             # Certification Tab
             with gr.Tab("🎓 Step 3: Get Certified"):
@@ -590,38 +605,122 @@ def create_quiz_interface():
                     value="Professional Assessment Certification"
                 )
                 certificate_display = gr.Image(label="Your Certificate")
-        
+
+        # Helper functions for navigation
+        def update_question_display(questions, idx):
+            if not questions or idx >= len(questions):
+                return {
+                    question_display: "",
+                    current_options: gr.update(choices=[], value=None, visible=False),
+                    question_counter: ""
+                }
+            
+            question = questions[idx]
+            return {
+                question_display: f"### Question {idx + 1}\n{question.question}",
+                current_options: gr.update(choices=question.options, value=None, visible=True),
+                question_counter: f"Question {idx + 1} of {len(questions)}"
+            }
+
+        def navigate(direction, current_idx, questions):
+            new_idx = max(0, min(len(questions) - 1, current_idx + direction))
+            return new_idx, update_question_display(questions, new_idx)
+
         # Event handlers
+        def on_generate_questions(text, num_questions):
+            success, questions = quiz_app.generate_questions(text, num_questions)
+            if not success:
+                return {
+                    question_display: "",
+                    current_options: gr.update(choices=[], visible=False),
+                    question_counter: "",
+                    current_questions: [],
+                    current_question_idx: 0,
+                    tabs: gr.update(selected=1)
+                }
+            
+            # Initialize first question
+            return {
+                **update_question_display(questions, 0),
+                current_questions: questions,
+                current_question_idx: 0,
+                tabs: gr.update(selected=1)
+            }
 
         generate_btn.click(
-            fn=quiz_app.update_questions,
+            fn=on_generate_questions,
             inputs=[text_input, num_questions],
             outputs=[
-                question_box,
-                feedback_box,
-                *answers,
+                question_display,
+                current_options,
+                question_counter,
                 current_questions,
+                current_question_idx,
                 tabs
             ]
         )
-        
+
+        # Navigation event handlers
+        prev_btn.click(
+            fn=navigate,
+            inputs=[-1, current_question_idx, current_questions],
+            outputs=[current_question_idx, question_display, current_options, question_counter]
+        )
+
+        next_btn.click(
+            fn=navigate,
+            inputs=[1, current_question_idx, current_questions],
+            outputs=[current_question_idx, question_display, current_options, question_counter]
+        )
+
+        # Submission handler
+        def on_submit(questions, current_answer):
+            if not current_answer:
+                return {
+                    feedback_box: "⚠️ Please answer all questions before submitting.",
+                    results_group: gr.update(visible=False),
+                    score_display: 0,
+                    result_message: "",
+                    tabs: gr.update(selected=1)
+                }
+            
+            answers = [current_answer]  # Collect answers from current question
+            score, passed, feedback = quiz_app.calculate_score(answers)
+            
+            # Generate feedback HTML
+            feedback_html = "# Assessment Results\n\n"
+            for i, (q, f) in enumerate(zip(questions, feedback)):
+                color = "green" if f.is_correct else "red"
+                symbol = "✅" if f.is_correct else "❌"
+                feedback_html += f"""
+                ### Question {i+1}
+                {q.question}
+                
+                <div style="color: {color}; padding: 10px; margin: 5px 0; border-left: 3px solid {color};">
+                    {symbol} Your answer: {f.selected or "No answer"}
+                    {'' if f.is_correct else f'<br>Correct answer: {f.correct_answer}'}
+                </div>
+                """
+            
+            return {
+                feedback_box: feedback_html,
+                results_group: gr.update(visible=True),
+                score_display: score,
+                result_message: "🎉 Passed!" if passed else "Please try again",
+                tabs: gr.update(selected=2) if passed else gr.update()
+            }
+
         submit_btn.click(
-            fn=quiz_app.submit_quiz,
-            inputs=[*answers, current_questions],
+            fn=on_submit,
+            inputs=[current_questions, current_options],
             outputs=[
                 feedback_box,
-                *answers,
+                results_group,
                 score_display,
                 result_message,
                 tabs
             ]
         )
-        
-        score_display.change(
-            fn=quiz_app.certificate_generator.generate,
-            inputs=[score_display, name, course_name, company_logo, participant_photo],
-            outputs=certificate_display
-        )
     
     return demo