refactor(i18n): remove duplicate German files
German content now handled via i18n.js translations module. Removes index.de.html and app.de.js in favor of single language-agnostic codebase.
This commit is contained in:
594
src/app.de.js
594
src/app.de.js
@@ -1,594 +0,0 @@
|
|||||||
import { LessonEngine } from "./impl/LessonEngine.js";
|
|
||||||
import { CodeEditor } from "./impl/CodeEditor.js";
|
|
||||||
import { renderLesson, renderModuleList, renderLevelIndicator, updateActiveLessonInSidebar } from "./helpers/renderer.js";
|
|
||||||
import { loadModules } from "./config/lessons.de.js";
|
|
||||||
|
|
||||||
// Simplified state - LessonEngine now manages lesson state and progress
|
|
||||||
const state = {
|
|
||||||
userSettings: {
|
|
||||||
disableFeedbackErrors: false
|
|
||||||
},
|
|
||||||
showExpected: false
|
|
||||||
};
|
|
||||||
|
|
||||||
// DOM elements - updated for new layout
|
|
||||||
const elements = {
|
|
||||||
// Header
|
|
||||||
menuBtn: document.getElementById("menu-btn"),
|
|
||||||
helpBtn: document.getElementById("help-btn"),
|
|
||||||
|
|
||||||
// Left panel
|
|
||||||
lessonTitle: document.getElementById("lesson-title"),
|
|
||||||
lessonDescription: document.getElementById("lesson-description"),
|
|
||||||
taskInstruction: document.getElementById("task-instruction"),
|
|
||||||
codeInput: document.getElementById("code-input"),
|
|
||||||
runBtn: document.getElementById("run-btn"),
|
|
||||||
undoBtn: document.getElementById("undo-btn"),
|
|
||||||
redoBtn: document.getElementById("redo-btn"),
|
|
||||||
resetCodeBtn: document.getElementById("reset-code-btn"),
|
|
||||||
hintArea: document.getElementById("hint-area"),
|
|
||||||
editorContent: document.querySelector(".editor-content"),
|
|
||||||
codeEditor: document.querySelector(".code-editor"),
|
|
||||||
|
|
||||||
// Right panel
|
|
||||||
previewArea: document.getElementById("preview-area"),
|
|
||||||
showExpectedBtn: document.getElementById("show-expected-btn"),
|
|
||||||
expectedOverlay: document.getElementById("expected-overlay"),
|
|
||||||
previewWrapper: document.querySelector(".preview-wrapper"),
|
|
||||||
prevBtn: document.getElementById("prev-btn"),
|
|
||||||
nextBtn: document.getElementById("next-btn"),
|
|
||||||
levelIndicator: document.getElementById("level-indicator"),
|
|
||||||
|
|
||||||
// Sidebar
|
|
||||||
sidebarDrawer: document.getElementById("sidebar-drawer"),
|
|
||||||
sidebarBackdrop: document.getElementById("sidebar-backdrop"),
|
|
||||||
closeSidebar: document.getElementById("close-sidebar"),
|
|
||||||
moduleList: document.getElementById("module-list"),
|
|
||||||
progressFill: document.getElementById("progress-fill"),
|
|
||||||
progressText: document.getElementById("progress-text"),
|
|
||||||
resetBtn: document.getElementById("reset-btn"),
|
|
||||||
disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),
|
|
||||||
|
|
||||||
// Dialogs
|
|
||||||
helpDialog: document.getElementById("help-dialog"),
|
|
||||||
helpDialogClose: document.getElementById("help-dialog-close"),
|
|
||||||
resetDialog: document.getElementById("reset-dialog"),
|
|
||||||
resetDialogClose: document.getElementById("reset-dialog-close"),
|
|
||||||
cancelReset: document.getElementById("cancel-reset"),
|
|
||||||
confirmReset: document.getElementById("confirm-reset")
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initialize the lesson engine - now the single source of truth
|
|
||||||
const lessonEngine = new LessonEngine();
|
|
||||||
|
|
||||||
// Code editor instance (initialized later)
|
|
||||||
let codeEditor = null;
|
|
||||||
let currentMode = "css";
|
|
||||||
|
|
||||||
// ================= SIDEBAR FUNCTIONS =================
|
|
||||||
|
|
||||||
// Track element that opened sidebar for focus return
|
|
||||||
let sidebarTrigger = null;
|
|
||||||
|
|
||||||
function openSidebar() {
|
|
||||||
// Store trigger element for focus return
|
|
||||||
sidebarTrigger = document.activeElement;
|
|
||||||
|
|
||||||
elements.sidebarDrawer.classList.add("open");
|
|
||||||
elements.sidebarBackdrop.classList.add("visible");
|
|
||||||
|
|
||||||
// Move focus to close button for keyboard users
|
|
||||||
elements.closeSidebar.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeSidebar() {
|
|
||||||
elements.sidebarDrawer.classList.remove("open");
|
|
||||||
elements.sidebarBackdrop.classList.remove("visible");
|
|
||||||
|
|
||||||
// Return focus to trigger element
|
|
||||||
if (sidebarTrigger && typeof sidebarTrigger.focus === "function") {
|
|
||||||
sidebarTrigger.focus();
|
|
||||||
sidebarTrigger = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= EXPECTED RESULT TOGGLE =================
|
|
||||||
|
|
||||||
function toggleExpectedResult() {
|
|
||||||
state.showExpected = !state.showExpected;
|
|
||||||
|
|
||||||
if (state.showExpected) {
|
|
||||||
elements.expectedOverlay.classList.add("visible");
|
|
||||||
elements.showExpectedBtn.textContent = "Lösung ausblenden";
|
|
||||||
elements.showExpectedBtn.classList.add("btn-primary");
|
|
||||||
} else {
|
|
||||||
elements.expectedOverlay.classList.remove("visible");
|
|
||||||
elements.showExpectedBtn.textContent = "Lösung zeigen";
|
|
||||||
elements.showExpectedBtn.classList.remove("btn-primary");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= HINT SYSTEM =================
|
|
||||||
|
|
||||||
function showHint(message, step, total, isSuccess = false) {
|
|
||||||
const hintClass = isSuccess ? "hint hint-success" : "hint";
|
|
||||||
elements.hintArea.innerHTML = `
|
|
||||||
<div class="${hintClass}">
|
|
||||||
<span class="hint-progress">${step}/${total}</span>
|
|
||||||
<span class="hint-message">${message}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearHint() {
|
|
||||||
elements.hintArea.innerHTML = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSuccessHint(message) {
|
|
||||||
elements.hintArea.innerHTML = `
|
|
||||||
<div class="hint hint-success">
|
|
||||||
<span class="hint-progress">✓</span>
|
|
||||||
<span class="hint-message">${message}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= PROGRESS DISPLAY =================
|
|
||||||
|
|
||||||
function updateProgressDisplay() {
|
|
||||||
const stats = lessonEngine.getProgressStats();
|
|
||||||
elements.progressFill.style.width = `${stats.percentComplete}%`;
|
|
||||||
elements.progressText.textContent = `${stats.percentComplete}% abgeschlossen (${stats.totalCompleted}/${stats.totalLessons})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= USER SETTINGS =================
|
|
||||||
|
|
||||||
function loadUserSettings() {
|
|
||||||
const savedSettings = localStorage.getItem("codeCrispies.settings");
|
|
||||||
if (savedSettings) {
|
|
||||||
try {
|
|
||||||
const settings = JSON.parse(savedSettings);
|
|
||||||
state.userSettings = { ...state.userSettings, ...settings };
|
|
||||||
elements.disableFeedbackToggle.checked = !state.userSettings.disableFeedbackErrors;
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Fehler beim Laden der Einstellungen:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveUserSettings() {
|
|
||||||
localStorage.setItem("codeCrispies.settings", JSON.stringify(state.userSettings));
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= MODULE INITIALIZATION =================
|
|
||||||
|
|
||||||
async function initializeModules() {
|
|
||||||
try {
|
|
||||||
const modules = await loadModules();
|
|
||||||
lessonEngine.setModules(modules);
|
|
||||||
|
|
||||||
// Use the new renderModuleList function with both callbacks
|
|
||||||
renderModuleList(elements.moduleList, modules, selectModule, selectLesson);
|
|
||||||
|
|
||||||
// Load saved progress and select appropriate module
|
|
||||||
const progressData = lessonEngine.loadUserProgress();
|
|
||||||
const lastModuleId = progressData?.lastModuleId;
|
|
||||||
|
|
||||||
if (lastModuleId && modules.find((m) => m.id === lastModuleId)) {
|
|
||||||
selectModule(lastModuleId);
|
|
||||||
} else if (modules.length > 0) {
|
|
||||||
selectModule(modules[0].id);
|
|
||||||
}
|
|
||||||
|
|
||||||
updateProgressDisplay();
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Module konnten nicht geladen werden:", error);
|
|
||||||
elements.lessonDescription.textContent = "Module konnten nicht geladen werden. Bitte Seite neu laden.";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= MODULE/LESSON SELECTION =================
|
|
||||||
|
|
||||||
function selectModule(moduleId) {
|
|
||||||
const success = lessonEngine.setModuleById(moduleId);
|
|
||||||
if (!success) return;
|
|
||||||
|
|
||||||
// Update module list UI to highlight the active module
|
|
||||||
const moduleItems = elements.moduleList.querySelectorAll(".module-header");
|
|
||||||
moduleItems.forEach((item) => {
|
|
||||||
item.classList.remove("active");
|
|
||||||
if (item.dataset.moduleId === moduleId) {
|
|
||||||
item.classList.add("active");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
loadCurrentLesson();
|
|
||||||
resetSuccessIndicators();
|
|
||||||
|
|
||||||
// Close sidebar after selection on mobile
|
|
||||||
if (window.innerWidth <= 768) {
|
|
||||||
closeSidebar();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectLesson(moduleId, lessonIndex) {
|
|
||||||
const currentState = lessonEngine.getCurrentState();
|
|
||||||
if (!currentState.module || currentState.module.id !== moduleId) {
|
|
||||||
lessonEngine.setModuleById(moduleId);
|
|
||||||
}
|
|
||||||
|
|
||||||
lessonEngine.setLessonByIndex(lessonIndex);
|
|
||||||
loadCurrentLesson();
|
|
||||||
|
|
||||||
// Close sidebar after selection on mobile
|
|
||||||
if (window.innerWidth <= 768) {
|
|
||||||
closeSidebar();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= LESSON LOADING =================
|
|
||||||
|
|
||||||
function resetSuccessIndicators() {
|
|
||||||
elements.codeEditor.classList.remove("success-highlight");
|
|
||||||
elements.lessonTitle.classList.remove("success-text");
|
|
||||||
elements.nextBtn.classList.remove("success");
|
|
||||||
elements.taskInstruction.classList.remove("success-instruction");
|
|
||||||
elements.runBtn.classList.remove("success");
|
|
||||||
elements.previewWrapper?.classList.remove("matched");
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateEditorForMode(mode) {
|
|
||||||
const editorLabel = document.querySelector(".editor-label");
|
|
||||||
|
|
||||||
const modeConfig = {
|
|
||||||
html: {
|
|
||||||
placeholder: "HTML hier eingeben... Probiere: nav>ul>li*3 dann Tab drücken",
|
|
||||||
label: "HTML-Editor",
|
|
||||||
cmMode: "html"
|
|
||||||
},
|
|
||||||
tailwind: {
|
|
||||||
placeholder: "Tailwind-Klassen eingeben (z.B. bg-blue-500 text-white p-4)",
|
|
||||||
label: "Tailwind-Klassen",
|
|
||||||
cmMode: "css"
|
|
||||||
},
|
|
||||||
css: {
|
|
||||||
placeholder: "CSS-Code hier eingeben...",
|
|
||||||
label: "CSS-Editor",
|
|
||||||
cmMode: "css"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const config = modeConfig[mode] || modeConfig.css;
|
|
||||||
if (editorLabel) editorLabel.textContent = config.label;
|
|
||||||
|
|
||||||
// Update CodeMirror mode if needed
|
|
||||||
if (codeEditor && currentMode !== config.cmMode) {
|
|
||||||
currentMode = config.cmMode;
|
|
||||||
codeEditor.setMode(config.cmMode);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadCurrentLesson() {
|
|
||||||
const engineState = lessonEngine.getCurrentState();
|
|
||||||
|
|
||||||
if (!engineState.module || !engineState.lesson) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const lesson = engineState.lesson;
|
|
||||||
const mode = lesson.mode || engineState.module?.mode || "css";
|
|
||||||
|
|
||||||
// Update UI based on mode
|
|
||||||
updateEditorForMode(mode);
|
|
||||||
|
|
||||||
// Reset any success indicators
|
|
||||||
resetSuccessIndicators();
|
|
||||||
|
|
||||||
// Clear hints
|
|
||||||
clearHint();
|
|
||||||
|
|
||||||
// Hide expected overlay
|
|
||||||
state.showExpected = false;
|
|
||||||
elements.expectedOverlay.classList.remove("visible");
|
|
||||||
elements.showExpectedBtn.textContent = "Lösung zeigen";
|
|
||||||
elements.showExpectedBtn.classList.remove("btn-primary");
|
|
||||||
|
|
||||||
// Update UI
|
|
||||||
renderLesson(
|
|
||||||
elements.lessonTitle,
|
|
||||||
elements.lessonDescription,
|
|
||||||
elements.taskInstruction,
|
|
||||||
elements.previewArea,
|
|
||||||
null, // editorPrefix no longer used
|
|
||||||
null, // codeInput no longer used (using CodeMirror)
|
|
||||||
null, // editorSuffix no longer used
|
|
||||||
lesson
|
|
||||||
);
|
|
||||||
|
|
||||||
// Set user code in CodeMirror
|
|
||||||
if (codeEditor) {
|
|
||||||
codeEditor.setValue(engineState.userCode);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update Run button text based on completion status
|
|
||||||
if (engineState.isCompleted) {
|
|
||||||
elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Erneut anwenden';
|
|
||||||
|
|
||||||
// Add completion badge if not present
|
|
||||||
if (!document.querySelector(".completion-badge")) {
|
|
||||||
const badge = document.createElement("span");
|
|
||||||
badge.className = "completion-badge";
|
|
||||||
badge.textContent = "Erledigt";
|
|
||||||
elements.lessonTitle.appendChild(badge);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Ausführen';
|
|
||||||
|
|
||||||
// Remove completion badge if exists
|
|
||||||
const badge = document.querySelector(".completion-badge");
|
|
||||||
if (badge) badge.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update level indicator
|
|
||||||
renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
|
|
||||||
|
|
||||||
// Update active lesson in sidebar
|
|
||||||
updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);
|
|
||||||
|
|
||||||
// Update navigation buttons
|
|
||||||
updateNavigationButtons();
|
|
||||||
|
|
||||||
// Update progress display
|
|
||||||
updateProgressDisplay();
|
|
||||||
|
|
||||||
// Focus on the code editor
|
|
||||||
if (codeEditor) {
|
|
||||||
codeEditor.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render the expected/solution preview
|
|
||||||
lessonEngine.renderExpectedPreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= LIVE PREVIEW =================
|
|
||||||
|
|
||||||
let previewTimer = null;
|
|
||||||
|
|
||||||
function handleEditorChange(code) {
|
|
||||||
if (previewTimer) {
|
|
||||||
clearTimeout(previewTimer);
|
|
||||||
}
|
|
||||||
|
|
||||||
previewTimer = setTimeout(() => {
|
|
||||||
runCode();
|
|
||||||
}, 800);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= NAVIGATION =================
|
|
||||||
|
|
||||||
function updateNavigationButtons() {
|
|
||||||
const engineState = lessonEngine.getCurrentState();
|
|
||||||
|
|
||||||
elements.prevBtn.disabled = !engineState.canGoPrev;
|
|
||||||
elements.nextBtn.disabled = !engineState.canGoNext;
|
|
||||||
|
|
||||||
elements.prevBtn.classList.toggle("btn-disabled", !engineState.canGoPrev);
|
|
||||||
elements.nextBtn.classList.toggle("btn-disabled", !engineState.canGoNext);
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextLesson() {
|
|
||||||
const success = lessonEngine.nextLesson();
|
|
||||||
if (success) {
|
|
||||||
loadCurrentLesson();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function prevLesson() {
|
|
||||||
const success = lessonEngine.previousLesson();
|
|
||||||
if (success) {
|
|
||||||
loadCurrentLesson();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= CODE EXECUTION =================
|
|
||||||
|
|
||||||
function resetCode() {
|
|
||||||
// Reset editor to initial code for current lesson
|
|
||||||
lessonEngine.reset();
|
|
||||||
const engineState = lessonEngine.getCurrentState();
|
|
||||||
if (codeEditor && engineState.lesson) {
|
|
||||||
codeEditor.setValue(engineState.lesson.initialCode || "");
|
|
||||||
}
|
|
||||||
// Clear hints and success indicators
|
|
||||||
clearHint();
|
|
||||||
resetSuccessIndicators();
|
|
||||||
}
|
|
||||||
|
|
||||||
function runCode() {
|
|
||||||
const userCode = codeEditor ? codeEditor.getValue() : "";
|
|
||||||
|
|
||||||
// Rotate the Run button icon
|
|
||||||
const runButtonImg = document.querySelector("#run-btn img");
|
|
||||||
if (runButtonImg) {
|
|
||||||
const currentRotation = parseInt(runButtonImg.style.transform?.match(/\d+/)?.[0] || "0");
|
|
||||||
runButtonImg.style.transform = `rotate(${currentRotation + 180}deg)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply the code to the preview via LessonEngine
|
|
||||||
lessonEngine.applyUserCode(userCode, true);
|
|
||||||
|
|
||||||
// Validate code using LessonEngine
|
|
||||||
const validationResult = lessonEngine.validateCode();
|
|
||||||
|
|
||||||
if (validationResult.isValid) {
|
|
||||||
// Show success hint
|
|
||||||
showSuccessHint(validationResult.message || "CRISPY! ٩(◕‿◕)۶ Dein Code funktioniert.");
|
|
||||||
|
|
||||||
// Update Run button
|
|
||||||
elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Erneut anwenden';
|
|
||||||
elements.runBtn.classList.add("success");
|
|
||||||
|
|
||||||
// Add completion badge
|
|
||||||
if (!document.querySelector(".completion-badge")) {
|
|
||||||
const badge = document.createElement("span");
|
|
||||||
badge.className = "completion-badge";
|
|
||||||
badge.textContent = "Erledigt";
|
|
||||||
elements.lessonTitle.appendChild(badge);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add success visual indicators
|
|
||||||
elements.codeEditor.classList.add("success-highlight");
|
|
||||||
elements.lessonTitle.classList.add("success-text");
|
|
||||||
elements.nextBtn.classList.add("success");
|
|
||||||
elements.taskInstruction.classList.add("success-instruction");
|
|
||||||
|
|
||||||
// Show match animation
|
|
||||||
elements.previewWrapper?.classList.add("matched");
|
|
||||||
setTimeout(() => {
|
|
||||||
elements.previewWrapper?.classList.remove("matched");
|
|
||||||
}, 2500);
|
|
||||||
|
|
||||||
updateNavigationButtons();
|
|
||||||
updateProgressDisplay();
|
|
||||||
} else {
|
|
||||||
// Reset success indicators
|
|
||||||
resetSuccessIndicators();
|
|
||||||
|
|
||||||
// Show hint with step progress
|
|
||||||
const step = validationResult.validCases + 1;
|
|
||||||
const total = validationResult.totalCases;
|
|
||||||
|
|
||||||
// Only show hints if enabled
|
|
||||||
if (!state.userSettings.disableFeedbackErrors) {
|
|
||||||
showHint(validationResult.message || "Weiter versuchen!", step, total);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= DIALOGS =================
|
|
||||||
|
|
||||||
function showHelp() {
|
|
||||||
elements.helpDialog.showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeHelpDialog() {
|
|
||||||
elements.helpDialog.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
function showResetConfirmation() {
|
|
||||||
elements.resetDialog.showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeResetDialog() {
|
|
||||||
elements.resetDialog.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleResetConfirm() {
|
|
||||||
lessonEngine.clearProgress();
|
|
||||||
closeResetDialog();
|
|
||||||
closeSidebar();
|
|
||||||
|
|
||||||
// Reload first module
|
|
||||||
const modules = lessonEngine.modules;
|
|
||||||
if (modules.length > 0) {
|
|
||||||
selectModule(modules[0].id);
|
|
||||||
}
|
|
||||||
|
|
||||||
updateProgressDisplay();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================= INITIALIZATION =================
|
|
||||||
|
|
||||||
function initCodeEditor() {
|
|
||||||
const container = elements.editorContent;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
// Remove the textarea - CodeMirror will replace it
|
|
||||||
const textarea = container.querySelector("textarea");
|
|
||||||
if (textarea) {
|
|
||||||
textarea.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize CodeMirror
|
|
||||||
codeEditor = new CodeEditor(container, {
|
|
||||||
mode: currentMode,
|
|
||||||
placeholder: "Code hier eingeben...",
|
|
||||||
onChange: handleEditorChange
|
|
||||||
});
|
|
||||||
|
|
||||||
codeEditor.init("");
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
loadUserSettings();
|
|
||||||
|
|
||||||
// Initialize CodeMirror editor
|
|
||||||
initCodeEditor();
|
|
||||||
|
|
||||||
// Load modules after editor is ready
|
|
||||||
initializeModules().catch(console.error);
|
|
||||||
|
|
||||||
// Sidebar controls
|
|
||||||
elements.menuBtn.addEventListener("click", openSidebar);
|
|
||||||
elements.closeSidebar.addEventListener("click", closeSidebar);
|
|
||||||
elements.sidebarBackdrop.addEventListener("click", closeSidebar);
|
|
||||||
|
|
||||||
// Expected result toggle
|
|
||||||
elements.showExpectedBtn.addEventListener("click", toggleExpectedResult);
|
|
||||||
|
|
||||||
// Navigation
|
|
||||||
elements.prevBtn.addEventListener("click", prevLesson);
|
|
||||||
elements.nextBtn.addEventListener("click", nextLesson);
|
|
||||||
elements.runBtn.addEventListener("click", runCode);
|
|
||||||
|
|
||||||
// Editor tools
|
|
||||||
elements.undoBtn.addEventListener("click", () => {
|
|
||||||
if (codeEditor) codeEditor.undo();
|
|
||||||
});
|
|
||||||
elements.redoBtn.addEventListener("click", () => {
|
|
||||||
if (codeEditor) codeEditor.redo();
|
|
||||||
});
|
|
||||||
elements.resetCodeBtn.addEventListener("click", resetCode);
|
|
||||||
|
|
||||||
// Dialogs
|
|
||||||
elements.helpBtn.addEventListener("click", showHelp);
|
|
||||||
elements.helpDialogClose.addEventListener("click", closeHelpDialog);
|
|
||||||
elements.helpDialog.addEventListener("click", (e) => {
|
|
||||||
if (e.target === elements.helpDialog) closeHelpDialog();
|
|
||||||
});
|
|
||||||
elements.resetBtn.addEventListener("click", showResetConfirmation);
|
|
||||||
elements.resetDialogClose.addEventListener("click", closeResetDialog);
|
|
||||||
elements.resetDialog.addEventListener("click", (e) => {
|
|
||||||
if (e.target === elements.resetDialog) closeResetDialog();
|
|
||||||
});
|
|
||||||
elements.cancelReset.addEventListener("click", closeResetDialog);
|
|
||||||
elements.confirmReset.addEventListener("click", handleResetConfirm);
|
|
||||||
|
|
||||||
// Settings
|
|
||||||
elements.disableFeedbackToggle.addEventListener("change", (e) => {
|
|
||||||
state.userSettings.disableFeedbackErrors = !e.target.checked;
|
|
||||||
saveUserSettings();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Click on editor content to focus CodeMirror
|
|
||||||
elements.editorContent?.addEventListener("click", () => {
|
|
||||||
if (codeEditor) codeEditor.focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Keyboard shortcuts
|
|
||||||
document.addEventListener("keydown", (e) => {
|
|
||||||
// Ctrl+Enter to run code
|
|
||||||
if (e.ctrlKey && e.key === "Enter") {
|
|
||||||
runCode();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Escape to close sidebar (dialogs handle Escape natively)
|
|
||||||
if (e.key === "Escape") {
|
|
||||||
closeSidebar();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start the application
|
|
||||||
init();
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>CODE CRISPIES - CSS interaktiv lernen</title>
|
|
||||||
<link rel="stylesheet" href="main.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
|
||||||
<div class="app-container">
|
|
||||||
<!-- Minimaler Header -->
|
|
||||||
<header class="header">
|
|
||||||
<button id="menu-btn" class="menu-toggle" aria-label="Menü öffnen">
|
|
||||||
<span class="hamburger-line"></span>
|
|
||||||
<span class="hamburger-line"></span>
|
|
||||||
<span class="hamburger-line"></span>
|
|
||||||
</button>
|
|
||||||
<div class="logo">
|
|
||||||
<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
|
|
||||||
<h1>CODE<span>CRISPIES</span></h1>
|
|
||||||
</div>
|
|
||||||
<div class="header-actions">
|
|
||||||
<a href="./index.html" class="lang-switch" aria-label="Switch language: English">EN</a>
|
|
||||||
<button id="help-btn" class="help-toggle" aria-label="Hilfe">?</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Hauptlayout -->
|
|
||||||
<main class="game-layout" id="main-content">
|
|
||||||
<!-- Linke Spalte: Anleitung + Editor -->
|
|
||||||
<div class="left-panel">
|
|
||||||
<section class="instructions">
|
|
||||||
<span class="module-pill" id="module-pill">Laden...</span>
|
|
||||||
<h2 id="lesson-title">Laden...</h2>
|
|
||||||
<div class="lesson-description" id="lesson-description">
|
|
||||||
Bitte wähle eine Lektion aus, um zu beginnen.
|
|
||||||
</div>
|
|
||||||
<div class="task-instruction" id="task-instruction">
|
|
||||||
<!-- Aufgabenanweisungen werden hier angezeigt -->
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="editor-section">
|
|
||||||
<div class="code-editor">
|
|
||||||
<div class="editor-header">
|
|
||||||
<label for="code-input" class="editor-label">CSS-Editor</label>
|
|
||||||
<div class="editor-actions">
|
|
||||||
<div class="editor-tools">
|
|
||||||
<button id="undo-btn" class="btn btn-icon" title="Rückgängig (Strg+Z)">↶</button>
|
|
||||||
<button id="redo-btn" class="btn btn-icon" title="Wiederholen (Strg+Umschalt+Z)">↷</button>
|
|
||||||
<button id="reset-code-btn" class="btn btn-icon" title="Auf Anfangscode zurücksetzen">⟲</button>
|
|
||||||
</div>
|
|
||||||
<button id="run-btn" class="btn btn-run">
|
|
||||||
<img src="./gear.svg" alt="" />Ausführen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="editor-content">
|
|
||||||
<!-- Textarea wird durch CodeMirror ersetzt -->
|
|
||||||
<textarea id="code-input" class="code-input" spellcheck="false" autocomplete="off" style="display: none;"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hint-area" id="hint-area">
|
|
||||||
<!-- Hinweise werden hier angezeigt -->
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Rechte Spalte: Vorschau + Navigation -->
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="preview-section">
|
|
||||||
<div class="preview-header">
|
|
||||||
<span class="preview-label">Deine Ausgabe</span>
|
|
||||||
<button id="show-expected-btn" class="btn btn-small">Lösung zeigen</button>
|
|
||||||
</div>
|
|
||||||
<div class="preview-wrapper">
|
|
||||||
<div class="preview-frame" id="preview-area">
|
|
||||||
<!-- Vorschau-Iframe wird hier angezeigt -->
|
|
||||||
</div>
|
|
||||||
<div class="expected-overlay" id="expected-overlay">
|
|
||||||
<div class="expected-frame" id="preview-expected">
|
|
||||||
<!-- Erwartetes Ergebnis (umschaltbar) -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="game-controls">
|
|
||||||
<button id="prev-btn" class="btn">Zurück</button>
|
|
||||||
<div class="level-indicator" id="level-indicator">Lektion 0/0</div>
|
|
||||||
<button id="next-btn" class="btn btn-primary">Weiter</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Seitenleisten-Hintergrund -->
|
|
||||||
<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
|
|
||||||
|
|
||||||
<!-- Ausklappbare Seitenleiste -->
|
|
||||||
<aside class="sidebar-drawer" id="sidebar-drawer" aria-label="Navigationsmenü">
|
|
||||||
<div class="sidebar-header">
|
|
||||||
<h3>Menü</h3>
|
|
||||||
<button id="close-sidebar" class="close-btn" aria-label="Menü schließen">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar-section">
|
|
||||||
<h4>Fortschritt</h4>
|
|
||||||
<div class="progress-display" id="progress-display">
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div class="progress-fill" id="progress-fill"></div>
|
|
||||||
</div>
|
|
||||||
<span class="progress-text" id="progress-text">0% abgeschlossen</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="sidebar-section" aria-label="Lektionsnavigation">
|
|
||||||
<h4 id="lessons-heading">Lektionen</h4>
|
|
||||||
<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading">
|
|
||||||
<!-- Modulliste wird hier eingefügt -->
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="sidebar-section">
|
|
||||||
<h4>Einstellungen</h4>
|
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="disable-feedback-toggle" checked />
|
|
||||||
<span class="toggle-slider"></span>
|
|
||||||
<span class="toggle-label">Hinweise anzeigen</span>
|
|
||||||
</label>
|
|
||||||
<button id="reset-btn" class="btn btn-text">Fortschritt zurücksetzen</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="app-footer">
|
|
||||||
Open Source:
|
|
||||||
<a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a>
|
|
||||||
von <a href="https://dailysh.it" title="Michael W. Czechowski">mwc</a>
|
|
||||||
</footer>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- Hilfe-Dialog -->
|
|
||||||
<dialog id="help-dialog" class="dialog">
|
|
||||||
<div class="dialog-header">
|
|
||||||
<h3>Hilfe</h3>
|
|
||||||
<button id="help-dialog-close" class="dialog-close" aria-label="Schließen">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="dialog-content">
|
|
||||||
<h4>Über Code Crispies</h4>
|
|
||||||
<p>Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich - einfach loslegen!</p>
|
|
||||||
|
|
||||||
<h4>Lernmodi</h4>
|
|
||||||
<ul>
|
|
||||||
<li><strong>CSS</strong> - Schreibe CSS-Regeln zum Stylen von Elementen</li>
|
|
||||||
<li><strong>Tailwind</strong> - Wende Utility-Klassen direkt im HTML an</li>
|
|
||||||
<li><strong>HTML</strong> - Übe semantisches Markup und native Elemente</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4>Erste Schritte</h4>
|
|
||||||
<p>Öffne das Menü (☰), um Lektionsmodule zu durchsuchen. Jedes Modul behandelt ein Thema mit aufeinander aufbauenden Übungen.</p>
|
|
||||||
|
|
||||||
<h4>Lektionen abschließen</h4>
|
|
||||||
<ol>
|
|
||||||
<li>Lies die Aufgabenstellung auf der linken Seite</li>
|
|
||||||
<li>Schreibe deinen Code im Editor</li>
|
|
||||||
<li>Klicke auf <strong>Ausführen</strong> oder drücke <kbd>Strg+Enter</kbd></li>
|
|
||||||
<li>Folge den Hinweisen, um Fehler zu beheben</li>
|
|
||||||
<li>Klicke auf <strong>Weiter</strong>, wenn du fertig bist</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h4>Editor-Werkzeuge</h4>
|
|
||||||
<ul>
|
|
||||||
<li><strong>↶ Rückgängig</strong> / <strong>↷ Wiederholen</strong> - Bearbeitungsverlauf navigieren</li>
|
|
||||||
<li><strong>⟲ Zurücksetzen</strong> - Ursprünglichen Code wiederherstellen</li>
|
|
||||||
<li><strong>Lösung zeigen</strong> - Zielergebnis ein-/ausblenden</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4>Tastenkürzel</h4>
|
|
||||||
<ul>
|
|
||||||
<li><kbd>Strg+Enter</kbd> - Code ausführen</li>
|
|
||||||
<li><kbd>Strg+Z</kbd> - Rückgängig</li>
|
|
||||||
<li><kbd>Strg+Umschalt+Z</kbd> - Wiederholen</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4>Emmet-Kürzel (HTML-Modus)</h4>
|
|
||||||
<p>Tippe Abkürzungen und drücke <kbd>Tab</kbd> zum Erweitern:</p>
|
|
||||||
<ul>
|
|
||||||
<li><kbd>div.box</kbd> → div mit Klasse</li>
|
|
||||||
<li><kbd>ul>li*3</kbd> → ul mit 3 li-Kindern</li>
|
|
||||||
<li><kbd>form>input+button</kbd> → verschachtelte Struktur</li>
|
|
||||||
<li><kbd>p{Hallo}</kbd> → p mit Textinhalt</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
|
|
||||||
<!-- Zurücksetzen-Bestätigungsdialog -->
|
|
||||||
<dialog id="reset-dialog" class="dialog">
|
|
||||||
<div class="dialog-header">
|
|
||||||
<h3>Fortschritt zurücksetzen</h3>
|
|
||||||
<button id="reset-dialog-close" class="dialog-close" aria-label="Schließen">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="dialog-content">
|
|
||||||
<p>Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.</p>
|
|
||||||
<div class="dialog-actions">
|
|
||||||
<button id="cancel-reset" class="btn">Abbrechen</button>
|
|
||||||
<button id="confirm-reset" class="btn btn-ghost">Alles zurücksetzen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="module" src="app.de.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user