lesson interface added
parent
92b2b12f92
commit
97e02d28c1
|
|
@ -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>
|
||||
`
|
||||
}
|
||||
];
|
||||
|
|
@ -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..."
|
||||
}
|
||||
]
|
||||
85
game.js
85
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
|
||||
|
|
@ -162,7 +245,7 @@ function gameLoop(timestamp) {
|
|||
gameWorld.update();
|
||||
gameWorld.draw(ctx);
|
||||
if (gameWorld.checkPlayerCompletedTask()) {
|
||||
logToConsole("<b>🏁 Task Completed! 🏁</b>");
|
||||
logToConsole("✅ Task Completed! ✅");
|
||||
togglePause();
|
||||
gameWorld.currentLevel++;
|
||||
}
|
||||
|
|
|
|||
212
index.html
212
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,
|
||||
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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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>
|
||||
|
|
|
|||
307
style.css
307
style.css
|
|
@ -1,46 +1,273 @@
|
|||
/* Use a grid layout for the entire page */
|
||||
body {
|
||||
/* Reset & base */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
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;
|
||||
padding: 0;
|
||||
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 {
|
||||
margin: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
#monaco-editor,
|
||||
.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;
|
||||
}
|
||||
Loading…
Reference in New Issue