save code to localStorage

app.py

@@ -25,10 +25,13 @@ def lessons():
 
 @app.route("/lesson", methods=["GET", "POST"])
 def lesson():
-    content = markdown(open(f"lessons/{request.args.get('name')}.md").read())
-    code = '\n'.join(json.load(open("resources/code.json"))[request.args.get('name')])
-    expected_output = json.load(open("resources/expected_output.json"))[request.args.get('name')]
-    return jsonify({"lesson": content, "code": code, "expected_output": expected_output, "name": request.args.get('name')})
+    name = request.args.get('name')
+    if name == "null":
+        name = "intro"
+    content = markdown(open(f"lessons/{name}.md").read())
+    code = '\n'.join(json.load(open("resources/code.json"))[name])
+    expected_output = json.load(open("resources/expected_output.json"))[name]
+    return jsonify({"lesson": content, "code": code, "expected_output": expected_output, "name": name})
 
 
 @app.route("/arc-sw.js")

static/globals.css

@@ -11,6 +11,7 @@ p, h1, h2, h3, h4, h5 {color: white; font-family: Lato}
 .run {
     background: #10cc5b;
     width: 100px;
+    min-width: 100px;
     height: 50px;
     border: none;
     border-radius: 2px;

static/index.css

@@ -92,6 +92,7 @@ h1 {
 
 #learn_more_button {
     background: none;
+    cursor: pointer;
 }
 
 #learn_more_button:hover {
@@ -143,13 +144,13 @@ h1 {
     height: fit-content;
     cursor: pointer;
     min-height: 220px;
-    display: table-cell;
+    display: table-cell
 }
 
-.perk p {width: calc(calc(30vw * 0.8) * 0.9); margin-left: calc(calc(calc(30vw * 0.8) * 0.9) * 0.01)}
 
 .perk:hover {
     padding: 20px;
+
 }
 
 .perk img {
@@ -190,5 +191,13 @@ h1 {
     }
 }
 
+#get_started_bottom {
+    margin: 20px 0 100px 0;
+    width: 200px;
+    height: 75px;
+    font-size: 30px;
+    background: #10cc5b;
+    cursor: pointer
+}
 
 

static/index.js

@@ -57,9 +57,6 @@ async function write() {
 }
 
 async function runHome() {
-    console.log("doing")
     const results = await execute(editors['input'].getValue())
-    console.log(results['run']['output'])
     editors['output'].setValue(editors['output'].getValue()+'\n'+results['run']['output']+'>>> ')
-    console.log("done")
 }

static/lessons.css

@@ -1,7 +1,7 @@
 #right {margin-left: auto; width: 50vw}
 
 #left {
-    margin: 30px auto 0 40px;
+    margin: 30px 20px 0 40px;
     min-width: calc(50vw - 65px);
     max-width: calc(50vw - 65px);
     max-height: 85vh;
@@ -329,10 +329,6 @@ h1 {
     width: 104%
 }
 
-#run_mobile {
-    margin-left: calc(100% - 80px);
-}
-
 html {overflow: hidden}
 
 @media (max-width: 900px) {
@@ -375,5 +371,17 @@ html {overflow: hidden}
     font: 400 22px Lato;
     cursor: pointer;
     text-align: center;
+}
+
+.button_container {
+    display: flex;
+    margin-left: calc(100% - 250px);
+}
+
+#button_container_mobile {
+    margin-left: calc(100% - 200px);
+}
 
+.button_container .run {
+    margin-left: 10px;
 }

static/lessons.js

@@ -45,16 +45,23 @@ Functions to handle input builtin
  */
 
 // Create the desktop version of the website
