feat: character image in short answer XBlock

open-craft · Oct 16, 2024 · 960839f · 960839f
1 parent 29a4073
commit 960839f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/ai_eval/shortanswer.py b/ai_eval/shortanswer.py
@@ -30,14 +30,26 @@ 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"),
         scope=Scope.settings,
         default=3,
     )
 
-    editable_fields = AIEvalXBlock.editable_fields + ("max_responses",)
+    editable_fields = AIEvalXBlock.editable_fields + (
+        "max_responses",
+        "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
@@ -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
@@ -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">