From 434087656f4e3fa93ca0206ef792b7d982dee56b Mon Sep 17 00:00:00 2001
From: Artur Gaspar <artur@opencraft.com>
Date: Tue, 15 Oct 2024 09:00:57 -0300
Subject: [PATCH] feat: character image in short answer XBlock

---
 ai_eval/shortanswer.py             | 10 ++++++++++
 ai_eval/static/css/shortanswer.css |  9 +++++++++
 ai_eval/templates/shortanswer.html |  6 ++++++
 3 files changed, 25 insertions(+)

diff --git a/ai_eval/shortanswer.py b/ai_eval/shortanswer.py
index 2501a9d..cd9b553 100644
--- a/ai_eval/shortanswer.py
+++ b/ai_eval/shortanswer.py
@@ -30,6 +30,15 @@ class ShortAnswerAIEvalXBlock(AIEvalXBlock):
         scope=Scope.settings,
     )
 
+    character_image = String(
+        display_name=_("Character Image URL"),
+        help=_(
+            "URL for an image to be shown to the left of the chat box; "
+            "leave empty to disable"
+        ),
+        scope=Scope.settings,
+    )
+
     max_responses = Integer(
         display_name=_("Max Responses"),
         help=_("The maximum number of response messages the student can submit"),
@@ -47,6 +56,7 @@ class ShortAnswerAIEvalXBlock(AIEvalXBlock):
     editable_fields = AIEvalXBlock.editable_fields + (
         "max_responses",
         "allow_reset",
+        "character_image",
     )
 
     def validate_field_data(self, validation, data):
diff --git a/ai_eval/static/css/shortanswer.css b/ai_eval/static/css/shortanswer.css
index fb0bec5..5f42743 100644
--- a/ai_eval/static/css/shortanswer.css
+++ b/ai_eval/static/css/shortanswer.css
@@ -1,5 +1,14 @@
 /* CSS for ShortAnswerAIEvalXBlock */
 
+.shortanswer_image {
+  float: left;
+  margin-right: 4rem;
+  width: 30%;
+}
+
+.shortanswer_image + .shortanswer_block {
+}
+
 .shortanswer_block .count {
   font-weight: bold;
 }
diff --git a/ai_eval/templates/shortanswer.html b/ai_eval/templates/shortanswer.html
index 2fc4d32..7a7293d 100644
--- a/ai_eval/templates/shortanswer.html
+++ b/ai_eval/templates/shortanswer.html
@@ -1,3 +1,9 @@
+{% if self.character_image %}
+    <div class="shortanswer_image">
+        <img src="{{ self.character_image }}" />
+    </div>
+{% endif %}
+
 <div class="shortanswer_block">
     <div>
         <div id="question-text">