feat: integrated exercises into lessons

- an exercise can now be added to a lesson
- it is rendered using livecode editor with submit button
- remembers the submitted code and shows the submission time

Issue #90

community/lms/api.py

@@ -21,3 +21,13 @@ def get_section(name):
     """
     doc = frappe.get_doc("LMS Section", name)
     return doc and doc.as_dict()
+
+@frappe.whitelist()
+def submit_solution(exercise, code):
+    """Submits a solution.
+    """
+    ex = frappe.get_doc("Exercise", exercise)
+    if not ex:
+        return
+    doc = ex.submit(code)
+    return {"name": doc.name, "creation": doc.creation}

community/lms/doctype/lesson/lesson.py

@@ -18,6 +18,7 @@ class Lesson(Document):
     def make_lms_section(self, index, section):
             s = frappe.new_doc('LMS Section', parent_doc=self, parentfield='sections')
             s.type = section.type
+            s.id = section.id
             s.label = section.label
             s.contents = section.contents
             s.index = index

community/lms/doctype/lms_section/lms_section.json

@@ -9,7 +9,8 @@
   "contents",
   "code",
   "attrs",
-  "index"
+  "index",
+  "id"
  ],
  "fields": [
   {
@@ -43,12 +44,17 @@
    "fieldname": "index",
    "fieldtype": "Int",
    "label": "Index"
+  },
+  {
+   "fieldname": "id",
+   "fieldtype": "Data",
+   "label": "id"
   }
  ],
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2021-03-12 17:56:23.118854",
+ "modified": "2021-05-19 18:55:26.019625",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Section",

community/lms/doctype/lms_section/lms_section.py

@@ -10,6 +10,10 @@ class LMSSection(Document):
     def __repr__(self):
         return f"<LMSSection {self.label!r}>"
 
+    def get_exercise(self):
+        if self.type == "exercise":
+            return frappe.get_doc("Exercise", self.id)
+
     def get_latest_code_for_user(self):
         """Returns the latest code for the logged in user.
         """

community/lms/widgets/Exercise.html

@@ -0,0 +1,14 @@
+{% from "www/macros/livecode.html" import LiveCodeEditorJS, LiveCodeEditor with context %}
+
+<div class="exercise">
+  <h2>{{ exercise.title }}</h2>
+  <div class="exercise-description">{{frappe.utils.md_to_html(exercise.description)}}</div>
+
+  {% set submission = exercise.get_user_submission() %}
+
+  {{ LiveCodeEditor(exercise.name,
+        code=exercise.code,
+        reset_code=exercise.code,
+        is_exercise=True,
+        last_submitted=submission and submission.creation) }}
+</div>

community/www/courses/learn/index.html

@@ -55,8 +55,14 @@
 {% macro render_section(s) %}
   {% if s.type == "text" %}
     {{ render_section_text(s) }}
-  {% elif s.type == "example" or s.type == "code" or s.type == "exercise" %}
-    {{ LiveCodeEditor(s.name, s.get_latest_code_for_user(), s.type=="exercise", "2 hours ago") }}
+  {% elif s.type == "example" or s.type == "code" %}
+    {{ LiveCodeEditor(s.name,
+          code=s.get_latest_code_for_user(),
+          reset_code=s.contents,
+          is_exercise=False)
+    }}
+  {% elif s.type == "exercise" %}
+    {{ widgets.Exercise(exercise=s.get_exercise())}}
   {% else %}
     <div>Unknown section type: {{s.type}}</div>
   {% endif %}

community/www/macros/livecode.html

@@ -24,7 +24,7 @@
 </div>
 {% endmacro %}
 
-{% macro LiveCodeEditor(name, code, is_exercise, last_submitted) %}
+{% macro LiveCodeEditor(name, code, reset_code, is_exercise=False, last_submitted=None) %}
 <div class="livecode-editor livecode-editor-inline" id="editor-{{name}}">
   <div class="row">
     <div class="col-lg-8 col-md-6">
@@ -34,10 +34,13 @@
         {% if is_exercise %}
           <button class="submit pull-right btn-primary">Submit</button>
           {% if last_submitted %}
-          <span class="pull-right" style="padding-right: 10px;">Submitted <span class="human-time" data-timestamp="{{last_submitted}}">on {{last_submitted}}</span></span>
+          <span class="pull-right" style="padding-right: 10px;"><span class="human-time" data-timestamp="{{last_submitted}}"></span></span>
           {% endif %}
         {% endif %}
       </div>
+      <div style="display: none">
+        <pre class="reset-code">{{reset_code}}</pre>
+      </div>
     </div>
   </div>
   <div class="code-editor">
@@ -59,20 +62,67 @@
 
 
 {% macro LiveCodeEditorJS(name, code) %}
+
+<script type="text/javascript" src="/assets/frappe/node_modules/moment/min/moment-with-locales.min.js"></script>
+<script type="text/javascript" src="/assets/frappe/node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
+<script type="text/javascript" src="/assets/frappe/js/frappe/utils/datetime.js"></script>
+
+<script type="text/javascript">
+// comment_when is failing because of this
+if (!frappe.sys_defaults) {
+  frappe.sys_defaults = {}
+}
+</script>
+
 <script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
 <script type="text/javascript" src="/assets/community/js/livecode-canvas.js"></script>
 
 <script type="text/javascript">
   var livecodeEditors = [];
+  var livecodeEditorsMap = {};
 
   $(function() {
     $(".livecode-editor").each((i, e) => {
+      var name = e.id.replace("editor-", "");
       var editor = new LiveCodeEditor(e, {
         base_url: "{{ livecode_url }}",
         ...getLiveCodeOptions()
       })
       livecodeEditors.push(editor);
-    })
-  })
+      livecodeEditorsMap[e.id] = editor;
+
+      $(e).find(".reset").on('click', function() {
+        let code = $(e).find(".reset-code").html();
+        editor.codemirror.doc.setValue(code);
+      });
+
+      $(e).find(".submit").on('click', function() {
+        let code = editor.codemirror.doc.getValue();
+        console.log("submit", name, code);
+        frappe.call("community.lms.api.submit_solution", {
+          "exercise": name,
+          "code": code
+        }).then(r => {
+          if (r.message.name) {
+            frappe.msgprint("Submitted successfully!");
+
+            let d = r.message.creation;
+            $(e).find(".human-time").html(__("Submitted {0}", [comment_when(d)]));
+          }
+        });
+      });
+
+    });
+  });
+
+  function updateSubmitTimes() {
+    $(".human-time").each(function(i, e) {
+      var d = $(e).data().timestamp;
+      $(e).html(__("Submitted {0}", [comment_when(d)]));
+    });
+  }
+
+  updateSubmitTimes();
 </script>
+
 {% endmacro %}