Failed to load learning path. Please try again later.

\n `;\n }\n}\n\n// Render learning path\nfunction renderLearningPath() {\n if (!state.learningPath.length) {\n elements.learningPath.innerHTML = `\n

No lessons available.

\n `;\n return;\n }\n\n const pathHTML = state.learningPath.map(lesson => {\n const isCompleted = lesson.completed;\n const progressText = lesson.exercise_count\n ? `${lesson.completed_exercises || 0}/${lesson.exercise_count} exercises`\n : \"\";\n\n return `\n

${lesson.title}

\n ${isCompleted ? \"Completed\" : \"\"}\n

${lesson.description}

\n ${progressText ? `

${progressText}

` : \"\"}\n ${lesson.difficulty}\n

\n `;\n }).join(\"\");\n\n elements.learningPath.innerHTML = pathHTML;\n\n // Add event listeners to learning path items\n document.querySelectorAll(\".learning-path-item\").forEach(item => {\n item.addEventListener(\"click\", () => {\n const lessonId = item.dataset.lessonId;\n const lessonSlug = item.dataset.lessonSlug;\n loadLesson(lessonSlug, lessonId);\n });\n });\n}\n\n// Load a lesson\nasync function loadLesson(slug, id) {\n try {\n const response = await fetch(`/api/lessons/${slug}`);\n const data = await response.json();\n\n if (data.error) {\n throw new Error(data.error);\n }\n\n state.currentLesson = data.lesson;\n state.currentExercise = null;\n\n renderLesson();\n loadExercises(id);\n\n // Update active state in learning path\n document.querySelectorAll(\".learning-path-item\").forEach(item => {\n item.classList.toggle(\"active\", item.dataset.lessonId === id);\n });\n } catch (error) {\n console.error(\"Error loading lesson:\", error);\n elements.lessonContent.innerHTML = `\n

Failed to load lesson. Please try again later.

\n `;\n }\n}\n\n// Render a lesson\nfunction renderLesson() {\n if (!state.currentLesson) return;\n\n // Show lesson content, hide code editor and exercise list initially\n elements.lessonContent.classList.remove(\"hidden\");\n elements.codeEditorContainer.classList.add(\"hidden\");\n elements.exerciseList.classList.remove(\"hidden\");\n\n // Render lesson content\n elements.lessonContent.innerHTML = `\n

${state.currentLesson.title}

\n ${renderMarkdown(state.currentLesson.content)}\n

\n `;\n}\n\n// Load exercises for a lesson\nasync function loadExercises(lessonId) {\n try {\n const response = await fetch(`/api/lessons/${lessonId}/exercises`);\n const data = await response.json();\n\n if (data.error) {\n throw new Error(data.error);\n }\n\n renderExercises(data.exercises);\n } catch (error) {\n console.error(\"Error loading exercises:\", error);\n elements.exercisesContainer.innerHTML = `\n

Failed to load exercises. Please try again later.

\n `;\n }\n}\n\n// Render exercises\nfunction renderExercises(exercises) {\n if (!exercises || exercises.length === 0) {\n elements.exercisesContainer.innerHTML = `\n

No exercises available for this lesson yet.

\n `;\n return;\n }\n\n const exercisesHTML = exercises.map(exercise => {\n return `\n

${exercise.title}

\n ${exercise.difficulty}\n

${exercise.description}

\n `;\n }).join(\"\");\n\n elements.exercisesContainer.innerHTML = exercisesHTML;\n\n // Add event listeners to exercise items\n document.querySelectorAll(\".exercise-item\").forEach(item => {\n item.addEventListener(\"click\", () => {\n const exerciseId = item.dataset.exerciseId;\n loadExercise(exerciseId);\n });\n });\n}\n\n// Load a specific exercise\nasync function loadExercise(exerciseId) {\n try {\n const response = await fetch(`/api/exercises/${exerciseId}`);\n const data = await response.json();\n\n if (data.error) {\n throw new Error(data.error);\n }\n\n state.currentExercise = data.exercise;\n\n // Show code editor, hide lesson content\n elements.lessonContent.classList.add(\"hidden\");\n elements.codeEditorContainer.classList.remove(\"hidden\");\n elements.exerciseList.classList.add(\"hidden\");\n\n // Set editor content\n state.editor.setValue(state.currentExercise.starter_code);\n\n // Clear output and test results\n elements.codeOutput.textContent = \"\";\n elements.testResults.innerHTML = `\n

Run your code and submit your solution when ready.

\n `;\n\n // Update editor title\n const editorTitle = document.querySelector(\"#code-editor-container h2\");\n editorTitle.textContent = `Exercise: ${state.currentExercise.title}`;\n\n // Add exercise description above editor\n const editorContainer = document.querySelector(\"#monaco-editor\").parentElement;\n const descriptionEl = document.createElement(\"div\");\n descriptionEl.className = \"mb-4 p-4 bg-blue-50 border-l-4 border-blue-500 rounded\";\n descriptionEl.innerHTML = `

${state.currentExercise.description}

`;\n\n // Remove any existing description\n const existingDescription = editorContainer.querySelector(\".mb-4.p-4.bg-blue-50\");\n if (existingDescription) {\n existingDescription.remove();\n }\n\n editorContainer.insertBefore(descriptionEl, editorContainer.firstChild);\n } catch (error) {\n console.error(\"Error loading exercise:\", error);\n alert(\"Failed to load exercise. Please try again later.\");\n }\n}\n\n// Run code\nasync function runCode() {\n if (!state.editor) return;\n\n const code = state.editor.getValue();\n\n if (!code.trim()) {\n elements.codeOutput.textContent = \"Error: No code to run\";\n return;\n }\n\n try {\n elements.codeOutput.textContent = \"Running code...\";\n\n const response = await fetch(\"/api/compile\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ code }),\n });\n\n const result = await response.json();\n\n if (result.error) {\n elements.codeOutput.textContent = `Error: ${result.error}`;\n return;\n }\n\n if (result.success) {\n elements.codeOutput.textContent = result.output || \"Program executed successfully with no output\";\n } else {\n elements.codeOutput.textContent = result.error || \"Compilation failed\";\n }\n } catch (error) {\n console.error(\"Error running code:\", error);\n elements.codeOutput.textContent = \"Error: Failed to run code. Please try again.\";\n }\n}\n\n// Submit solution\nasync function submitSolution() {\n if (!state.editor || !state.currentExercise) return;\n\n if (!state.username) {\n alert(\"Please enter a username before submitting your solution.\");\n elements.usernameInput.focus();\n return;\n }\n\n const code = state.editor.getValue();\n\n if (!code.trim()) {\n elements.testResults.innerHTML = `\n

Error: No code to submit

\n `;\n return;\n }\n\n try {\n elements.testResults.innerHTML = `\n

Testing your solution...

\n `;\n\n const response = await fetch(`/api/exercises/${state.currentExercise.id}/submit`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n code,\n username: state.username,\n }),\n });\n\n const result = await response.json();\n\n if (result.error) {\n elements.testResults.innerHTML = `\n

Error: ${result.error}

\n `;\n return;\n }\n\n renderTestResults(result);\n\n // If all tests passed, reload learning path to update progress\n if (result.passed) {\n await loadLearningPath();\n }\n } catch (error) {\n console.error(\"Error submitting solution:\", error);\n elements.testResults.innerHTML = `\n

Error: Failed to submit solution. Please try again.

\n `;\n }\n}\n\n// Render test results\nfunction renderTestResults(result) {\n if (!result.testResults || result.testResults.length === 0) {\n elements.testResults.innerHTML = `\n

${result.message || \"No test results available.\"}

\n `;\n return;\n }\n\n const resultsHTML = result.testResults.map((test, index) => {\n return `\n

\n Test ${index + 1}\n ${test.passed ? \"✅ Passed\" : \"❌ Failed\"}\n

\n ${test.input ? `

Input: ${test.input}

` : \"\"}\n

Expected: ${test.expected}

Actual: ${test.actual}

\n `;\n }).join(\"\");\n\n const messageClass = result.passed ? \"bg-green-100 text-green-700\" : \"bg-yellow-100 text-yellow-700\";\n\n elements.testResults.innerHTML = `\n

${result.message}

\n ${resultsHTML}\n

\n `;\n}\n\n// Simple markdown renderer (very basic implementation)\nfunction renderMarkdown(markdown) {\n if (!markdown) return \"\";\n\n // Replace headers\n let html = markdown\n .replace(/^# (.*$)/gm, \"

$1

\")\n .replace(/^## (.*$)/gm, \"

$1

\")\n .replace(/^### (.*$)/gm, \"

$1

\");\n\n // Replace lists\n html = html\n .replace(/^\\* (.*$)/gm, \"

\")\n .replace(/^(\\d+)\\. (.*$)/gm, \"

\");\n\n // Wrap lists\n html = html\n .replace(/

.*(?=

)/g, match => `

.*<\\/li>)(?!
)/g, \"$1

\");\n\n // Replace paragraphs\n html = html\n .replace(/^(?!)(.*$)/gm, \"

\");\n\n // Replace inline code\n html = html.replace(/`([^`]+)`/g, \"$1\");\n\n // Replace code blocks\n html = html.replace(/```([\\s\\S]*?)```/g, \"

$1

\");\n\n return html;\n}\n\n// Set up event listeners\nfunction setupEventListeners() {\n // Run code button\n elements.runCodeBtn.addEventListener(\"click\", runCode);\n\n // Submit solution button\n elements.submitSolutionBtn.addEventListener(\"click\", submitSolution);\n\n // Handle keyboard shortcuts\n document.addEventListener(\"keydown\", (e) => {\n // Ctrl+Enter or Cmd+Enter to run code\n if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n e.preventDefault();\n runCode();\n }\n });\n}\n\n// Initialize the app when the DOM is loaded\ndocument.addEventListener(\"DOMContentLoaded\", init);","deleted","label",[170,153],"frontend","permalink","https://www.val.town/x/Zoe13/KidC/code/frontend/app.js","extension","actionData","errors"]