Merge pull request #683 from uccser/python-interpreter-refactor

Refactor python-interpreter interactive.

csfieldguide/interactives/content/en/interactives.yaml

@@ -85,7 +85,7 @@ payment-interface:
 pixel-viewer:
   name: pixel-viewer (broken)
 python-interpreter:
-  name: python-interpreter (broken)
+  name: Python Interpreter
 regular-expression-filter:
   name: regular-expression-filter (broken)
 regular-expression-search:

csfieldguide/static/interactives/python-interpreter/js/python-interpreter.js

@@ -20,7 +20,7 @@ $(document).ready(function () {
     var program = document.getElementById("interactive-python-interpreter-code");
     program.value = 'print("**********************************************")\n'
     program.value += 'print("**********************************************")\n'
-    program.value += 'print("** Welcome to computer programming, Student **")\n'
+    program.value += 'print("** ' + py_interpreter_il8n["welcome"] + ' **")\n'
     program.value += 'print("**********************************************")\n'
     program.value += 'print("**********************************************")\n'
 });

csfieldguide/templates/interactives/python-interpreter.html

@@ -0,0 +1,38 @@
+{% extends interactive_mode_template %}
+
+{% load i18n %}
+{% load static %}
+
+{% block html %}
+  <div class="container mb-3">
+    <div class="row">
+      <div class="col">
+        <div id="interactive-python-interpreter">
+        <form>
+          <h4>{% trans "Program" %}</h4>
+          <textarea id="interactive-python-interpreter-code" wrap="off" class="form-control"></textarea>
+          <button id="interactive-python-interpreter-run" type="button" class="btn btn-primary btn-expand">
+            {% trans "Run program" %}
+          </button>
+          <h4>{% trans "Output" %}</h4>
+          <textarea id="interactive-python-interpreter-output" wrap="off" class="form-control" disabled></textarea>
+        </form>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock html %}
+
+{% block css %}
+  <link rel="stylesheet" href="{% static 'interactives/python-interpreter/css/python-interpreter.css' %}">
+{% endblock css %}
+
+{% block js %}
+  <script type="text/javascript">
+    var py_interpreter_il8n = {
+      "welcome": "{% trans 'Welcome to computer programming, Student' %}"
+    };
+  </script>
+  <script type="text/javascript" src="{% static 'interactives/python-interpreter/js/python-interpreter.js' %}"></script>
+  <script type="text/javascript" src="{% static 'interactives/python-interpreter/js/third-party/skulpt.min.js' %}"></script>
+{% endblock js %}