-async function createDesktop() {
+const createDesktop = async () => {
     // Get the lesson, code example, and expected output from the API
+    if (variables['lesson'] === null) {variables['lesson'] = 'intro'}
+    if (variables['last_lesson'] === null) {variables['last_lesson'] = 'intro'}
     const lesson_info = await (await fetch(`/lesson?name=${variables['lesson']}`)).json()
     variables['lesson_info'] = lesson_info
     variables['expected_output'] = lesson_info['expected_output']
     document.getElementById("left").innerHTML = lesson_info['lesson']
-
     // Create the editor
+    let code = lesson_info['code']
+    if (localStorage.getItem('answers')) {
+        if (JSON.parse(localStorage.getItem('answers'))[lesson_info['name']]) {
+            code = JSON.parse(localStorage.getItem('answers'))[lesson_info['name']]
+        }
+    }
     variables['codeAreas']['desktop']['input'] = CodeMirror(document.getElementById("right"), {
-        value: lesson_info['code'],
+        value: code,
         mode: "python",
         lineNumbers: true,
         theme: "theme",
@@ -71,21 +78,22 @@ async function createDesktop() {
     const spacer = document.createElement("div")
     spacer.classList.add("spacer")
     spacer.id = "spacer_desktop"
-
+    const buttonContainer = document.createElement("div")
+    buttonContainer.classList.add("button_container")
     const runButton = document.createElement("button")
     runButton.addEventListener("click", (e) => run(e))
     runButton.id = "run_desktop"
     runButton.classList.add("run")
     runButton.innerText = "Run ❯"
     const resetButton = document.createElement("button")
-    runButton.addEventListener("click", (e) => reset(e))
+    resetButton.addEventListener("click", (e) => reset(e))
     resetButton.id = "reset_desktop"
     resetButton.classList.add("run")
     resetButton.innerText = "Reset"
 
     // Add the components to the page
-    document.getElementById("right").appendChild(runButton)
-    document.getElementById("right").appendChild(spacer)
+    buttonContainer.append(resetButton, runButton)
+    document.getElementById("right").append(buttonContainer, spacer)
 
     // Create the shell
     changeShell('desktop', '>>> ', true)
@@ -119,34 +127,26 @@ async function createMobile() {
     const spacer = document.createElement("div")
     spacer.classList.add("spacer")
     spacer.id = "spacer_mobile"
+    const buttonContainer = document.createElement("div")
+    buttonContainer.classList.add("button_container")
+    buttonContainer.id = "button_container_mobile"
     const runButton = document.createElement("button")
     runButton.addEventListener("click", (e) => run(e))
     runButton.id = "run_mobile"
     runButton.classList.add("run")
     runButton.innerText = "Run ❯"
+    const resetButton = document.createElement("button")
+    resetButton.addEventListener("click", (e) => reset(e))
+    resetButton.id = "reset_mobile"
+    resetButton.classList.add("run")
+    resetButton.innerText = "Reset"
 
     // Add the components to the page
-    document.getElementById("code_page_mobile").appendChild(runButton)
+    buttonContainer.append(resetButton, runButton)
+    document.getElementById("code_page_mobile").append(buttonContainer, spacer)
     document.getElementById("code_page_mobile").appendChild(spacer)
     changeShell('mobile', '>>> ', true)
 
-    // Create the back and next buttons
-    const nextButton = document.createElement("button")
-    nextButton.id = "next_mobile"
-    nextButton.classList.add("run")
-    nextButton.classList.add("button_mobile")
-    if (lessons_to_nums[variables['last_lesson']] > lessons_to_nums[variables['lesson']]) {
-        nextButton.classList.add("valid")
-    }
-    nextButton.innerText = "Next"
-    nextButton.addEventListener("click", () => {changeLesson('next')})
-    const backButton = document.createElement("button")
-    backButton.id = "back_mobile"
-    backButton.classList.add("run")
-    backButton.classList.add("button_mobile")
-    backButton.innerText = "Back"
-    backButton.addEventListener("click", () => {changeLesson('back')})
-
     // Hide the code page
     document.getElementById("code_page_mobile").style.display = "none"
     // Allow them to move forward if they've completed this one
@@ -279,12 +279,6 @@ function switchTab(tab) {
     other_tab.classList.remove("selected")
 }
 
-// TODO: Make a compiling notification for when the code is running
-// TODO: Make a compiling notification for when the code is running
-// TODO: Make a compiling notification for when the code is running
-// TODO: Make a compiling notification for when the code is running
-// TODO: Make a compiling notification for when the code is running
-
 // Listener for the run button
 async function run(event) {
     send_notif("loading", "Running code...")
@@ -397,6 +391,15 @@ function changeLesson(direction, platform) {
             return
         }
         nextLesson = lessons_to_nums[variables['lesson']]+1
+        let answers
+        if (!localStorage.getItem('answers')) {
+            answers = {}
+        }
+        else {
+            answers = JSON.parse(localStorage.getItem('answers'))
+        }
+        answers[variables['lesson']] = variables['codeAreas'][platform]['input'].getValue()
+        localStorage.setItem('answers', JSON.stringify(answers))
     }
     else if (direction === 'back') {
         if (document.getElementById(`back_${platform}`).classList.contains("invalid")) {
@@ -430,7 +433,6 @@ async function input(platform) {
 }
 
 async function nextQuestion(question, platform) {
-    console.log(platform)
     let previousOutput = variables['codeAreas'][platform]['output'].getValue()
     if (variables['statements'].indexOf(question)+1 === variables['statements'].length) {
         let code = variables['codeAreas'][platform]['input'].getValue()
@@ -443,7 +445,6 @@ async function nextQuestion(question, platform) {
         }
         code = code.join('')
         let results = await execute(code)
-        console.log(results)
         variables['codeAreas'][platform]['output'].setValue(previousOutput + '\n' + results['run']['stdout'])
         variables['input_responses'] = []
         variables['statements'] = []
@@ -459,22 +460,24 @@ async function nextQuestion(question, platform) {
 function keyBindInput(editor, question, platform) {
     editor.setOption("extraKeys", {
         Enter: async () => {
-            console.log(question)
             let content = editor.getValue()
-            console.log(content)
             content = content.split("\n")
-            console.log(content)
             content = content[content.length-1]
-            console.log(content)
             if (content.occurrences(question) === 1) {content = content.replaceAll(`${question}`, "")}
             else {
                 while (content.occurrences(question) > 1) {
                     content = content.replace(`${question}`, "")
                 }
             }
-            console.log(content)
             variables['input_responses'].push(content)
             await nextQuestion(question, platform)
         }
     })
+}
+
+// Reset the code box
+function reset(event) {
+    let platform
+    event.target.id === 'reset_desktop' ? platform = 'desktop' : platform = 'mobile'
+    variables['codeAreas'][platform]['input'].setValue(variables['lesson_info']['code'])
 }

templates/index.html

@@ -36,7 +36,7 @@
                 <div id="blurb">
                     <h1>Learn Python, by writing Python.</h1>
                     Everyone knows that the best way to learn is by doing.
-                    That's why ExplorePython provides an interactive experience with coding right in the browser to help
+                    That's why ExplorePython provides an interactive coding experience right in the browser to help
                     beginners explore the Python language.
                 </div>
                 <div id="buttons">
@@ -69,7 +69,7 @@ <h1>What is ExplorePython?</h1>
                         <h3>Self Paced</h3>
                         <p>
                             There are no deadlines or rushed assignments, everything is at your own speed. You can take
-                            a break for weeks or finish it all in a day - there's never any pressure to be on a strict timeline.
+                            a break for weeks or finish everything in a day - there's never any pressure to be on a strict timeline.
                         </p>
                     </div>
                     <div class="perk">
@@ -83,8 +83,9 @@ <h3>Bite-Sized Lessons</h3>
                     <div class="perk">
                         <img src="{{ url_for('static', filename='icons/student_pen.svg') }}" alt="person with pen">
                         <h3>Comprehension Tests</h3>
-                        <p>At the end of every lesson, you get to test out what you've learned. This helps with your
-                            comprehension, retention, and lets you explore the Python language by continually practicing your skills.
+                        <p>At the end of every lesson, you get to test out what you've learned by writing code of your own.
+                            This helps with your comprehension, retention, and lets you explore the Python language by
+                            continually practicing your skills.
                         </p>
                     </div>
                 </div>
@@ -119,14 +120,9 @@ <h3>Real Coding</h3>
                     </div>
                 </div>
             </div>
+            <button class="get_started" id="get_started_bottom" onclick="location.replace('/lessons')">Get Started</button>
         </div>
     </body>
     <script src="{{ url_for('static', filename='lessons.js') }}"></script>
     <script src="{{ url_for('static', filename='index.js') }}"></script>
-</html>
-<!--ExplorePython is an interactive, fun way to learn and explore the Python language.
-                    With bite sized mini-lessons on topics from variables to Object Oriented Programming,
-                    ExplorePython provides the tools that every budding developer needs to succeed.
-                    After each lesson, you'll get the chance to test your knowledge by writing and running
-                    code relating to the topic you just learned.
-                    You then have your solution evaluated on the spot before moving on.-->
+</html>

templates/lessons.html

@@ -24,6 +24,7 @@
         if (!localStorage.getItem('lesson')) {localStorage.setItem('lesson', 'intro')}
         if (!localStorage.getItem('last_lesson')) {localStorage.setItem('last_lesson', 'intro')}
         console.log(`first_last_lesson: ${localStorage.getItem("last_lesson")}`)
+        console.log(localStorage.getItem("lesson"))
         createDesktop()
     </script>
     <body>
@@ -37,8 +38,8 @@
             <div id="left"></div>
             <div class="divide"></div>
             <div id="right"></div>
-            <button id="next_desktop" class="run next" onclick="changeLesson('next', 'mobile')">Next</button>
-            <button id="back_desktop" class="run next" onclick="changeLesson('back', 'mobile')">Back</button>
+            <button id="next_desktop" class="run next" onclick="changeLesson('next', 'desktop')">Next</button>
+            <button id="back_desktop" class="run next" onclick="changeLesson('back', 'desktop')">Back</button>
         </div>
         <div id="mobile">
             <header>