Add support for predefined input

Author: vishnupsatish

Diff for: _posts/2021-10-14-lesson-1.md

@@ -24,23 +24,12 @@ An if is a conditional.
 
 A for loop is a loop.
 
-<!-- <div class="editor-container p-3 pt-0">
-    <button id="run-button" class="btn btn-primary my-3">Run</button>
-    <button data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Clicking this will restart the Python interpreter, so be careful!" id="terminate-button" class="btn btn-danger my-3 ms-2">Terminate Pyodide</button>
-    <div id="editor"></div>
-    <div class="mt-3 input-output-container">
-        <div data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Input" class="d-block position-relative input-container">
-            <textarea id="input-tmp" class="input"></textarea>
-        </div>
-        <div id="output" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Output" class="output-container">
-
-        </div>
-    </div>
-</div> -->
-
 <div is="code-editor" id="editor-1">
 for i in range(5):
     print(i)
+#####
+a
+a
 </div>
 
 <div is="code-editor" id="editor-2">

Diff for: assets/js/code-editor.js

@@ -6,13 +6,25 @@ class CodeEditor extends HTMLDivElement {
 
         this.setAttribute("class", "editor-container p-3 pt-0")
 
+        let code_and_input = this.innerHTML.trim();
+        let code = '';
+        let input = '';
+
+        if (!code_and_input.includes('#####')) {
+            code = code_and_input;
+        } else {
+            code_and_input = code_and_input.split('#####');
+            code = code_and_input[0].trim();
+            input = code_and_input[1].trim();
+        }
+
         this.innerHTML = `
         <button id="run-button-${id}" class="btn btn-primary my-3">Run</button>
         <button id="terminate-button-${id}" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Clicking this will restart the Python interpreter, so be careful!" class="btn btn-danger my-3 ms-2">Terminate Pyodide</button>
-        <div class="editor" id="ace-editor-${id}">${this.innerHTML}</div>
+        <div class="editor" id="ace-editor-${id}">${code}</div>
         <div class="mt-3 input-output-container">
             <div data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Input" class="d-block position-relative input-container">
-                <textarea id="input-${id}" class="input"></textarea>
+                <textarea id="input-${id}" class="input">${input}</textarea>
             </div>
             <div id="output-${id}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Output" class="output-container">
     

Diff for: lessons.md

@@ -6,7 +6,13 @@ current_page: lessons
 
 # Lessons
 
-<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+<div>
+{% for post in site.posts %}
+    <h4><a class="text-light text-opacity-75" href="{{ post.url }}">{{ post.title }}</a></h4>
+{% endfor %}
+</div>
+
+<!--<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
     <li class="nav-item" role="presentation">
         <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-all"
             type="button">All Lessons</button>
@@ -55,4 +61,4 @@ current_page: lessons
             {% endif %}
         {% endfor %}
     </div>
-</div>
+</div>-->