diff --git a/src/helpers/renderer.js b/src/helpers/renderer.js index c679c78..3da1911 100644 --- a/src/helpers/renderer.js +++ b/src/helpers/renderer.js @@ -149,6 +149,47 @@ export function renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl inputEl.value = lesson.initialCode || ""; } + // Populate concept section if available + const conceptSection = document.getElementById("concept-section"); + const conceptExplanation = document.getElementById("concept-explanation"); + const conceptDiagram = document.getElementById("concept-diagram"); + const conceptContainerVsItem = document.getElementById("concept-container-vs-item"); + + if (lesson.concept && lesson.concept.explanation) { + // Show the concept section + if (conceptSection) { + conceptSection.style.display = ""; + } + + // Populate explanation (required field) + if (conceptExplanation) { + conceptExplanation.textContent = lesson.concept.explanation; + } + + // Populate optional diagram + if (conceptDiagram) { + if (lesson.concept.diagram) { + conceptDiagram.innerHTML = lesson.concept.diagram; + } else { + conceptDiagram.innerHTML = ""; + } + } + + // Populate optional containerVsItem explanation + if (conceptContainerVsItem) { + if (lesson.concept.containerVsItem) { + conceptContainerVsItem.textContent = lesson.concept.containerVsItem; + } else { + conceptContainerVsItem.textContent = ""; + } + } + } else { + // Hide the concept section if no concept is defined + if (conceptSection) { + conceptSection.style.display = "none"; + } + } + // Clear any existing feedback clearFeedback();