Finite-Elemented and Frontier share a Three.js viewport and accessible laboratory shell. Numerical models are independent of rendering and can be exercised with Node.
Serve the repository root with a static HTTP server and open /e-labs/finite-elemented/ or /e-labs/frontier/. There is no application build step or network dependency. Opening HTML directly with file:// is not the supported workflow for Web Workers.
models.js: independently implemented T3/Q4 plane-stress assembly, Jacobi-preconditioned CG, stress recovery, reactions, interpolation, scaling, and roofline models.solver-worker.js: numerical solves and six-mesh convergence studies outside the UI thread.scene.js: shared Three.js geometry, result fields, inspection, orbit/zoom, camera transitions, lifecycle, and reduced motion.curriculum.js / courses.js: 22 finite-element and 19 computing lessons in four courses per app, with concise introductions, lesson-specific vocabulary, experiments, and knowledge checks.guide.js / course.css: Understand → Experiment → Explain → Check progression, a searchable starting dashboard, persistent desktop module navigation, mobile overview access, optional advanced controls, and saved lesson resume. Completed predictions from the previous version remain available.course-models.js / scene-concepts.js: one-dimensional bar assembly, quadrature, resource matching, job accounting, hardware layouts, serial/parallel task queues, and CPU/GPU image and frame-sequence models.app.js / lab.css: numerical integration, charts, accessible controls, exports, and local progress.site-palette.css: generated from the website’s light and dark CSS tokens. The labs use the same theme-preference setting and theme button as the site; scene backgrounds and labels follow it too.../../assets/js/e-labs-lab-previews.js: visibility-gated miniatures using these same models and scene builders.The repository’s existing local Three.js build is reused. No React migration, CDN dependency, or asset from Model X Studio is required.
node e-labs/shared/models.test.cjs
node e-labs/shared/course-models.test.cjs
node e-labs/shared/course.test.cjs <path-to-playwright-module>
node e-labs/shared/progress.test.cjs <path-to-playwright-module>
node e-labs/shared/navigation.test.cjs <path-to-playwright-module>
node e-labs/shared/typography.test.cjs <path-to-playwright-module>
node e-labs/shared/motion-navigation.test.cjs <path-to-playwright-module>
Browser checks currently launch the installed Windows Chrome executable. Adjust executablePath for another environment. Playwright is test tooling only; the applications do not require it. Tests cover all 41 lessons, step visibility, course navigation, quizzes, theme persistence, resume, mesh convergence, exports, job completion/timeout/insufficient memory/cancellation, rendering races, mobile layout, reduced motion, blocked storage, WebGL fallback, and both catalog miniatures. Screenshots are written to the system temporary directory. browser.test.cjs delegates to this suite by default and retains the --shape-only and --posters artifact modes.
To regenerate the two static entry pages and catalog script references:
node scripts/build-learning-labs.mjs
To refresh both poster fallbacks from the actual Three.js scenes, run node e-labs/shared/browser.test.cjs <path-to-playwright-module> <artifact-directory> --posters. This writes images/e-labs/E-Labs_Finite-Elemented.png and E-Labs_Frontier.png at 1310 × 790. The older software-rendered Finite-Elemented banner script predates this rebuild.
The structural solver uses N, mm, and MPa; thickness 6 mm; Poisson ratio 0.3; fully fixed left edge; consistent right-edge traction loads; constant-strain T3 or fully integrated Q4 elements. Display extrusion adds no physical degrees of freedom. Element-center stresses are unsmoothed. The static solver, analytical modal shapes, exact steady conduction profile, and interpolation experiment are explicitly distinguished in the UI.
HPC results are transparent teaching predictions. They are not benchmarks of the ORNL Frontier system. Scaling, GPU overhead, memory latency, communication, scheduling, and power assumptions are stated beside their results.
The restored rightsizing deck contains 12 explicit workload configurations. Laptop, workstation, and cluster are illustrative capacities; tasks assigned to a cluster explicitly assume distributed software or independent ensembles. The five-stage workflow models one CPU-node request, memory fit, runtime limits, and allocated core-hours. Image races use equal pixel workloads and disclosed synthetic rates, with accelerated playback for long frame sequences. Geometry examples for beams, shells, and solids do not claim additional solver implementations; locking and hourglassing remain conceptual lessons.
See the restoration map for the original concepts and their current course locations.
See the visualization framework review for Model X Studio findings and priorities for the rest of E-Labs.
The course overview opens on an unfragmented URL or #overview; lesson fragments remain directly shareable. Module cards expose outcomes, suggested preparation, lesson previews, experiments, and completion counts. Each module also includes a worked example and reflection in the Explain step. Typography uses the same self-hosted Inter Variable font as the website, with the restored 17 px explanatory text and 14 px secondary course labels.
Both apps open on the overview when launched without a lesson fragment; unknown fragments also return to the overview. Valid lesson links remain shareable. The overview does not mark a lesson started. Opening a lesson records its visited steps and last step; only a correct knowledge-check answer marks it completed. Overview filters, module counts, the lesson progress strip, and sidebar status labels reflect these separate states.
elabs-activity-fea / elabs-activity-hpc store per-lesson activity. Existing elabs-v2-* completion records and elabs-course-* resume records are retained. Storage failures keep the app usable and show a session-only notice. Progress is local to the browser, not synchronized between devices.
The restored type scale matches commit c31c69e: 17 px body text, 21 px introductions, 16 px primary controls/equations, and 14 px secondary text. The Larger text button increases relative text by 12.5% and persists across both apps. Charts retain readable labels with keyboard-accessible horizontal scrolling in narrow panels. Large-text and mobile layouts give content additional width instead of shrinking text.
The overview module chooser filters the lesson cards without starting a lesson. Module selection combines with text and progress filters; Show all lessons clears all three. Search also matches module titles. The Check step offers the lesson’s own experiment prompt after an incorrect answer, a direct return to Experiment, and completion guidance with the next unfinished lesson. Continuing without passing a check keeps the lesson in progress. Previous crosses a lesson boundary only from Understand and opens the preceding lesson’s Check step. Explicit step changes scroll the selected content into view.
The two-column desktop layout stacks at narrower widths. Field legends and scene notes occupy a dedicated row below the viewport so larger values cannot overlap the model. typography.test.cjs checks actual computed desktop sizes at 1280, 1440, and 1920 px, legend separation, themes and horizontal overflow.
The mobile Lessons button opens the same module navigator used in the desktop sidebar. It supports Escape, returns focus to its trigger, closes after lesson selection, and moves back to the sidebar when the window widens. Returning to the overview restores its previous scroll position and filters.
Playback offers 0.5×, 1×, and 2× speed for visual motion and guided job/render simulations. Speed affects playback only, not predicted numerical results. Opening the overview suspends animation and simulated progress. Returning to the same lesson preserves controls, results, and any running simulation instead of reconstructing the lesson. Moving to another lesson still cancels its simulation.
Camera transitions begin from the displayed pose and yield immediately to dragging or zooming. Lesson panels use a brief transition on explicit step changes; reduced-motion preferences disable it and camera interpolation. motion-navigation.test.cjs verifies the drawer, focus handling, scroll restoration, paused/resumed simulations, speed-independent predictions, and camera interruption.