AJAX Courseware Content Manager

So my latest day job project is creating a content management system for developing SCORM compliant courseware. The project grew from the fustration of ID's developing Word based storyboards, then a laborous process of copy/pasting/formatting that information from Word to Dreamweaver. As I wrapped up a previous assignment, I helped out the team involved in that process and began pitching a better way to do this.


  • Allow ID's to create the storyboards and course in one shot
  • Free up programmers to do more creative things than copy/pasting
  • Develop a system that is expandable by adding new content types as they are needed.

I'm two weeks into coding the project and here are a few screenshots:

Getting to the SCO


Here the user drills down fromthe Customer all the way down to a lesson. There is a checkbox at the top of the page that toggles form fields that allow the addition of everything inbetween the customer and lesson, so new items can be added.

Global Information for a Lesson


Once the lesson has been chosen, there are certain global variables and other information that needs to be set. For instance, there is a default color scheme and graphics, all of which can be customized for this course.

A Lesson Sitemap


The user can then move to a sitemap, where they can add SCOs, pages in each SCO, and page branches. Clicking on a page will take the user directly to that page.

Editing a Page


When a page is selected for the first time, the user is prompted to select a page type, or layout.

Layout Selected


Now that the layout is selected, for instance, an image on top, and text below, the page redraws to reflect the selection. I'm using TinyMCE and writing a custom plugin to handle the text editing.

Editing the Image


Clicking on the image will bring up the image editor. The user has the option to upload or use an image they've used elsewhere in the site.

Adding Text


Now the user can add the content…

Previewing the Content


They can get a look at how it will display in the final output.

Editing the Headers


Clicking on the headers will swap them to an editable text box.

Custom Pop Ups


If the user has added custom tasks to the page, such as the Note above, they can click on the Note Editor to provide the information the student sees when they click that note, as well as determine if the student must click on it to continue the course. You will also notice that it highlights the note on the page so you know which you are editing in the case of multiple notes.

Changing the Layout


If needed, the layout can be changed as well.

Internal Tracking


There are also internal review steps added so that the development team can track things that need to be done.

Wrap Up

Like I've said, I've just started working on this project, but it is already showing incredible signs of coolness. I'm using a lot of AJAX, the goal being that when editing the page, it should never really have to reload.

These pages will be combined with there header/footer layouts and SCORM information and outputted as HTML files. The ID's will also have the ability to export barebone layout types to be used as storyboards during initial setup.

I'm writing this in PHP/MySQL.

I'll post more information as the project develops.


One comment

  1. Pingback: SONR Blog » Blog Archive » Updates for 4-17-06

Comments are closed.