lesson interface added

data/lessons.js

@@ -0,0 +1,27 @@
+export const lessons = [
+  {
+    id: 'lesson1',
+    title: '1. Introduction to Python',
+    difficulty: 'easy',
+    content: `
+      <p>Let's learn some Python..</p>
+      <p>We'll start with what's called a "Hello World" program to make sure everythings working.</p>
+      <p>In Python, this is done with the <code>print</code> function.</p>
+      <ol>
+      <li>In the code editor below, type <code>print("Hello World")</code></li>
+      <li>Click the "Run" button to execute your code</li>
+      <li>You should see "Hello World" printed in the output area</li>
+      </ol>
+    `,
+    doneCondition: (consoleText) => consoleText.includes("Hello World")
+  },
+  {
+    id: 'lesson2',
+    title: 'Using Interrupts',
+    difficulty: 'medium',
+    content: `
+      <p>Interrupts allow your code to react to pin changes asynchronously.</p>
+      <p>More content here...</p>
+    `
+  }
+];

data/lessons.json

@@ -0,0 +1,10 @@
+[
+    {
+        "title": "Lesson 1",
+        "content": "Welcome to Python. We are going to learn how to use python to control robots, but we need some basics first.</br>Let's start with the basics of Python programming. Python is a versatile language that is easy to learn and widely used in robotics.<br>"
+    },
+    {
+        "title": "Lesson 2",
+        "content": "Now let's learn about interrupts..."
+    }
+]

game.js

@@ -1,5 +1,86 @@
 import { Robot } from "./robot.js";
 import { GameWorld } from "./gameworld.js";
+import { lessons } from './data/lessons.js';
+
+
+let currentLesson = 0;
+
+async function loadLessons() {
+    const response = await fetch('data/lessons.json');
+    lessons = await response.json();
+    showLesson(0);
+}
+
+function showLesson(index) {
+    if (index < 0 || index >= lessons.length) return;
+    currentLesson = index;
+
+    const lesson = lessons[index];
+    document.getElementById('lesson-title').textContent = lesson.title;
+    document.getElementById('lesson-content').innerHTML = lesson.content;
+
+    document.getElementById('prev-lesson').disabled = index === 0;
+    document.getElementById('next-lesson').disabled = index === lessons.length - 1;
+
+    console.log(isLessonDone(lesson.id));
+    updateLessonStatus();
+}
+
+document.getElementById('prev-lesson').addEventListener('click', () => {
+    showLesson(currentLesson - 1);
+});
+document.getElementById('next-lesson').addEventListener('click', () => {
+    showLesson(currentLesson + 1);
+});
+
+function checkLessonDone(outputText) {
+
+    const lesson = lessons[currentLesson];
+    if (lesson.doneCondition && lesson.doneCondition(outputText)) {
+        markLessonDone(lesson.id);
+    }
+}
+
+function markLessonDone(lessonId) {
+    // Your logic here: e.g., store in localStorage or update UI
+    console.log(`Lesson ${lessonId} marked as done!`);
+    // For example:
+    localStorage.setItem(`lessonDone_${lessonId}`, 'true');
+    logToConsole("✅ Task Completed! ✅");
+    updateLessonStatus();
+}
+
+function updateLessonStatus() {
+  const statusEl = document.getElementById('lesson-status');
+  const lesson = lessons[currentLesson];
+  const done = isLessonDone(lesson.id); // your persistent check
+
+  if (done) {
+    statusEl.textContent = '✅';
+  } else {
+    statusEl.textContent = '';
+  }
+  document.getElementById('next-lesson').disabled = !done || currentLesson === lessons.length - 1;
+}
+
+
+function isLessonDone(lessonId) {
+    return localStorage.getItem(`lessonDone_${lessonId}`) === 'true';
+}
+
+function clearLessonProgress() {
+  Object.keys(localStorage).forEach(key => {
+    if (key.startsWith('lessonDone_')) {
+      localStorage.removeItem(key);
+    }
+  });
+  // Optionally update the UI after clearing
+  updateLessonStatus();
+}
+
+
+//clearLessonProgress(); // Clear progress on load for testing
+showLesson(0);
 
 const consoleElement = document.getElementById("console");
 const gameCanvas = document.getElementById("gameCanvas");
