add layout and styling

app.py

@@ -19,7 +19,7 @@ def on_user_logged_in(token: gr.OAuthToken | None):
     Otherwise, keep the login button visible, hide Start.
     """
     if token is not None:
-        return gr.update(visible=False), gr.update(visible=True)
+        return gr.update(visible=False), gr.update(visible=False)
     else:
         # Not logged in, keep the login visible, hide Start
         return gr.update(visible=True), gr.update(visible=False)
@@ -81,7 +81,7 @@ def handle_quiz(question_idx, user_answers, selected_answer, is_start):
     else:
         # Otherwise, show the next question
         q = quiz_data[question_idx]
-        updated_question = f"## **Question {question_idx + 1}**: {q['question']}"
+        updated_question = f"## Question {question_idx + 1} \n### {q['question']}"
         return (
             updated_question,
             gr.update(
@@ -109,32 +109,39 @@ def success_message(response):
 
 with gr.Blocks() as demo:
     demo.title = f"Dataset Quiz for {EXAM_DATASET_ID}"
-
-    # Header
-    gr.Markdown(f"## Welcome to the {EXAM_DATASET_ID} Quiz")
-    gr.Markdown(
-        "Log in first, then click 'Start' to begin. Answer each question, click 'Next', and finally click 'Submit' to publish your results to the Hugging Face Hub."
-    )
-
-    # Step 1: Login
-    login_btn = gr.LoginButton()
-    # We'll hide the Start button until user logs in
-    start_btn = gr.Button("Start", visible=False)
-
     # State variables
     question_idx = gr.State(value=0)
     user_answers = gr.State(value=[])
 
+    with gr.Row(variant="compact"):
+        gr.Markdown(f"## Welcome to the {EXAM_DATASET_ID} Quiz")
+    with gr.Row(variant="compact"):
+        gr.Markdown(
+            "Log in first, then click 'Start' to begin. Answer each question, click 'Next', and finally click 'Submit' to publish your results to the Hugging Face Hub."
+        )
     # We display question text with Markdown
-    question_text = gr.Markdown("")
-    status_text = gr.Markdown("")
-    radio_choices = gr.Radio(choices=[], visible=False)
+    with gr.Row(
+        variant="panel",
+    ):
+        question_text = gr.Markdown("")
+        radio_choices = gr.Radio(
+            choices=[], visible=False, label="Your Answer", scale=1.5
+        )
+
+    with gr.Row(variant="compact"):
+        status_text = gr.Markdown("")
+
+    with gr.Row(variant="compact"):
+        # Final results after all questions are done
+        final_markdown = gr.Markdown("", visible=False)
 
-    # Final results after all questions are done
-    final_markdown = gr.Markdown("", visible=False)
+        next_btn = gr.Button("Next ⏭️")
+        submit_btn = gr.Button("Submit ✅")
 
-    next_btn = gr.Button("Next")
-    submit_btn = gr.Button("Submit")
+    with gr.Row(variant="compact"):
+        login_btn = gr.LoginButton()
+        # We'll hide the Start button until user logs in
+        start_btn = gr.Button("Start", visible=False)
 
     # Use click() instead of login()
     login_btn.click(fn=on_user_logged_in, inputs=None, outputs=[login_btn, start_btn])