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

feat: enhance lesson preview functionality and improve run button interaction; change lesson indicator to percentage; split preview css for better isolation

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-19 23:30:22 +02:00
parent 1e81d0e66b
commit 1f50963028
5 changed files with 518 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app.js
View File

@@ -315,6 +315,11 @@ function runCode() {
const userCode = elements.codeInput.value;
const lesson = state.currentModule.lessons[state.currentLessonIndex];
// Rotate the Run button icon
const runButtonImg = document.querySelector("#run-btn img");
const runButtonRotationDegree = Number(runButtonImg.style.transform.match(/\d+/)?.pop() ?? 0);
document.querySelector("#run-btn img").style.transform = `rotate(${runButtonRotationDegree + 180}deg)`;
// Always apply the code to the preview, regardless of validation result
lessonEngine.applyUserCode(userCode, true);
@@ -329,7 +334,7 @@ function runCode() {
? validationResult.validCases.length
: 1;
elements.validationIndicators.innerHTML = `${validationResult.validCases} / ${validationResult.totalCases}`;
elements.validationIndicators.innerHTML = `${Math.round((validationResult.validCases / validationResult.totalCases) * 100)}%`;
}
if (validationResult.isValid) {

16
src/impl/LessonEngine.js
View File

@@ -130,18 +130,6 @@ export class LessonEngine {
// Get the complete CSS by combining all parts
const userCssWithWrapper = this.getCompleteCss();
// Create the complete CSS by combining base CSS with user code and sandbox CSS
const combinedCSS = `
/* Base CSS */
${previewBaseCSS || ""}
/* User Code */
${userCssWithWrapper || ""}
/* Sandbox CSS (for visualizing the exercise) */
${sandboxCSS || ""}
`;
// Write the content to the iframe
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
@@ -149,7 +137,9 @@ export class LessonEngine {
<!DOCTYPE html>
<html>
<head>
<style>${combinedCSS}</style>
<style>${previewBaseCSS}</style>
<style>${userCssWithWrapper}</style>
<style>${sandboxCSS}</style>
</head>
<body>
${previewHTML || "<div>No preview available</div>"}

4
src/main.css
View File

@@ -615,6 +615,10 @@ code {
}
/* Update run button styling when in re-run state */
#run-btn img {
transition: transform 420ms ease;
}
#run-btn.re-run {
background-color: var(--success-color);
border-color: var(--success-color);