@@ -67,6 +148,8 @@ const logLines = [];
 function logToConsole(text) {
     if (text.includes("Pyodide not initialized yet.")) return;
 
+    checkLessonDone(text);
+
     const newLines = text.split('\n').map(line => line.trim()).filter(line => line !== "");
 
     // Add new lines to the array
@@ -161,8 +244,8 @@ function gameLoop(timestamp) {
 
             gameWorld.update();
             gameWorld.draw(ctx);
-            if (gameWorld.checkPlayerCompletedTask()){
+            if (gameWorld.checkPlayerCompletedTask()) {
-                logToConsole("<b>🏁 Task Completed! 🏁</b>");
+                logToConsole("✅ Task Completed! ✅");
                 togglePause();
                 gameWorld.currentLevel++;
             }

index.html

@@ -10,185 +10,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/min/vs/loader.js"></script>
 
-    <style>
-        /* Reset & base */
-        * {
-            box-sizing: border-box;
-        }
 
-        body,
+    <link rel="stylesheet" href="style.css">
-        html {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            font-family: Arial, sans-serif;
-            background-color: #fff;
-            display: grid;
-            grid-template-rows: auto 1fr auto;
-            grid-template-columns: 1fr;
-            min-height: 100vh;
-        }
-
-        /* ===== Header (top bar) ===== */
-        header {
-            background-color: #f3f4f6;
-            /* light gray */
-            padding: 16px 0;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-
-        .header-inner {
-            max-width: 960px;
-            margin: 0 auto;
-            padding: 0 16px;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: space-between;
-            gap: 16px;
-        }
-
-        header h1 {
-            font-size: 1.5rem;
-            font-weight: bold;
-            margin: 0 0 4px 0;
-            color: #1f2937;
-            /* gray-800 */
-        }
-
-        header p {
-            margin: 0;
-            font-size: 0.875rem;
-            color: #4b5563;
-            /* gray-600 */
-        }
-
-        .button-group {
-            display: flex;
-            gap: 12px;
-            flex-wrap: wrap;
-        }
-
-        button {
-            cursor: pointer;
-            border: none;
-            border-radius: 6px;
-            padding: 8px 16px;
-            font-weight: 600;
-            color: white;
-            box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
-            transition: background-color 0.3s ease;
-        }
-
-        #compile-button {
-            background-color: #2563eb;
-            /* blue-600 */
-        }
-
-        #compile-button:hover {
-            background-color: #1d4ed8;
-            /* blue-700 */
-        }
-
-        #pause-button {
-            background-color: #eab308;
-            /* yellow-500 */
-            color: #000;
-        }
-
-        #pause-button:hover {
-            background-color: #ca8a04;
-            /* yellow-600 */
-            color: #000;
-        }
-
-        #reset-button {
-            background-color: #dc2626;
-            /* red-600 */
-        }
-
-        #reset-button:hover {
-            background-color: #b91c1c;
-            /* red-700 */
-        }
-
-        /* ===== Main Content ===== */
-        main {
-            display: flex;
-            justify-content: center;
-            padding: 16px;
-            background: #f9fafb;
-        }
-
-        .container {
-            width: 75vw;
-            /* about 12.5% margin on each side */
-            max-width: 1200px;
-            height: 800px;
-            display: flex;
-            gap: 20px;
-            background: white;
-        }
-
-        /* Monaco editor - left half */
-        #monaco-editor {
-            flex: 1;
-            border: 1px solid #d1d5db;
-            /* gray-300 */
-            height: 100%;
-        }
-
-        /* Right side: canvas + console */
-        .right-side {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            height: 100%;
-        }
-
-        /* Canvas - top 2/3 */
-        #gameCanvas {
-            flex: 2;
-            border: 1px solid black;
-            width: 100%;
-            background: white;
-        }
-
-        #console {
-  flex: 1;
-  background: black;
-  color: white;
-  font-family: monospace, monospace;
-  padding: 8px;
-  overflow-y: auto;
-  border: 1px solid #d1d5db;
-  width: 100%;
-}
-
-/* alternate line colors */
-#console > div:nth-child(odd) {
-  background-color: #222;
-}
-
-#console > div:nth-child(even) {
-  background-color: #111;
-}
-
-        /* Responsive for smaller screens */
-        @media (max-width: 900px) {
-            .container {
-                flex-direction: column;
-                width: 95vw;
-                height: auto;
-            }
-
-            #monaco-editor,
-            .right-side {
-                height: 400px;
-            }
-        }
-    </style>
 </head>
 
 <body>
