public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

feat: add toggle switch for disabling error feedback and persist user settings

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-20 00:37:36 +02:00
parent 7cdbf0807f
commit 0f368b7373
4 changed files with 126 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app.js
View File

@@ -9,7 +9,10 @@ const state = {
currentLessonIndex: 0,
modules: [],
userProgress: {}, // Format: { moduleId: { completed: [0, 2, 3], current: 4 } }
userCodeBeforeValidation: "" // Track user code state before validation
userCodeBeforeValidation: "", // Track user code state before validation
userSettings: {
disableFeedbackErrors: false
}
};
// DOM elements
@@ -36,7 +39,8 @@ const elements = {
lessonContainer: document.querySelector(".lesson-container"),
editorContent: document.querySelector(".editor-content"),
codeEditor: document.querySelector(".code-editor"),
validationIndicators: document.querySelector(".validation-indicators-container")
validationIndicators: document.querySelector(".validation-indicators-container"),
disableFeedbackToggle: document.getElementById("disable-feedback-toggle")
};
// Initialize the lesson engine
@@ -55,6 +59,32 @@ function saveUserProgress() {
localStorage.setItem("codeCrispies.Progress", JSON.stringify(state.userProgress));
}
function loadUserSettings() {
const savedSettings = localStorage.getItem("codeCrispies.settings");
if (savedSettings) {
try {
const settings = JSON.parse(savedSettings);
state.userSettings = { ...state.userSettings, ...settings };
// Apply saved settings to UI
elements.disableFeedbackToggle.checked = !state.userSettings.disableFeedbackErrors;
} catch (e) {
console.error("Error loading user settings:", e);
}
}
}
function saveUserSettings() {
localStorage.setItem("codeCrispies.settings", JSON.stringify(state.userSettings));
}
function initFeedbackToggle() {
elements.disableFeedbackToggle.addEventListener("change", (e) => {
state.userSettings.disableFeedbackErrors = !e.target.checked;
saveUserSettings();
});
}
// Initialize the module list
async function initializeModules() {
try {
@@ -102,9 +132,9 @@ function updateModuleSelectorButtonProgress() {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
height: 2px;
width: ${percentComplete}%;
background-color: var(--success-color);
background-color: var(--primary-color);
border-radius: 0 3px 3px 0;
`;
@@ -545,7 +575,9 @@ function handleTabKey(e) {
// Initialize the application
function init() {
loadUserProgress();
initializeModules();
loadUserSettings();
initializeModules().catch(console.error);
initFeedbackToggle();
// Event listeners
elements.prevBtn.addEventListener("click", prevLesson);
@@ -562,6 +594,12 @@ function init() {
elements.codeInput.focus();
});
// Load user settings
elements.disableFeedbackToggle.addEventListener("change", (e) => {
state.userSettings.disableFeedbackErrors = !e.target.checked;
saveUserSettings();
});
// Add tab key handler for the code input
elements.codeInput.addEventListener("keydown", handleTabKey);