style: run format first time
This commit is contained in:
Michael Czechowski
569
src/app.js
569
src/app.js
@@ -1,39 +1,39 @@
|
||||
import { LessonEngine } from './impl/LessonEngine.js';
|
||||
import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback } from './helpers/renderer.js';
|
||||
import { validateUserCode } from './helpers/validator.js';
|
||||
import { loadModules } from './config/lessons.js';
|
||||
import { LessonEngine } from "./impl/LessonEngine.js";
|
||||
import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback } from "./helpers/renderer.js";
|
||||
import { validateUserCode } from "./helpers/validator.js";
|
||||
import { loadModules } from "./config/lessons.js";
|
||||
|
||||
// Main Application state
|
||||
const state = {
|
||||
currentModule: null,
|
||||
currentLessonIndex: 0,
|
||||
modules: [],
|
||||
userProgress: {}, // Format: { moduleId: { completed: [0, 2, 3], current: 4 } }
|
||||
currentModule: null,
|
||||
currentLessonIndex: 0,
|
||||
modules: [],
|
||||
userProgress: {} // Format: { moduleId: { completed: [0, 2, 3], current: 4 } }
|
||||
};
|
||||
|
||||
// DOM elements
|
||||
const elements = {
|
||||
moduleList: document.querySelector('.module-list'),
|
||||
lessonTitle: document.getElementById('lesson-title'),
|
||||
lessonDescription: document.getElementById('lesson-description'),
|
||||
taskInstruction: document.getElementById('task-instruction'),
|
||||
previewArea: document.getElementById('preview-area'),
|
||||
editorPrefix: document.getElementById('editor-prefix'),
|
||||
codeInput: document.getElementById('code-input'),
|
||||
editorSuffix: document.getElementById('editor-suffix'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
runBtn: document.getElementById('run-btn'),
|
||||
levelIndicator: document.getElementById('level-indicator'),
|
||||
modalContainer: document.getElementById('modal-container'),
|
||||
modalTitle: document.getElementById('modal-title'),
|
||||
modalContent: document.getElementById('modal-content'),
|
||||
modalClose: document.getElementById('modal-close'),
|
||||
moduleSelectorBtn: document.getElementById('module-selector-btn'),
|
||||
resetBtn: document.getElementById('reset-btn'),
|
||||
helpBtn: document.getElementById('help-btn'),
|
||||
lessonContainer: document.querySelector('.lesson-container'),
|
||||
editorContent: document.querySelector('.editor-content')
|
||||
moduleList: document.querySelector(".module-list"),
|
||||
lessonTitle: document.getElementById("lesson-title"),
|
||||
lessonDescription: document.getElementById("lesson-description"),
|
||||
taskInstruction: document.getElementById("task-instruction"),
|
||||
previewArea: document.getElementById("preview-area"),
|
||||
editorPrefix: document.getElementById("editor-prefix"),
|
||||
codeInput: document.getElementById("code-input"),
|
||||
editorSuffix: document.getElementById("editor-suffix"),
|
||||
prevBtn: document.getElementById("prev-btn"),
|
||||
nextBtn: document.getElementById("next-btn"),
|
||||
runBtn: document.getElementById("run-btn"),
|
||||
levelIndicator: document.getElementById("level-indicator"),
|
||||
modalContainer: document.getElementById("modal-container"),
|
||||
modalTitle: document.getElementById("modal-title"),
|
||||
modalContent: document.getElementById("modal-content"),
|
||||
modalClose: document.getElementById("modal-close"),
|
||||
moduleSelectorBtn: document.getElementById("module-selector-btn"),
|
||||
resetBtn: document.getElementById("reset-btn"),
|
||||
helpBtn: document.getElementById("help-btn"),
|
||||
lessonContainer: document.querySelector(".lesson-container"),
|
||||
editorContent: document.querySelector(".editor-content")
|
||||
};
|
||||
|
||||
// Initialize the lesson engine
|
||||
@@ -41,61 +41,61 @@ const lessonEngine = new LessonEngine();
|
||||
|
||||
// Load user progress from localStorage
|
||||
function loadUserProgress() {
|
||||
const savedProgress = localStorage.getItem('codeCrispiesProgress');
|
||||
if (savedProgress) {
|
||||
state.userProgress = JSON.parse(savedProgress);
|
||||
}
|
||||
const savedProgress = localStorage.getItem("codeCrispiesProgress");
|
||||
if (savedProgress) {
|
||||
state.userProgress = JSON.parse(savedProgress);
|
||||
}
|
||||
}
|
||||
|
||||
// Save user progress to localStorage
|
||||
function saveUserProgress() {
|
||||
localStorage.setItem('codeCrispiesProgress', JSON.stringify(state.userProgress));
|
||||
localStorage.setItem("codeCrispiesProgress", JSON.stringify(state.userProgress));
|
||||
}
|
||||
|
||||
// Initialize the module list
|
||||
async function initializeModules() {
|
||||
try {
|
||||
state.modules = await loadModules();
|
||||
renderModuleList(elements.moduleList, state.modules, selectModule);
|
||||
try {
|
||||
state.modules = await loadModules();
|
||||
renderModuleList(elements.moduleList, state.modules, selectModule);
|
||||
|
||||
// Select the first module or the last one user was on
|
||||
const lastModuleId = localStorage.getItem('lastModuleId');
|
||||
if (lastModuleId && state.modules.find(m => m.id === lastModuleId)) {
|
||||
selectModule(lastModuleId);
|
||||
} else if (state.modules.length > 0) {
|
||||
selectModule(state.modules[0].id);
|
||||
}
|
||||
// Select the first module or the last one user was on
|
||||
const lastModuleId = localStorage.getItem("lastModuleId");
|
||||
if (lastModuleId && state.modules.find((m) => m.id === lastModuleId)) {
|
||||
selectModule(lastModuleId);
|
||||
} else if (state.modules.length > 0) {
|
||||
selectModule(state.modules[0].id);
|
||||
}
|
||||
|
||||
// Update progress indicator on module selector button
|
||||
updateModuleSelectorButtonProgress();
|
||||
} catch (error) {
|
||||
console.error('Failed to load modules:', error);
|
||||
elements.lessonDescription.textContent = 'Failed to load modules. Please refresh the page.';
|
||||
}
|
||||
// Update progress indicator on module selector button
|
||||
updateModuleSelectorButtonProgress();
|
||||
} catch (error) {
|
||||
console.error("Failed to load modules:", error);
|
||||
elements.lessonDescription.textContent = "Failed to load modules. Please refresh the page.";
|
||||
}
|
||||
}
|
||||
|
||||
// Update progress indicator on module selector button
|
||||
function updateModuleSelectorButtonProgress() {
|
||||
if (!state.modules.length) return;
|
||||
if (!state.modules.length) return;
|
||||
|
||||
// Calculate overall progress across all modules
|
||||
let totalLessons = 0;
|
||||
let totalCompleted = 0;
|
||||
// Calculate overall progress across all modules
|
||||
let totalLessons = 0;
|
||||
let totalCompleted = 0;
|
||||
|
||||
state.modules.forEach(module => {
|
||||
totalLessons += module.lessons.length;
|
||||
const progress = state.userProgress[module.id];
|
||||
if (progress && progress.completed) {
|
||||
totalCompleted += progress.completed.length;
|
||||
}
|
||||
});
|
||||
state.modules.forEach((module) => {
|
||||
totalLessons += module.lessons.length;
|
||||
const progress = state.userProgress[module.id];
|
||||
if (progress && progress.completed) {
|
||||
totalCompleted += progress.completed.length;
|
||||
}
|
||||
});
|
||||
|
||||
const percentComplete = totalLessons > 0 ? Math.round((totalCompleted / totalLessons) * 100) : 0;
|
||||
const percentComplete = totalLessons > 0 ? Math.round((totalCompleted / totalLessons) * 100) : 0;
|
||||
|
||||
// Create progress indicator
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.className = 'progress-indicator';
|
||||
progressBar.style.cssText = `
|
||||
// Create progress indicator
|
||||
const progressBar = document.createElement("div");
|
||||
progressBar.className = "progress-indicator";
|
||||
progressBar.style.cssText = `
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -105,211 +105,206 @@ function updateModuleSelectorButtonProgress() {
|
||||
border-radius: 0 3px 3px 0;
|
||||
`;
|
||||
|
||||
// Add progress percentage text
|
||||
elements.moduleSelectorBtn.innerHTML = `Progress <span style="font-size: 0.8em; opacity: 0.8;">${percentComplete}%</span>`;
|
||||
elements.moduleSelectorBtn.style.position = 'relative';
|
||||
// Add progress percentage text
|
||||
elements.moduleSelectorBtn.innerHTML = `Progress <span style="font-size: 0.8em; opacity: 0.8;">${percentComplete}%</span>`;
|
||||
elements.moduleSelectorBtn.style.position = "relative";
|
||||
|
||||
// Remove any existing progress bar before adding new one
|
||||
const existingBar = elements.moduleSelectorBtn.querySelector('.progress-indicator');
|
||||
if (existingBar) {
|
||||
existingBar.remove();
|
||||
}
|
||||
// Remove any existing progress bar before adding new one
|
||||
const existingBar = elements.moduleSelectorBtn.querySelector(".progress-indicator");
|
||||
if (existingBar) {
|
||||
existingBar.remove();
|
||||
}
|
||||
|
||||
elements.moduleSelectorBtn.appendChild(progressBar);
|
||||
elements.moduleSelectorBtn.appendChild(progressBar);
|
||||
}
|
||||
|
||||
// Select a module
|
||||
function selectModule(moduleId) {
|
||||
const selectedModule = state.modules.find(module => module.id === moduleId);
|
||||
if (!selectedModule) return;
|
||||
const selectedModule = state.modules.find((module) => module.id === moduleId);
|
||||
if (!selectedModule) return;
|
||||
|
||||
state.currentModule = selectedModule;
|
||||
state.currentModule = selectedModule;
|
||||
|
||||
// Update module list UI
|
||||
const moduleItems = elements.moduleList.querySelectorAll('.module-list-item');
|
||||
moduleItems.forEach(item => {
|
||||
item.classList.remove('active');
|
||||
if (item.dataset.moduleId === moduleId) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
// Update module list UI
|
||||
const moduleItems = elements.moduleList.querySelectorAll(".module-list-item");
|
||||
moduleItems.forEach((item) => {
|
||||
item.classList.remove("active");
|
||||
if (item.dataset.moduleId === moduleId) {
|
||||
item.classList.add("active");
|
||||
}
|
||||
});
|
||||
|
||||
// Load user progress for this module
|
||||
if (!state.userProgress[moduleId]) {
|
||||
state.userProgress[moduleId] = { completed: [], current: 0 };
|
||||
}
|
||||
// Load user progress for this module
|
||||
if (!state.userProgress[moduleId]) {
|
||||
state.userProgress[moduleId] = { completed: [], current: 0 };
|
||||
}
|
||||
|
||||
state.currentLessonIndex = state.userProgress[moduleId].current || 0;
|
||||
loadCurrentLesson();
|
||||
state.currentLessonIndex = state.userProgress[moduleId].current || 0;
|
||||
loadCurrentLesson();
|
||||
|
||||
// Save the last selected module
|
||||
localStorage.setItem('lastModuleId', moduleId);
|
||||
// Save the last selected module
|
||||
localStorage.setItem("lastModuleId", moduleId);
|
||||
|
||||
// Reset any success indicators
|
||||
resetSuccessIndicators();
|
||||
// Reset any success indicators
|
||||
resetSuccessIndicators();
|
||||
}
|
||||
|
||||
// Reset success indicators
|
||||
function resetSuccessIndicators() {
|
||||
elements.lessonContainer.classList.remove('success-highlight');
|
||||
elements.lessonTitle.classList.remove('success-text');
|
||||
const headings = elements.lessonContainer.querySelectorAll('h2, h3, h4');
|
||||
headings.forEach(heading => heading.classList.remove('success-text'));
|
||||
elements.lessonContainer.classList.remove("success-highlight");
|
||||
elements.lessonTitle.classList.remove("success-text");
|
||||
const headings = elements.lessonContainer.querySelectorAll("h2, h3, h4");
|
||||
headings.forEach((heading) => heading.classList.remove("success-text"));
|
||||
}
|
||||
|
||||
// Load the current lesson
|
||||
function loadCurrentLesson() {
|
||||
if (!state.currentModule || !state.currentModule.lessons) {
|
||||
return;
|
||||
}
|
||||
if (!state.currentModule || !state.currentModule.lessons) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Make sure lesson index is in bounds
|
||||
if (state.currentLessonIndex >= state.currentModule.lessons.length) {
|
||||
state.currentLessonIndex = state.currentModule.lessons.length - 1;
|
||||
} else if (state.currentLessonIndex < 0) {
|
||||
state.currentLessonIndex = 0;
|
||||
}
|
||||
// Make sure lesson index is in bounds
|
||||
if (state.currentLessonIndex >= state.currentModule.lessons.length) {
|
||||
state.currentLessonIndex = state.currentModule.lessons.length - 1;
|
||||
} else if (state.currentLessonIndex < 0) {
|
||||
state.currentLessonIndex = 0;
|
||||
}
|
||||
|
||||
const lesson = state.currentModule.lessons[state.currentLessonIndex];
|
||||
lessonEngine.setLesson(lesson);
|
||||
const lesson = state.currentModule.lessons[state.currentLessonIndex];
|
||||
lessonEngine.setLesson(lesson);
|
||||
|
||||
// Reset any success indicators
|
||||
resetSuccessIndicators();
|
||||
// Reset any success indicators
|
||||
resetSuccessIndicators();
|
||||
|
||||
// Update UI
|
||||
renderLesson(
|
||||
elements.lessonTitle,
|
||||
elements.lessonDescription,
|
||||
elements.taskInstruction,
|
||||
elements.previewArea,
|
||||
elements.editorPrefix,
|
||||
elements.codeInput,
|
||||
elements.editorSuffix,
|
||||
lesson
|
||||
);
|
||||
// Update UI
|
||||
renderLesson(
|
||||
elements.lessonTitle,
|
||||
elements.lessonDescription,
|
||||
elements.taskInstruction,
|
||||
elements.previewArea,
|
||||
elements.editorPrefix,
|
||||
elements.codeInput,
|
||||
elements.editorSuffix,
|
||||
lesson
|
||||
);
|
||||
|
||||
// Update level indicator
|
||||
renderLevelIndicator(
|
||||
elements.levelIndicator,
|
||||
state.currentLessonIndex + 1,
|
||||
state.currentModule.lessons.length
|
||||
);
|
||||
// Update level indicator
|
||||
renderLevelIndicator(elements.levelIndicator, state.currentLessonIndex + 1, state.currentModule.lessons.length);
|
||||
|
||||
// Update navigation buttons
|
||||
updateNavigationButtons();
|
||||
// Update navigation buttons
|
||||
updateNavigationButtons();
|
||||
|
||||
// Save current progress
|
||||
state.userProgress[state.currentModule.id].current = state.currentLessonIndex;
|
||||
saveUserProgress();
|
||||
// Save current progress
|
||||
state.userProgress[state.currentModule.id].current = state.currentLessonIndex;
|
||||
saveUserProgress();
|
||||
|
||||
// Update progress indicator on module selector button
|
||||
updateModuleSelectorButtonProgress();
|
||||
// Update progress indicator on module selector button
|
||||
updateModuleSelectorButtonProgress();
|
||||
|
||||
// Focus on the code editor by default
|
||||
elements.codeInput.focus();
|
||||
// Focus on the code editor by default
|
||||
elements.codeInput.focus();
|
||||
}
|
||||
|
||||
// Update navigation buttons state
|
||||
function updateNavigationButtons() {
|
||||
elements.prevBtn.disabled = state.currentLessonIndex === 0;
|
||||
elements.nextBtn.disabled = !state.currentModule ||
|
||||
state.currentLessonIndex === state.currentModule.lessons.length - 1;
|
||||
elements.prevBtn.disabled = state.currentLessonIndex === 0;
|
||||
elements.nextBtn.disabled = !state.currentModule || state.currentLessonIndex === state.currentModule.lessons.length - 1;
|
||||
|
||||
// Style changes for disabled buttons
|
||||
if (elements.prevBtn.disabled) {
|
||||
elements.prevBtn.classList.add('btn-disabled');
|
||||
} else {
|
||||
elements.prevBtn.classList.remove('btn-disabled');
|
||||
}
|
||||
// Style changes for disabled buttons
|
||||
if (elements.prevBtn.disabled) {
|
||||
elements.prevBtn.classList.add("btn-disabled");
|
||||
} else {
|
||||
elements.prevBtn.classList.remove("btn-disabled");
|
||||
}
|
||||
|
||||
if (elements.nextBtn.disabled) {
|
||||
elements.nextBtn.classList.add('btn-disabled');
|
||||
} else {
|
||||
elements.nextBtn.classList.remove('btn-disabled');
|
||||
}
|
||||
if (elements.nextBtn.disabled) {
|
||||
elements.nextBtn.classList.add("btn-disabled");
|
||||
} else {
|
||||
elements.nextBtn.classList.remove("btn-disabled");
|
||||
}
|
||||
}
|
||||
|
||||
// Go to the next lesson
|
||||
function nextLesson() {
|
||||
if (!state.currentModule) return;
|
||||
if (!state.currentModule) return;
|
||||
|
||||
if (state.currentLessonIndex < state.currentModule.lessons.length - 1) {
|
||||
state.currentLessonIndex++;
|
||||
loadCurrentLesson();
|
||||
}
|
||||
if (state.currentLessonIndex < state.currentModule.lessons.length - 1) {
|
||||
state.currentLessonIndex++;
|
||||
loadCurrentLesson();
|
||||
}
|
||||
}
|
||||
|
||||
// Go to the previous lesson
|
||||
function prevLesson() {
|
||||
if (state.currentLessonIndex > 0) {
|
||||
state.currentLessonIndex--;
|
||||
loadCurrentLesson();
|
||||
}
|
||||
if (state.currentLessonIndex > 0) {
|
||||
state.currentLessonIndex--;
|
||||
loadCurrentLesson();
|
||||
}
|
||||
}
|
||||
|
||||
// Run the user code
|
||||
function runCode() {
|
||||
const userCode = elements.codeInput.value;
|
||||
const lesson = state.currentModule.lessons[state.currentLessonIndex];
|
||||
const userCode = elements.codeInput.value;
|
||||
const lesson = state.currentModule.lessons[state.currentLessonIndex];
|
||||
|
||||
const validationResult = validateUserCode(userCode, lesson);
|
||||
const validationResult = validateUserCode(userCode, lesson);
|
||||
|
||||
if (validationResult.isValid) {
|
||||
// Mark lesson as completed
|
||||
const moduleProgress = state.userProgress[state.currentModule.id];
|
||||
if (!moduleProgress.completed.includes(state.currentLessonIndex)) {
|
||||
moduleProgress.completed.push(state.currentLessonIndex);
|
||||
saveUserProgress();
|
||||
updateModuleSelectorButtonProgress();
|
||||
}
|
||||
if (validationResult.isValid) {
|
||||
// Mark lesson as completed
|
||||
const moduleProgress = state.userProgress[state.currentModule.id];
|
||||
if (!moduleProgress.completed.includes(state.currentLessonIndex)) {
|
||||
moduleProgress.completed.push(state.currentLessonIndex);
|
||||
saveUserProgress();
|
||||
updateModuleSelectorButtonProgress();
|
||||
}
|
||||
|
||||
// Show success feedback with visual indicators
|
||||
showFeedback(true, validationResult.message || 'Great job! Your code works correctly.');
|
||||
// Show success feedback with visual indicators
|
||||
showFeedback(true, validationResult.message || "Great job! Your code works correctly.");
|
||||
|
||||
// Add success visual indicators
|
||||
elements.lessonContainer.classList.add('success-highlight');
|
||||
elements.lessonTitle.classList.add('success-text');
|
||||
const headings = elements.lessonContainer.querySelectorAll('h3, h4');
|
||||
headings.forEach(heading => heading.classList.add('success-text'));
|
||||
// Add success visual indicators
|
||||
elements.lessonContainer.classList.add("success-highlight");
|
||||
elements.lessonTitle.classList.add("success-text");
|
||||
const headings = elements.lessonContainer.querySelectorAll("h3, h4");
|
||||
headings.forEach((heading) => heading.classList.add("success-text"));
|
||||
|
||||
// Apply the code to see the result
|
||||
lessonEngine.applyUserCode(userCode);
|
||||
// Apply the code to see the result
|
||||
lessonEngine.applyUserCode(userCode);
|
||||
|
||||
// Enable the next button if not already on the last lesson
|
||||
if (state.currentLessonIndex < state.currentModule.lessons.length - 1) {
|
||||
elements.nextBtn.disabled = false;
|
||||
elements.nextBtn.classList.remove('btn-disabled');
|
||||
}
|
||||
} else {
|
||||
// Reset any success indicators
|
||||
resetSuccessIndicators();
|
||||
// Enable the next button if not already on the last lesson
|
||||
if (state.currentLessonIndex < state.currentModule.lessons.length - 1) {
|
||||
elements.nextBtn.disabled = false;
|
||||
elements.nextBtn.classList.remove("btn-disabled");
|
||||
}
|
||||
} else {
|
||||
// Reset any success indicators
|
||||
resetSuccessIndicators();
|
||||
|
||||
// Show error feedback (with friendly message)
|
||||
showFeedback(false, validationResult.message || 'Not quite there yet! Let\'s try again.');
|
||||
}
|
||||
// Show error feedback (with friendly message)
|
||||
showFeedback(false, validationResult.message || "Not quite there yet! Let's try again.");
|
||||
}
|
||||
}
|
||||
|
||||
// Show the module selector modal
|
||||
function showModuleSelector() {
|
||||
elements.modalTitle.textContent = 'Select a Module';
|
||||
elements.modalTitle.textContent = "Select a Module";
|
||||
|
||||
// Create module buttons
|
||||
const moduleButtons = state.modules.map(module => {
|
||||
const button = document.createElement('button');
|
||||
button.classList.add('btn', 'module-button');
|
||||
button.style.display = 'block';
|
||||
button.style.width = '100%';
|
||||
button.style.marginBottom = '10px';
|
||||
button.style.padding = '15px';
|
||||
button.style.textAlign = 'left';
|
||||
// Create module buttons
|
||||
const moduleButtons = state.modules.map((module) => {
|
||||
const button = document.createElement("button");
|
||||
button.classList.add("btn", "module-button");
|
||||
button.style.display = "block";
|
||||
button.style.width = "100%";
|
||||
button.style.marginBottom = "10px";
|
||||
button.style.padding = "15px";
|
||||
button.style.textAlign = "left";
|
||||
|
||||
// Add completion status
|
||||
const progress = state.userProgress[module.id];
|
||||
const completedCount = progress ? progress.completed.length : 0;
|
||||
const totalLessons = module.lessons.length;
|
||||
const percentComplete = Math.round((completedCount / totalLessons) * 100);
|
||||
// Add completion status
|
||||
const progress = state.userProgress[module.id];
|
||||
const completedCount = progress ? progress.completed.length : 0;
|
||||
const totalLessons = module.lessons.length;
|
||||
const percentComplete = Math.round((completedCount / totalLessons) * 100);
|
||||
|
||||
button.innerHTML = `
|
||||
button.innerHTML = `
|
||||
<strong>${module.title}</strong>
|
||||
<div style="margin-top: 5px; font-size: 0.8rem; color: var(--light-text);">
|
||||
${module.description}
|
||||
@@ -322,29 +317,29 @@ function showModuleSelector() {
|
||||
</div>
|
||||
`;
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
selectModule(module.id);
|
||||
closeModal();
|
||||
});
|
||||
button.addEventListener("click", () => {
|
||||
selectModule(module.id);
|
||||
closeModal();
|
||||
});
|
||||
|
||||
return button;
|
||||
});
|
||||
return button;
|
||||
});
|
||||
|
||||
// Clear and update modal content
|
||||
elements.modalContent.innerHTML = '';
|
||||
moduleButtons.forEach(button => {
|
||||
elements.modalContent.appendChild(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 the modal
|
||||
elements.modalContainer.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// Show help modal
|
||||
function showHelp() {
|
||||
elements.modalTitle.textContent = 'Help';
|
||||
elements.modalTitle.textContent = "Help";
|
||||
|
||||
elements.modalContent.innerHTML = `
|
||||
elements.modalContent.innerHTML = `
|
||||
<h3>How to Use Code Crispies</h3>
|
||||
<p>Code Crispies is an interactive platform for learning CSS through practical exercises.</p>
|
||||
|
||||
@@ -378,14 +373,14 @@ function showHelp() {
|
||||
</ul>
|
||||
`;
|
||||
|
||||
elements.modalContainer.classList.remove('hidden');
|
||||
elements.modalContainer.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// Reset user progress
|
||||
function resetProgress() {
|
||||
elements.modalTitle.textContent = 'Reset Progress';
|
||||
elements.modalTitle.textContent = "Reset Progress";
|
||||
|
||||
elements.modalContent.innerHTML = `
|
||||
elements.modalContent.innerHTML = `
|
||||
<p>Are you sure you want to reset all your progress? This cannot be undone.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
|
||||
<button id="cancel-reset" class="btn">Cancel</button>
|
||||
@@ -393,94 +388,94 @@ function resetProgress() {
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('cancel-reset').addEventListener('click', closeModal);
|
||||
document.getElementById('confirm-reset').addEventListener('click', () => {
|
||||
localStorage.removeItem('codeCrispiesProgress');
|
||||
localStorage.removeItem('lastModuleId');
|
||||
state.userProgress = {};
|
||||
closeModal();
|
||||
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);
|
||||
}
|
||||
// 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();
|
||||
});
|
||||
// Update progress indicator
|
||||
updateModuleSelectorButtonProgress();
|
||||
});
|
||||
|
||||
elements.modalContainer.classList.remove('hidden');
|
||||
elements.modalContainer.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// Close the modal
|
||||
function closeModal() {
|
||||
elements.modalContainer.classList.add('hidden');
|
||||
elements.modalContainer.classList.add("hidden");
|
||||
}
|
||||
|
||||
// Handle clicks in the code editor to focus the input
|
||||
function handleEditorClick() {
|
||||
elements.codeInput.focus();
|
||||
elements.codeInput.focus();
|
||||
|
||||
// Add a temporary highlight class to show where the cursor is
|
||||
elements.editorContent.classList.add('editor-focused');
|
||||
// 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);
|
||||
// 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();
|
||||
if (e.key === "Tab") {
|
||||
e.preventDefault();
|
||||
|
||||
const start = e.target.selectionStart;
|
||||
const end = e.target.selectionEnd;
|
||||
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);
|
||||
// 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;
|
||||
}
|
||||
// Move cursor position after the inserted spaces
|
||||
e.target.selectionStart = e.target.selectionEnd = start + 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the application
|
||||
function init() {
|
||||
loadUserProgress();
|
||||
initializeModules();
|
||||
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);
|
||||
// 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();
|
||||
});
|
||||
// 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);
|
||||
// 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();
|
||||
}
|
||||
});
|
||||
// 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();
|
||||
init();
|
||||
|
||||
Reference in New Issue
Block a user