@@ -199,20 +22,43 @@
                 <h1>Learn CircuitPython</h1>
                 <p>Write code, simulate physics, and see instant output</p>
             </div>
-            <div class="button-group">
-                <button id="compile-button">Compile & Run</button>
-                <button id="pause-button">Pause</button>
-                <button id="reset-button">Reset</button>
-            </div>
         </div>
     </header>
 
+    <!-- New Lesson Box / Instructions Area -->
+    <section id="lesson-box">
+        <div class="content-width">
+            <h2 id="lesson-title">Lesson Title</h2>
+            <p id="lesson-content">Lesson Content</p>
+
+            <div class="lesson-nav">
+                <button id="prev-lesson">← Prev</button>
+                <div id="lesson-status" aria-live="polite"
+                    style="align-self: center; font-weight: 600; color: green; min-width: 120px; text-align: center;">
+                    <!-- status text appears here -->
+                </div>
+                <button id="next-lesson">Next →</button>
+            </div>
+        </div>
+    </section>
+
+
     <!-- Main Content -->
     <main>
         <div class="container">
             <div id="monaco-editor"></div>
             <div class="right-side">
                 <canvas id="gameCanvas"></canvas>
+                <div id="button-bar" style="display: flex; justify-content: space-between; padding: 8px;">
+                    <div class="left-buttons">
+                        <button id="compile-button">Compile & Run</button>
+                    </div>
+                    <div class="right-buttons">
+                        <button id="pause-button">Pause</button>
+                        <button id="reset-button">Reset</button>
+                    </div>
+                </div>
+
                 <div id="console"></div>
             </div>
         </div>

style.css

@@ -1,46 +1,273 @@
-/* Use a grid layout for the entire page */
+/* Reset & base */
-        body {
+* {
+    box-sizing: border-box;
+}
+
+body,
+html {
     margin: 0;
-            display: grid;
+    padding: 0;
-            grid-template-columns: 1fr 1fr; /* Two equal columns */
-            grid-template-rows: auto 2fr 1fr; /* Header, main content, and console sections */
-            height: 100vh; /* Full viewport height */
-            font-family: Arial, sans-serif;
-        }
-
-        h1 {
-            grid-column: span 2; /* Header spans both columns */
-            text-align: center;
-            margin: 10px 0;
-        }
-
-        #monaco-editor {
-            grid-column: 1; /* Left column */
-            grid-row: 2 / span 2; /* Takes full left side */
-            border: 1px solid #ccc;
-            height: 100%; /* Fill available space */
-        }
-
-        #gameCanvas {
-            grid-column: 2; /* Right column */
-            grid-row: 2; /* Top two-thirds */
-            width: 100%;
-            height: 100%; /* Canvas stretches to fill the grid cell */
-            border: 1px solid black;
-        }
-
-        #console {
-            grid-column: 2; /* Right column */
-            grid-row: 3; /* Bottom one-third */
-            background-color: black;
-            color: white;
-            font-family: monospace;
-            padding: 10px;
-            overflow-y: auto;
-            border: 1px solid #ccc;
     height: 100%;
