Merge pull request #23 from isa-group/feature/#21-ImplementingBrython

Feature/#21 implementing brython
isa-group · Jul 29, 2021 · 9b9db7b · 9b9db7b
2 parents 57880fb + ca938ff
commit 9b9db7b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/public/index.html b/public/index.html
@@ -7,14 +7,40 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <meta name="theme-color" content="#1A202C" />
     <!--<title><%= htmlWebpackPlugin.options.title %></title>-->
+
+    <script src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js">
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js">
+    </script>
+
     <script>
       window.logs = [];
       function println(log) {
         window.logs.push(log);
       }
     </script>
   </head>
-  <body>
+  <body onload=brython()>
+    <input style="visibility: hidden;" id="brythonButton"/>
+    <script type="text/python">
+      from browser import *
+      import javascript 
+      import json
+
+      def brythonButton(event):
+        msg = document["codePre"].innerHTML.split("\n")
+
+        toEval = "def f(inputs):\n"
+        for ms in msg:
+          toEval += "\n    " + ms
+        x = document["listInputs"].innerHTML
+
+        toEval += "\n    return outputs\nf(json.loads(x))"
+
+        document["resultsToValidate"].innerHTML = eval(toEval)
+
+      document['brythonButton'].bind('click', brythonButton)
+    </script>
     <noscript>
       <strong
         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work

diff --git a/src/pages/IDE.vue b/src/pages/IDE.vue
@@ -20,6 +20,8 @@
             :options="cmOption"
             :events="['inputRead', 'change']"
           ></codemirror>
+        <pre style="visibility: hidden;" id="codePre">{{code}}</pre>
+        <pre style="visibility: hidden;" id="listInputs">{{inputs}}</pre>
         </div>
         <div
           v-if="returnValue"
@@ -57,6 +59,7 @@
             <pre>$> {{ log }} </pre>
           </p>
         </div>
+        <pre style="visibility: hidden;" id="resultsToValidate"></pre>
 
         <div class="mt-5">
           <button
@@ -66,6 +69,15 @@
             Run program (CTRL-S)
           </button>
         </div>
+
+        <div class="mt-5">
+          <button
+            class="bg-orange-600 hover:bg-orange-500 p-3 text-white shadow-md focus:outline-none focus:shadow-outline m-1"
+            @click="validPython()"
+          >
+            Execute python
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -94,6 +106,8 @@ export default {
       returnValue: null,
       println: window.println,
       logs: window.logs,
+      inputs: [1,2,3,4],
+      solutions: [1,4,9,16],
     };
   },
   methods: {
@@ -126,6 +140,22 @@ export default {
       window.logs = [];
       this.logs = window.logs;
     },
+    validPython() {
+      document.getElementById("brythonButton").click();
+
+      if(document.getElementById("resultsToValidate").innerHTML == this.solutions+"") {
+        document.getElementById("resultsToValidate").innerHTML = "Your answer is correct!"
+        document.getElementById("resultsToValidate").style = "visibility: visible; background-color: hsla(89, 43%, 51%, 0.3); border-radius: 7px; color: green; padding: 5px; margin-top: 7px";
+      } else {
+        document.getElementById("resultsToValidate").innerHTML = "Your answer is not correct"
+        document.getElementById("resultsToValidate").style = "visibility: visible; background-color: hsla(0, 100%, 51%, 0.3); border-radius: 7px; color: red; padding: 5px; margin-top: 7px";
+      }
+      /*Example:
+      outputs = []
+      for i in inputs:
+        outputs.append(i*i)
+      */
+    },
   },
   computed: {
     cmEditor() {