`;
button.addEventListener("click", () => {
selectModule(module.id);
closeModal();
});
return button;
});
// Clear and update modal content
elements.modalContent.innerHTML = "";
moduleButtons.forEach((button) => {
elements.modalContent.appendChild(button);
});
// Show the modal
elements.modalContainer.classList.remove("hidden");
}
// Show help modal
function showHelp() {
elements.modalTitle.textContent = "Help";
elements.modalContent.innerHTML = `
How to Use Code Crispies
Code Crispies is an interactive platform for learning CSS through practical exercises.
Getting Started
Select a module from the sidebar to start learning. Each module contains a series of lessons focused on specific CSS concepts.
Completing Lessons
For each lesson:
Read the instructions and objective
Write your CSS code in the editor
Click "Run" to test your solution
If correct, you can proceed to the next lesson
Controls
Run - Test your CSS code
Previous/Next - Navigate between lessons
Progress - Select a different learning module
Reset Progress - Clear all your saved progress
Tips
Use the preview area to see how your CSS affects the elements
Your progress is automatically saved in your browser storage
You can revisit completed lessons at any time
Press Tab in the code editor to indent with two spaces
Use Ctrl+Enter to quickly run your code
`;
elements.modalContainer.classList.remove("hidden");
}
// Reset user progress
function resetProgress() {
elements.modalTitle.textContent = "Reset Progress";
elements.modalContent.innerHTML = `
Are you sure you want to reset all your progress? This cannot be undone.
`;
document.getElementById("cancel-reset").addEventListener("click", closeModal);
document.getElementById("confirm-reset").addEventListener("click", () => {
localStorage.removeItem("codeCrispiesProgress");
localStorage.removeItem("lastModuleId");
state.userProgress = {};
closeModal();
// Reload the current module
if (state.currentModule) {
const currentModuleId = state.currentModule.id;
selectModule(currentModuleId);
} else if (state.modules.length > 0) {
selectModule(state.modules[0].id);
}
// Update progress indicator
updateModuleSelectorButtonProgress();
});
elements.modalContainer.classList.remove("hidden");
}
// Close the modal
function closeModal() {
elements.modalContainer.classList.add("hidden");
}
// Handle clicks in the code editor to focus the input
function handleEditorClick() {
elements.codeInput.focus();
// Add a temporary highlight class to show where the cursor is
elements.editorContent.classList.add("editor-focused");
// Remove the highlight after a short delay
setTimeout(() => {
elements.editorContent.classList.remove("editor-focused");
}, 300);
}
// Handle tab key in the code editor
function handleTabKey(e) {
if (e.key === "Tab") {
e.preventDefault();
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
// Add two spaces at cursor position
e.target.value = e.target.value.substring(0, start) + " " + e.target.value.substring(end);
// Move cursor position after the inserted spaces
e.target.selectionStart = e.target.selectionEnd = start + 2;
}
}
// Initialize the application
function init() {
loadUserProgress();
initializeModules();
// Event listeners
elements.prevBtn.addEventListener("click", prevLesson);
elements.nextBtn.addEventListener("click", nextLesson);
elements.runBtn.addEventListener("click", runCode);
elements.modalClose.addEventListener("click", closeModal);
elements.moduleSelectorBtn.addEventListener("click", showModuleSelector);
elements.resetBtn.addEventListener("click", resetProgress);
elements.helpBtn.addEventListener("click", showHelp);
elements.codeInput.addEventListener("click", handleEditorClick);
// Also make the editor container clickable to focus the text area
elements.editorContent.addEventListener("click", (e) => {
elements.codeInput.focus();
});
// Add tab key handler for the code input
elements.codeInput.addEventListener("keydown", handleTabKey);
// Handle keyboard shortcuts
document.addEventListener("keydown", (e) => {
// Ctrl+Enter to run code
if (e.ctrlKey && e.key === "Enter") {
runCode();
e.preventDefault();
}
});
}
// Start the application
init();