expand linkedin button messaging

app.py

@@ -58,9 +58,9 @@ def on_user_logged_in(token: gr.OAuthToken | None):
             gr.update(
                 visible=True,
                 value="""
-                <div style="text-align: center; padding: 20px; border: 2px dashed #ccc; border-radius: 10px; margin-top: 20px;">
+                <div style="text-align: center; padding: 20px; border: 2px dashed #ccc;">
                     <h3>🎯 Complete the Quiz to Unlock</h3>
-                    <p>Once you finish the quiz and pass, you'll be able to add your certificate directly to your LinkedIn profile!</p>
+                    <p>Pass the quiz to add your certificate to LinkedIn!</p>
                     <img src="linkedin_logo.png" alt="LinkedIn Add to Profile" style="width: 200px; height: 53px; opacity: 0.5;">
                 </div>
             """,
@@ -279,7 +279,15 @@ def handle_quiz(
             gr.update(visible=False),  # next button
             gr.update(visible=False),  # submit button
             gr.update(visible=False),  # certificate image
-            gr.update(visible=False),  # linkedin button
+            gr.update(
+                visible=True,
+                value="""
+                <div style="text-align: center; padding: 20px; border: 2px dashed #ccc;">
+                    <h3>🔒 Login Required</h3>
+                    <p>Please log in with your Hugging Face account to access the quiz and earn your LinkedIn certificate!</p>
+                </div>
+            """,
+            ),  # linkedin button with login prompt
         ]
 
     if not is_start and question_idx < len(quiz_data):
@@ -301,12 +309,26 @@ def handle_quiz(
     if question_idx >= len(quiz_data):
         correct_count = sum(1 for answer in user_answers if answer["is_correct"])
         grade = correct_count / len(user_answers)
-        results_text = (
-            f"**Quiz Complete!**\n\n"
-            f"Your score: {grade:.1%}\n"
-            f"Passing score: {float(EXAM_PASSING_SCORE):.1%}\n\n"
-        )
         has_passed = grade >= float(EXAM_PASSING_SCORE)
+
+        # LinkedIn button text for quiz completion
+        linkedin_completion_text = (
+            """
+            <div style="text-align: center; padding: 20px; border: 2px dashed #4CAF50;">
+                <h3>🎉 Ready for LinkedIn!</h3>
+                <p>Great! Click "Get your certificate" above to unlock the LinkedIn button.</p>
+                <img src="linkedin_logo.png" alt="LinkedIn Add to Profile" style="width: 200px; height: 53px; opacity: 0.7;">
+            </div>
+        """
+            if has_passed
+            else """
+            <div style="text-align: center; padding: 20px; border: 2px dashed #ff6b6b;">
+                <h3>❌ Try Again</h3>
+                <p>You need a higher score to earn the LinkedIn certificate. Please retake the quiz!</p>
+            </div>
+        """
+        )
+
         return [
             "",  # question_text
             gr.update(choices=[], visible=False),  # radio choices
@@ -317,11 +339,11 @@ def handle_quiz(
             gr.update(visible=False),  # next button
             gr.update(
                 visible=True,
-                value=f"🎓 Get your certificate" if has_passed else "❌ Did not pass",
+                value="🎓 Get your certificate" if has_passed else "❌ Did not pass",
                 interactive=has_passed,
             ),  # submit button
             gr.update(visible=False),  # certificate image
-            gr.update(visible=False),  # linkedin button
+            gr.update(visible=True, value=linkedin_completion_text),  # linkedin button
         ]
 
     # Show next question
@@ -340,7 +362,16 @@ def handle_quiz(
         gr.update(visible=True),  # next button
         gr.update(visible=False),  # submit button
         gr.update(visible=False),  # certificate image
-        gr.update(visible=False),  # linkedin button
+        gr.update(
+            visible=True,
+            value="""
+            <div style="text-align: center; padding: 20px; border: 2px dashed #ccc;">
+                <h3>🎯 Keep Going!</h3>
+                <p>Complete the quiz and pass to unlock your LinkedIn certificate!</p>
+                <img src="linkedin_logo.png" alt="LinkedIn Add to Profile" style="width: 200px; height: 53px; opacity: 0.5;">
+            </div>
+        """,
+        ),  # linkedin button with progress message
     ]