lms/school/templates/livecode/extension_footer.html

<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("school.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>