Quartz 4

new Design Media course framework ideas

4 min read

We are considering creating a new course framework in Vue to replace the existing AngularJS course framework. This would be created alongside one of our current course projects.

These are my ideas around the architecture of that framework.

Goals

  • Maintainability and modularity
    • Every piece of the framework is a modular dependency, including the framework itself.
    • Developer should be able to maintain the framework in one place. Projects that need the fixes or updates can then be updated to the new release. Legacy projects or projects that will not benefit from the change can be left at their current versions
    • Other modules add features to the base framework (like a drag-and-drop screen, SCORM interoperability, audio playback, video playback, or issue reporting via Jira) and can be required or not individually on a per-project basis.
    • Modularizing allows us to build client-specific features in a way that doesn’t potentially impact past or future clients. For example, if POST has a requirement that a video player programmatically offer a PDF download of the captions, we can build that feature as an additional module and require both in the POST project. This way, a fix in the baseline video player will be easy to roll out to the POST project without duplicating code, but not every client going forward will have the dormant PDF generation code in their video players.
  • Framework
    • The React framework should be limited to the most basic feature set possible for a web-based elearning course. More advanced and optional features will be available as modules.
    • Should build as a static site to minimize deployment requirements, to make deployment easier, and for performance for users
  • UI framework
    • If we employ a UI framework
      • it should be vetted first to meet our accessibility requirements
      • it should allow for

Content and Configuration

  • Mirror the removal of presentation from HTML with the move to CSS
    • Content defines structure of content
    • Configuration plus UI defines presentation
  • Separation of concerns: no configuration with content
  • One content file per “page,” “screen,” “chunk”
    • Think about naming
    • Individual pieces of content: atoms
    • Logical groups of content atoms: molecules
    • Atoms and molecules can have semantic types that will be styled by global UI appearance config… or not. They may be ignored based on the needs of UI.
    • Atoms and molecules can be styled one-off in the containing content’s config for that UI
  • Configuration files per content file (chunk) per UI
    • UI configuration file marries the content to the UI
    • SCORM configuration for screen?
  • Any content file can be built against any UI without a configuration file for a reasonable default experience
  • Course configuration file contains the top-level configuration
    • Maybe multiple files: one for SCORM config, one for UI behavior, one for UI appearance (theme)?
  • Provide for chunk nesting
    • May not do this with actual nesting but by declaring a parent on chunks to maintain a flat structure in the data
    • Not prescriptive about hierarchy; allows fluid hierarchies while maintaining simple data structures
  • Big frameworks already have static site generators built to take content and generate a site from it
  • A course is
    • course file
      • defines top-level “content” (like course title) and how content fits together
    • content files
    • configuration files
      • SCORM behavior
      • UI behavior
      • a theme
    • dependencies
      • a UI
      • a data transformer
      • a SCORM layer

Moving forward

My suggestions

  1. Meet to brainstorm all the needs of the courseware
  2. Start building new courseware with POCC
  3. Stop at regular intervals to compare other course’s needs against what we’re building

Scot

  • Working on estimating POCC with and without new courseware
  • Will run number by me
  • Hopes to present to Pam and Shannon tomorrow morning
  • Shannon will work on schedule

Graph View

Backlinks