feat: make it possible to enable tracking for livecode execution

Tracking of livecode execution is made possible by making the page
context with course, batch and lesson available in js.

Added a global page_context variable in js and the data for that gets
initialzied in the learn.py.

community/hooks.py

@@ -187,6 +187,10 @@ update_website_context = 'community.widgets.update_website_context'
 ## subclass of community.community.plugins.PageExtension
 # community_lesson_page_extension = None
 
+community_lesson_page_extensions = [
+	"community.plugins.LiveCodeExtension"
+]
+
 ## Markdown Macros for Lessons
 community_markdown_macro_renderers = {
 	"Exercise": "community.plugins.exercise_renderer",

community/lms/doctype/exercise_submission/exercise_submission.json

@@ -6,12 +6,17 @@
  "engine": "InnoDB",
  "field_order": [
   "exercise",
-  "solution",
+  "status",
+  "batch",
+  "column_break_4",
   "exercise_title",
   "course",
-  "batch",
   "lesson",
-  "image"
+  "section_break_8",
+  "solution",
+  "image",
+  "test_results",
+  "comments"
  ],
  "fields": [
   {
@@ -21,12 +26,6 @@
    "label": "Exercise",
    "options": "Exercise"
   },
-  {
-   "fieldname": "solution",
-   "fieldtype": "Code",
-   "in_list_view": 1,
-   "label": "Solution"
-  },
   {
    "fetch_from": "exercise.title",
    "fieldname": "exercise_title",
@@ -61,11 +60,41 @@
    "fieldtype": "Code",
    "label": "Image",
    "read_only": 1
+  },
+  {
+   "fieldname": "status",
+   "fieldtype": "Select",
+   "label": "Status",
+   "options": "Correct\nIncorrect"
+  },
+  {
+   "fieldname": "test_results",
+   "fieldtype": "Small Text",
+   "label": "Test Results"
+  },
+  {
+   "fieldname": "comments",
+   "fieldtype": "Small Text",
+   "label": "Comments"
+  },
+  {
+   "fieldname": "solution",
+   "fieldtype": "Code",
+   "in_list_view": 1,
+   "label": "Solution"
+  },
+  {
+   "fieldname": "column_break_4",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "section_break_8",
+   "fieldtype": "Section Break"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2021-05-21 11:28:45.833018",
+ "modified": "2021-06-24 16:22:50.570845",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Exercise Submission",

community/lms/doctype/lesson/lesson.js

@@ -2,7 +2,47 @@
 // For license information, please see license.txt
 
 frappe.ui.form.on('Lesson', {
-	// refresh: function(frm) {
+  setup: function (frm) {
+    frm.trigger('setup_help');
+  },
+  setup_help(frm) {
+    frm.get_field('help').html(`
+<p>You can add some more additional content to the lesson using a special syntax. The table below mentions all types of dynamic content that you can add to the lessons and the syntax for the same.</p>
+<div class="row font-weight-bold mb-3">
+	<div class="col-sm-4">
+		Content Type
+	</div>
+	<div class="col-sm-4">
+		Syntax
+	</div>
+</div>
 
-	// }
+<div class="row mb-3">
+	<div class="col-sm-4">
+		YouTube Video
+	</div>
+	<div class="col-sm-4">
+		{{ YouTubeVideo("unique_embed_id") }}
+	</div>
+</div>
+
+<div class="row mb-3">
+	<div class="col-sm-4">
+		Exercise
+	</div>
+	<div class="col-sm-4">
+		{{ Exercise("exercise_name") }}
+	</div>
+</div>
+
+<div class="row mb-3">
+	<div class="col-sm-4">
+		Quiz
+	</div>
+	<div class="col-sm-4">
+		{{ Quiz("lms_quiz_name") }}
+	</div>
+</div>
+`);
+  }
 });

community/lms/doctype/lesson/lesson.json

@@ -13,7 +13,9 @@
   "index_",
   "index_label",
   "section_break_6",
-  "body"
+  "body",
+  "help_section",
+  "help"
  ],
  "fields": [
   {
@@ -60,11 +62,20 @@
   {
    "fieldname": "column_break_4",
    "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "help_section",
+   "fieldtype": "Section Break",
+   "label": "Help"
+  },
+  {
+   "fieldname": "help",
+   "fieldtype": "HTML"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2021-06-23 17:59:52.946515",
+ "modified": "2021-06-29 13:34:49.077363",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Lesson",

community/lms/workspace/lms/lms.json

@@ -0,0 +1,160 @@
+{
+ "category": "Modules",
+ "charts": [],
+ "creation": "2021-06-29 13:05:28.741459",
+ "developer_mode_only": 0,
+ "disable_user_customization": 0,
+ "docstatus": 0,
+ "doctype": "Workspace",
+ "extends_another_page": 0,
+ "hide_custom": 0,
+ "icon": "education",
+ "idx": 0,
+ "is_default": 0,
+ "is_standard": 1,
+ "label": "LMS",
+ "links": [
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "LMS",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Card Break"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "LMS Course",
+   "link_to": "LMS Course",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "LMS Batch",
+   "link_to": "LMS Batch",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "LMS Batch Membership",
+   "link_to": "LMS Batch Membership",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "LMS Course Mentor Mapping",
+   "link_to": "LMS Course Mentor Mapping",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "Content",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Card Break"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "Chapter",
+   "link_to": "Chapter",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "Lesson",
+   "link_to": "Lesson",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "Exercise",
+   "link_to": "Exercise",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "Exercise Submission",
+   "link_to": "Exercise Submission",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "LMS Quiz",
+   "link_to": "LMS Quiz",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  },
+  {
+   "hidden": 0,
+   "is_query_report": 0,
+   "label": "LMS Quiz Submission",
+   "link_to": "LMS Quiz Submission",
+   "link_type": "DocType",
+   "onboard": 0,
+   "type": "Link"
+  }
+ ],
+ "modified": "2021-06-29 15:11:07.324651",
+ "modified_by": "Administrator",
+ "module": "LMS",
+ "name": "LMS",
+ "owner": "Administrator",
+ "pin_to_bottom": 0,
+ "pin_to_top": 1,
+ "shortcuts": [
+  {
+   "color": "#29CD42",
+   "doc_view": "List",
+   "format": "{} Published",
+   "label": "Courses",
+   "link_to": "LMS Course",
+   "stats_filter": "{\"is_published\": 1}",
+   "type": "DocType"
+  },
+  {
+   "color": "#29CD42",
+   "doc_view": "List",
+   "format": "{} Active ",
+   "label": "Batches",
+   "link_to": "LMS Batch",
+   "stats_filter": "{\"status\": \"Active\"}",
+   "type": "DocType"
+  },
+  {
+   "color": "#39E4A5",
+   "doc_view": "List",
+   "format": "{} Students",
+   "label": "Memberships",
+   "link_to": "LMS Batch Membership",
+   "stats_filter": "{\"member_type\": \"Student\"}",
+   "type": "DocType"
+  }
+ ]
+}

community/plugins.py

@@ -67,6 +67,25 @@ class ProfileTab:
         """
         raise NotImplementedError()
 
+class LiveCodeExtension(PageExtension):
+    def render_header(self):
+        livecode_url = frappe.get_value("LMS Settings", None, "livecode_url")
+        context = {
+            "livecode_url": livecode_url
+        }
+        return frappe.render_template(
+            "templates/livecode/extension_header.html",
+            context)
+
+    def render_footer(self):
+        livecode_url = frappe.get_value("LMS Settings", None, "livecode_url")
+        context = {
+            "livecode_url": livecode_url
+        }
+        return frappe.render_template(
+            "templates/livecode/extension_footer.html",
+            context)
+
 def quiz_renderer(quiz_name):
     quiz = frappe.get_doc("LMS Quiz", quiz_name)
     context = dict(quiz=quiz)

community/templates/livecode/extension_footer.html

@@ -0,0 +1,168 @@
+<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/mon_school/js/livecode-files.js"></script>
+
+<template id="livecode-template">
+  <div class="livecode-editor livecode-editor-inline">
+    <div class="row">
+      <div class="col-lg-8 col-md-6">
+        <div class="controls">
+          <button class="run">Run</button>
+
+          <div class="exercise-controls pull-right">
+            <span style="padding-right: 10px;"><span class="last-submitted human-time" data-timestamp=""></span></span>
+            <button class="submit btn-primary">Submit</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="code-editor">
+      <div class="row">
+        <div class="col-lg-8 col-md-6">
+          <div class="code-wrapper">
+            <textarea class="code"></textarea>
+          </div>
+        </div>
+        <div class="col-lg-4 col-md-6 canvas-wrapper">
+            <div class="svg-image" width="300" height="300"></div>
+            <pre class="output"></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script type="text/javascript">
+  function getLiveCodeOptions() {
+    return {
+      base_url: "{{ livecode_url }}",
+      runtime: "python",
+      files: LIVECODE_FILES, // loaded from livecode-files.js
+      command: ["python", "start.py"],
+      codemirror: true,
+      onMessage: {
+        image: function(editor, msg) {
+          const element = editor.parent.querySelector(".svg-image");
+          element.innerHTML = msg.image;
+        }
+      }
+    }
+  }
+
+  $(function() {
+    var editorLookup = {};
+
+    $("pre.example, pre.exercise").each((i, e) => {
+      var code = $(e).text();
+      var template = document.querySelector('#livecode-template');
+      var clone = template.content.cloneNode(true);
+
+      $(e)
+      .wrap('<div></div>')
+      .hide()
+      .parent()
+      .append(clone)
+      .find("textarea.code")
+      .val(code);
+
+      if ($(e).hasClass("exercise")) {
+        var last_submitted = $(e).data("last-submitted");
+        if (last_submitted) {
+          $(e).parent().find(".last-submitted")
+            .data("timestamp", last_submitted)
+            .html(__("Submitted {0}", [comment_when(last_submitted)]));
+        }
+      }
+      else {
+        $(e).parent().find(".exercise-controls").remove();
+      }
+
+      var editor = new LiveCodeEditor(e.parentElement, {
+        ...getLiveCodeOptions(),
+        codemirror: true,
+        onMessage: {
+          image: function(editor, msg) {
+            const canvasElement = editor.parent.querySelector("div.svg-image");
+            canvasElement.innerHTML = msg.image;
+          }
+        }
+      });
+
+      $(e).parent().find(".submit").on('click', function() {
+        var name = $(e).data("name");
+        let code = editor.codemirror.doc.getValue();
+
+        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).parent().find(".human-time").html(__("Submitted {0}", [comment_when(d)]));
+          }
+        });
+      });
+    });
+
+    $(".exercise-image").each((i, e) => {
+      var svg = JSON.parse($(e).data("image"));
+      $(e).html(svg);
+    });
+
+    $("pre.exercise").each((i, e) => {
+      var svg = JSON.parse($(e).data("image"));
+      $(e).parent().find(".svg-image").html(svg);
+    });
+
+  });
+</script>
+
+<style type="text/css">
+  .svg-image {
+    border: 5px solid #ddd;
+    position: relative;
+    z-index: 0;
+    width: 310px;
+    height: 310px;
+  }
+  .livecode-editor {
+    margin-bottom: 30px;
+  }
+
+  .livecode-editor-small .svg-image {
+    border: 5px solid #ddd;
+    position: relative;
+    z-index: 0;
+    width: 210px;
+    height: 210px;
+  }
+
+  /* work-in-progress styles for showing admonition */
+  .admonition {
+    border: 1px solid #aaa;
+    border-left: .5rem solid #888;
+    border-radius: .3em;
+    font-size: 0.9em;
+    margin: 1.5em 0;
+    padding: 0 0.5em;
+  }
+  .admonition-title {
+    padding: 0.5em 0px;
+    font-weight: bold;
+    padding-top:
+  }
+</style>

community/templates/livecode/extension_header.html

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
+
+<script src="{{ livecode_url }}/static/codemirror/lib/codemirror.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/mode/python/python.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/keymap/sublime.js"></script>
+
+<script src="{{ livecode_url }}/static/codemirror/addon/edit/matchbrackets.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/addon/comment/comment.js"></script>

community/www/batch/learn.html

@@ -61,6 +61,11 @@
 
 {%- block script %}
 {{ super() }}
+
+<script type="text/javascript">
+  var page_context = {{ page_context | tojson }};
+</script>
+
 {% for ext in page_extensions %}
 {{ ext.render_footer() }}
 {% endfor %}

community/www/batch/learn.py

@@ -30,11 +30,17 @@ def get_context(context):
     next_ = outline.get_next(lesson_number)
     context.prev_chap = get_chapter_title(course_name, prev_)
     context.next_chap = get_chapter_title(course_name, next_)
-    context.next_url = context.course.get_learn_url(next_) + context.course.query_parameter
-    context.prev_url = context.course.get_learn_url(prev_) + context.course.query_parameter
+    context.next_url = context.course.get_learn_url(next_) and  context.course.get_learn_url(next_) + context.course.query_parameter
+    context.prev_url = context.course.get_learn_url(prev_) and context.course.get_learn_url(prev_) + context.course.query_parameter
 
     context.page_extensions = get_page_extensions()
 
+    context.page_context = {
+        "course": context.course.name,
+        "batch": context.get("batch") and context.batch.name,
+        "lesson": context.lesson.name
+    }
+
 def get_chapter_title(course_name, lesson_number):
     if not lesson_number:
         return
@@ -49,7 +55,7 @@ def get_lesson_index(course, batch, user):
     return lesson and course.get_lesson_index(lesson)
 
 def get_page_extensions():
-    default_value = ["community.community.plugins.PageExtension"]
+    default_value = ["community.plugins.PageExtension"]
     classnames = frappe.get_hooks("community_lesson_page_extensions") or default_value
     extensions = [frappe.get_attr(name)() for name in classnames]
     return extensions

community/www/macros/livecode.html

@@ -1,4 +1,3 @@
-
 {% macro LiveCodeEditorLarge(name, code) %}
 <div class="livecode-editor livecode-editor-large" id="editor-{{name}}">
   <div class="row">