feat: show image for the exercise

generate the image from the answer and display it along with
description. The image is geneated when the exercise is saved.

community/lms/doctype/exercise/exercise.py

@@ -3,8 +3,12 @@
 
 import frappe
 from frappe.model.document import Document
+from ..lms_sketch.livecode import livecode_to_svg
 
 class Exercise(Document):
+    def before_save(self):
+        self.image = livecode_to_svg(None, self.answer)
+
     def get_user_submission(self):
         """Returns the latest submission for this user.
         """

community/lms/doctype/lms_sketch/livecode.py

@@ -4,6 +4,7 @@ import websocket
 import json
 from .svg import SVG
 import frappe
+from urllib.parse import urlparse
 
 # Files to pass to livecode server
 # The same code is part of livecode-canvas.js
@@ -60,9 +61,21 @@ def clear():
 clear()
 '''
 
+def get_livecode_url():
+    doc = frappe.get_cached_doc("LMS Settings")
+    return doc.livecode_url
+
+def get_livecode_ws_url():
+    url = urlparse(get_livecode_url())
+    protocol = "wss" if url.scheme == "https" else "ws"
+    return protocol + "://" + url.netloc + "/livecode"
+
 def livecode_to_svg(livecode_ws_url, code, *, timeout=3):
     """Renders the code as svg.
     """
+    if livecode_ws_url is None:
+        livecode_ws_url = get_livecode_ws_url()
+
     try:
         ws = websocket.WebSocket()
         ws.settimeout(timeout)

community/lms/widgets/Exercise.html

@@ -4,6 +4,10 @@
   <h2>{{ exercise.title }}</h2>
   <div class="exercise-description">{{frappe.utils.md_to_html(exercise.description)}}</div>
 
+  {% if exercise.image %}
+  <div class="exercise-image">{{exercise.image}}</div>
+  {% endif %}
+
   {% set submission = exercise.get_user_submission() %}
 
   {{ LiveCodeEditor(exercise.name,
@@ -12,3 +16,12 @@
         is_exercise=True,
         last_submitted=submission and submission.creation) }}
 </div>
+
+<style type="text/css">
+.exercise-image svg {
+  width: 150px;
+  height: 150px;
+  border: 1px solid #ddd;
+  margin-bottom: 20px;
+}
+</style>

community/public/css/style.less

@@ -306,3 +306,14 @@ section.lightgray {
 .lesson-page {
   margin: 20px 0px;
 }
+
+.lesson-pagination {
+  clear: both;
+}
+
+.exercise-image svg {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #ddd;
+  margin-bottom: 20px;
+}