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/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 %}