+    font-family: Arial, sans-serif;
+    background-color: #fff;
+
+    display: flex;
+    flex-direction: column;
+}
+
+
+/* ===== Header (top bar) ===== */
+header {
+    background-color: #f3f4f6;
+    /* light gray */
+    padding: 16px 0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.header-inner {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 16px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+header h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 0 0 4px 0;
+    color: #1f2937;
+    /* gray-800 */
+}
+
+header p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #4b5563;
+    /* gray-600 */
+}
+
+.button-group {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+button {
+    cursor: pointer;
+    border: none;
+    border-radius: 6px;
+    padding: 8px 16px;
+    font-weight: 600;
+    color: white;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
+    transition: background-color 0.3s ease;
+}
+
+#compile-button {
+    background-color: #2563eb;
+    /* blue-600 */
+}
+
+#compile-button:hover {
+    background-color: #1d4ed8;
+    /* blue-700 */
+}
+
+#pause-button {
+    background-color: #eab308;
+    /* yellow-500 */
+    color: #000;
+}
+
+#pause-button:hover {
+    background-color: #ca8a04;
+    /* yellow-600 */
+    color: #000;
+}
+
+#reset-button {
+    background-color: #dc2626;
+    /* red-600 */
+}
+
+#reset-button:hover {
+    background-color: #b91c1c;
+    /* red-700 */
+}
+
+/* ===== Main Content ===== */
+main {
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+    background: #f9fafb;
+}
+
+.container {
+    width: 75vw;
+    /* about 12.5% margin on each side */
+    max-width: 1200px;
+    height: 800px;
+    display: flex;
+    gap: 20px;
+    background: white;
+}
+
+.content-width {
+  width: 75vw;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.lesson-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+#lesson-status {
+  font-weight: 600;
+  color: green;
+  min-width: 120px;
+  text-align: center;
+  user-select: none;
+}
+
+.lesson-nav button {
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #2563eb; /* blue */
+  color: white;
+  transition: background-color 0.2s ease;
+}
+
+.lesson-nav button:hover {
+  background-color: #1e40af; /* darker blue */
+}
+.lesson-nav button:disabled {
+  background-color: #ccc;
+  color: #666;
+  cursor: not-allowed;
+  box-shadow: none;
+  opacity: 0.6;
+}
+
+
+
+/* Monaco editor - left half */
+#monaco-editor {
+    flex: 1;
+    border: 1px solid #d1d5db;
+    /* gray-300 */
+    height: 100%;
+}
+
+/* Right side: canvas + console */
+.right-side {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    height: 100%;
+}
+
+/* Canvas - top 2/3 */
+#gameCanvas {
+    flex: 2;
+    border: 1px solid black;
+    width: 100%;
+    background: white;
+}
+
+#button-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px;
+    background: #f5f5f5;
+}
+
+#button-bar .left-buttons,
+#button-bar .right-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+#button-bar button {
+    padding: 6px 12px;
+    font-size: 14px;
+}
+
+
+#console {
+    flex: 1;
+    background: black;
+    color: white;
+    font-family: monospace, monospace;
+    padding: 8px;
+    overflow-y: auto;
+    border: 1px solid #d1d5db;
+    width: 100%;
+}
+
+/* alternate line colors */
+#console>div:nth-child(odd) {
+    background-color: #222;
+}
+
+#console>div:nth-child(even) {
+    background-color: #111;
+}
+
+/* Responsive for smaller screens */
+@media (max-width: 900px) {
+    .container {
+        flex-direction: column;
+        width: 95vw;
+        height: auto;
     }
 
-        button {
+    #monaco-editor,
-            margin: 10px;
+    .right-side {
+        height: 400px;
     }
+}
+
+#lesson-box {
+  background: #f9f9f9;
+  padding: 8px 16px;
+  border-bottom: 1px solid #ddd;
+  font-family: sans-serif;
+  width: 100%;
+  box-sizing: border-box;
+  flex-shrink: 0; /* Prevent flex containers from stretching it */
+  flex-grow: 0;
+  overflow: hidden;
+}
+
+
+.lesson-inner {
+    max-width: 960px;
+    margin: 0 auto;
+    color: #333;
+}
+
+#lesson-box p {
+  margin: 0;
+  line-height: 1.4;
+}
+
+
+#lesson-box code {
+    background: #eee;
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-family: monospace;
+}