Graph Plot Training (SCORM Package)

Graph Plot Training is an interactive, browser-based activity that teaches learners how to build a position-versus-time graph step by step. The experience runs entirely in vanilla JavaScript on top of an HTML5 <canvas> and ships as a SCORM-compliant package so it can report completion back to any LMS that implements the SCORM 1.2 runtime.

• LIVE DEMO

Key Features

• Guided Plotting Workflow — Learners draw axes, label scales, place data points, add error bars, and fit best/worst lines in a structured sequence of steps.
• Canvas-Based Interaction — Drawing tools, measurement overlays, and live feedback are rendered directly on the canvas for a smooth, app-like feel.
• Instant Feedback & Hints — Contextual hints nudge learners when input is incorrect, while success states trigger animations and progress.
• Slope Calculation Panels — Inline MathJax-powered panels help learners compute slopes (m and Δm) with validation against expected values.
• Localization Ready Copy — All user-facing text lives in copy.js, making it easy to translate or tweak instructions without touching the logic.
• SCORM Reporting — Completion is automatically reported as 100% so learners receive credit upon finishing every step.

Project Structure

graph-training-scorm/
├── app.js          # Core application logic and canvas rendering pipeline
├── copy.js         # Localization bundle (all instructional copy and hints)
├── index.html      # Entry point that wires scripts, styles, and layout
├── styles.css      # Visual styling for HUD, instructions, controls, etc.
├── scorm.js        # Minimal SCORM 1.2 API wrapper (init, complete, report)
└── imsmanifest.xml # Manifest required for LMS import of the SCORM package

Getting Started

You can run the activity locally for development or preview by following these steps:

1. Install dependencies — None required. The project relies on built-in browser APIs plus MathJax, which is loaded from a CDN in index.html.
2. Open the demo — Serve the folder with any static web server (or simply open index.html in a modern browser). Example using Python:

   cd graph-training-scorm
   python3 -m http.server 8000

   Then browse to http://localhost:8000/index.html.

Tip: If you open the file system path directly (without a server), some browsers may block MathJax or canvas font loading due to local file restrictions. Running a lightweight server avoids those issues.

Packaging for LMS

1. Ensure all assets under graph-training-scorm/ are up to date.
2. Zip the folder contents (not the folder itself) so the root of the archive contains imsmanifest.xml alongside the HTML/JS/CSS files.
3. Upload the resulting ZIP to your LMS as a SCORM 1.2 package.

The activity automatically initializes the SCORM runtime (when present) and marks the lesson complete when every instructional step is finished.

Localization & Copy

All learner-facing strings are declared in copy.js. To translate:

1. Duplicate copy.js or restructure it to export multiple locales.
2. Update the COPY object values with the target language.
3. Adjust locale if you want to tag the bundle with a locale code.

Because app.js resolves text strictly through the text() helper, no other files need to change.

Customization Ideas

• Data Set — Modify DATA_POINTS in app.js to plot a different experiment.
• Validation Rules — Tweak tolerances or step definitions within steps to match a new rubric.
• Visual Theme — Update styles.css to rebrand fonts, colors, or layout elements.
• Scoring Logic — The current implementation guarantees 100% completion. Adjust SCORM.setScore() and related calls in app.js if partial scoring is desired.

License

This project does not yet include an explicit license. Please consult the repository owner before redistributing or reusing the content.

Acknowledgments

This activity was inspired by common physics lab exercises and aims to provide an engaging way for students to learn graphing fundamentals. Special thanks to the ChatGPT model for assisting in code generation, refinement and writing this readme.