public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix: playground mode with HTML & CSS editor, no validation

Browse Source
This commit is contained in:
Michael Czechowski
2025-12-31 00:38:41 +01:00
parent 4a9db6d10f
commit 6390e29caf
3 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lessons/99-playground.json
View File

@@ -3,7 +3,7 @@
"id": "playground", "id": "playground",
"title": "Playground", "title": "Playground",
"description": "Free-form HTML & CSS playground", "description": "Free-form HTML & CSS playground",
"mode": "html", "mode": "playground",
"difficulty": "beginner", "difficulty": "beginner",
"lessons": [ "lessons": [
{ {
@@ -12,9 +12,9 @@
"description": "", "description": "",
"task": "", "task": "",
"previewHTML": "", "previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }", "previewBaseCSS": "",
"sandboxCSS": "", "sandboxCSS": "",
"initialCode": "", "initialCode": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
"solution": "", "solution": "",
"previewContainer": "preview-area", "previewContainer": "preview-area",
"validations": [] "validations": []

6
lessons/de/99-playground.json
View File

@@ -3,7 +3,7 @@
"id": "playground", "id": "playground",
"title": "Playground", "title": "Playground",
"description": "Freier HTML & CSS Spielplatz", "description": "Freier HTML & CSS Spielplatz",
"mode": "html", "mode": "playground",
"difficulty": "beginner", "difficulty": "beginner",
"lessons": [ "lessons": [
{ {
@@ -12,9 +12,9 @@
"description": "", "description": "",
"task": "", "task": "",
"previewHTML": "", "previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }", "previewBaseCSS": "",
"sandboxCSS": "", "sandboxCSS": "",
"initialCode": "", "initialCode": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hallo Welt</h1>\n<p>Los geht's!</p>",
"solution": "", "solution": "",
"previewContainer": "preview-area", "previewContainer": "preview-area",
"validations": [] "validations": []

12
src/app.js
View File

@@ -363,6 +363,11 @@ function updateEditorForMode(mode) {
placeholder: "Enter your CSS code here...", placeholder: "Enter your CSS code here...",
label: "CSS Editor", label: "CSS Editor",
cmMode: "css" cmMode: "css"
},
playground: {
placeholder: "<style>\n /* CSS here */\n</style>\n\n<!-- HTML here -->",
label: "HTML & CSS",
cmMode: "html"
} }
}; };
@@ -575,6 +580,8 @@ function resetCode() {
function runCode() { function runCode() {
const userCode = codeEditor ? codeEditor.getValue() : ""; const userCode = codeEditor ? codeEditor.getValue() : "";
const engineState = lessonEngine.getCurrentState();
const isPlayground = engineState.module?.id === "playground";
// Rotate the Run button icon // Rotate the Run button icon
const runButtonImg = document.querySelector("#run-btn img"); const runButtonImg = document.querySelector("#run-btn img");
@@ -586,6 +593,11 @@ function runCode() {
// Apply the code to the preview via LessonEngine // Apply the code to the preview via LessonEngine
lessonEngine.applyUserCode(userCode, true); lessonEngine.applyUserCode(userCode, true);
// Skip validation for playground mode
if (isPlayground) {
return;
}
// Validate code using LessonEngine // Validate code using LessonEngine
const validationResult = lessonEngine.validateCode(); const validationResult = lessonEngine.validateCode();