diff --git a/src/runtime/README.md b/src/runtime/README.md
new file mode 100644
index 0000000..50a230a
--- /dev/null
+++ b/src/runtime/README.md
@@ -0,0 +1 @@
+For the interpreter code in Prolog, we have to make sure that there is a predicate named `codeable_version` so that we can properly capture the intermediate generated code.
\ No newline at end of file
diff --git a/src/runtime/ide.css b/src/runtime/ide.css
index 92ba519..26c5c70 100644
--- a/src/runtime/ide.css
+++ b/src/runtime/ide.css
@@ -18,6 +18,7 @@ textarea {
     text-align: left;
     width: 100%;
     height: 90%;
+    resize: none;
 }
 
 #editor {
diff --git a/src/runtime/ide.html b/src/runtime/ide.html
index 9ed6d06..d00d217 100644
--- a/src/runtime/ide.html
+++ b/src/runtime/ide.html
@@ -26,7 +26,7 @@
   <div id="output">
     <label for="code">Output</label> 
     <br/>
-    <textarea id="results" name="results"></textarea>
+    <textarea id="results" name="results" disabled></textarea>
   </div>
   
   <script type="text/javascript" src="./ide.js"></script>
diff --git a/src/runtime/ide.js b/src/runtime/ide.js
index d821d38..d681c8c 100644
--- a/src/runtime/ide.js
+++ b/src/runtime/ide.js
@@ -1,73 +1,124 @@
-function buildIntermediateCode(session) {
-  // , write(P), program_eval(P, 2, 3, Z).
+let INTERPRETER_CODE_PATH = "jhaleAssign3.pl";
+let intermediateCode = "";
+
+function hijackConsoleLog() {
+  let consoleLog = console.log;
+  console.log = (message) => {
+    if (message.toString().indexOf("codeable_version") > 0) {
+      consoleLog("[DEBUG] Capturing intermediate code");
+      intermediateCode = message;
+    }
+    consoleLog(message);
+  };
+}
+
+function prepareInterpreter() {
+  console.log("[INFO] Preparing interpreter");
+  let session = pl.create();
+
+  session.consult(INTERPRETER_CODE_PATH, {
+    success: () => {
+      console.log("[INFO] Loaded interpreter source code");
+      generateIntermediateCode(session);
+    },
+    error: (err) => console.log(err),
+  });
+}
+
+function generateIntermediateCode(session) {
   session.query("listing.", {
-    success: function(goal) { /* Goal parsed correctly */ 
-      console.log("Successfully parsed query!");
-      console.log(goal);
-      loadQuery(session);
+    success: (goal) => patchIntermediateCode(session),
+    error: function (err) {
+      console.log(err);
+      alert("[ERROR] Failed to generate intermediate parsing code");
+    },
+  });
+}
+
+function patchIntermediateCode(session) {
+  session.answer({
+    success: (answer) => {
+      var patchedCode = intermediateCode
+        .replace("[(|", "['('|")
+        .replace("[)|", "[')'|");
+      console.log(patchedCode);
+    },
+    error: (err) => {
+      console.log(err);
+      alert(
+        "[ERROR] Failed to generate intermediate parsing code. The runtime will not work."
+      );
     },
-    error: function(err) { /* Error parsing goal */ }
+  });
+}
+
+function registerRunListener() {
+  let runButton = document.getElementById("run");
+  runButton.addEventListener("click", (el, ev) => {
+    let session = pl.create()
+    session.consult(intermediateCode, {
+      success: () => {
+        console.log("[INFO] Loaded interpreter source code");
+        loadQuery(session);
+      },
+      error: (err) => {
+        console.log("[ERROR] Failed to load interpreter source code");
+        console.log(err)
+      },
+    })
   });
 }
 
 // Create the query (parse the query).
 function loadQuery(session) {
   // , write(P), program_eval(P, 2, 3, Z).
-  session.query("program(P, [begin, const, z, =, 3, ;, end, .], []).", {
-    success: function(goal) { /* Goal parsed correctly */ 
+  session.query("program(P, [begin, var, z, ; , var, x, ;, z, :=, x, end, .], []), write(P), program_eval(P, 2, 3, Z).", {
+    success: function (goal) {
+      /* Goal parsed correctly */
       console.log("Successfully parsed query!");
       console.log(goal);
       findAnswer(session);
     },
-    error: function(err) { /* Error parsing goal */ }
+    error: function (err) {
+      /* Error parsing goal */
+    },
   });
 }
 
 function findAnswer(session) {
   // Execute the query (execute the goal).
   session.answer({
-    success: function(answer) {
-        console.log(session.format_answer(answer)); // {X/apple}
-
-        // Ask for another answer after getting the first one.
-        //session.answer({
-        //    success: function(answer) {
-        //        console.log(answer); // {X/banana}
-        //   },
-            // error, fail, limit
-        //});
+    success: function (answer) {
+      console.log(session.format_answer(answer)); // {X/apple}
     },
-    error: function(err) { /* Uncaught error */ 
+    error: function (err) {
+      /* Uncaught error */
       console.log("Error: " + err);
     },
-    fail:  function() { /* No more answers */ 
+    fail: function () {
+      /* No more answers */
       console.log("No more answers!");
     },
-    limit: function() { /* Limit exceeded */ 
+    limit: function () {
+      /* Limit exceeded */
       console.log("Limit exceeded!");
-    }
+    },
   });
 }
 
 function tokenizer(fulltext) {
-    var tokens = fulltext.split(" ");
-    return tokens;
+  var tokens = fulltext.split(" ");
+  return tokens;
 }
 
 function main() {
-  console.log("Loading Custom JS Script!")
-  var session = pl.create();
-
-  // Create the session (parse the backing rules)
-  session.consult("jhaleAssign3.pl", {
-    success: function () { /* Program parsed correctly */ 
-      console.log("Successfully loaded program!");
-      buildIntermediateCode(session);
-    },
-    error: function (err) { /* Error parsing program */ }
-  });
+  hijackConsoleLog();
+  prepareInterpreter();
+  registerRunListener();
 
-  var tokens = tokenizer('tower-of-hanoi disks with source with target with medium if disks is-greater-than 0 disks1 equals subtraction of disks with 1 tower-of-hanoi of disks1 with source with medium with target show-value-of " Move disk " with disks with " from rod " with source with " with rod " with target tower-of-hanoi of disks1 with medium with target with source move-on answer equals no-answer')
+  var tokens = tokenizer(
+    'tower-of-hanoi disks with source with target with medium if disks is-greater-than 0 disks1 equals subtraction of disks with 1 tower-of-hanoi of disks1 with source with medium with target show-value-of " Move disk " with disks with " from rod " with source with " with rod " with target tower-of-hanoi of disks1 with medium with target with source move-on answer equals no-answer'
+  );
   console.log(tokens);
 }
 
diff --git a/src/runtime/jhaleAssign3.pl b/src/runtime/jhaleAssign3.pl
index 20344d7..6cda847 100644
--- a/src/runtime/jhaleAssign3.pl
+++ b/src/runtime/jhaleAssign3.pl
@@ -1,4 +1,8 @@
 % :- use_rendering(svgtree).  % Only works in SWISH.swi-prolog.org
+/**
+ * codeable_version(-Major,-Minor,-Patch) is det.
+ */
+codeable_version(0,0,1).
 
 %%%%% Token Parser %%%%%%
 digit(0) --> [0].