add question breakdown to score screen

app.py

@@ -7,6 +7,7 @@ mpl.rcParams["figure.dpi"] = 300
 
 quiz = BenchmarkQuiz()
 
+
 def update_quiz_screen(question_data: QuestionData):
     quiz_state = quiz.state
     return {
@@ -31,11 +32,39 @@ def update_quiz_screen(question_data: QuestionData):
     }
 
 
-def update_score_screen(plot):
-    return {
+def update_score_screen(plot, results_data):
+    updates = {
         score_screen: gr.update(visible=True),
         score_plot: gr.update(value=plot),
+        results_container: gr.update(visible=True),
     }
+    for i, result in enumerate(results_data):
+        updates[result_cards[i]] = gr.update(
+            visible=True,
+            elem_classes=[
+                "correct-answer"
+                if result["points"] == 1.0
+                else "semi-correct-answer"
+                if result["points"] == 0.5
+                else "incorrect-answer"
+            ],
+        )
+        emoji = "✅" if result["points"] == 1.0 else "❌" if result["points"] == 0.0 else "🔶"
+
+        markdown_string = f"### {emoji} Spurning {result['question_num']}"
+        markdown_string += f"\n{result['question']}"
+        markdown_string += (
+            f"\n\nValkostir:\n"
+            + "\n".join([f"- {option}" for option in result["options"]])
+            if result["options"]
+            else ""
+        )
+        markdown_string += f"\n\n**Þitt svar:** {result['user_answer']}"
+        markdown_string += f"\n\n**Rétt svar:** {result['correct_answer']}"
+        markdown_string += f"\n\n**Stig:** {result['points']}"
+        updates[result_cards[i].children[0]] = gr.update(value=markdown_string)
+
+    return updates
 
 
 def start_quiz_handler(benchmark_name):
@@ -58,7 +87,7 @@ def next_question_handler(answer_input, free_text_input):
     if result["completed"]:
         return {
             quiz_screen: gr.update(visible=False),
-            **update_score_screen(result["plot"]),
+            **update_score_screen(result["plot"], result["results_data"]),
         }
     else:
         return update_quiz_screen(result["question_data"])
@@ -78,8 +107,31 @@ def reset_quiz_handler():
     }
 
 
+demo = gr.Blocks(
+    theme=gr.themes.Soft(),
+    title="Mælipróf",
+    css="""
+    .correct-answer, .correct-answer .block {
+        background-color: #d4edda !important;
+        border-color: #c3e6cb !important;
+    }
+    .incorrect-answer, .incorrect-answer .block {
+        background-color: #f8d7da !important;
+        border-color: #f5c6cb !important;
+    }
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    .semi-correct-answer, .semi-correct-answer .block {
+        background-color: #fff3cd !important;
+        border-color: #ffeeba !important;
+    }
+    .correct-answer, .incorrect-answer, .semi-correct-answer {
+        border-radius: 5px;
+        padding: 10px;
+        margin-bottom: 10px;
+    }
+    """,
+)
+with demo:
     start_screen = gr.Column(visible=True)
     with start_screen:
         gr.Markdown("# Veldu mælipróf")
@@ -102,6 +154,12 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         gr.Markdown(f"## Niðurstöður")
         score_plot = gr.Plot()
         reset_btn = gr.Button("Byrja upp á nýtt")
+        results_container = gr.Column(visible=False)
+        with results_container:
+            result_cards = [gr.Group(visible=False) for _ in range(5)]
+            for card in result_cards:
+                with card:
+                    gr.Markdown("")
 
     for benchmark_name, button in benchmark_buttons.items():
         button.click(
@@ -133,6 +191,9 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             next_button,
             previous_button,
             score_plot,
+            results_container,
+            *result_cards,
+            *[child for card in result_cards for child in card.children],
         ],
     )