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.

Goals:

  • 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

ccw_040206_01.jpg

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

ccw_040206_02.jpg

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

ccw_040206_03.jpg

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

ccw_040206_04.jpg

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

Layout Selected

ccw_040206_05.jpg

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

ccw_040206_06.jpg

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

ccw_040206_08.jpg

Now the user can add the content…

Previewing the Content

ccw_040206_091.jpg

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

Editing the Headers

ccw_040206_10.jpg

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

Custom Pop Ups

ccw_040206_11.jpg

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

ccw_040206_12.jpg

If needed, the layout can be changed as well.

Internal Tracking

ccw_040206_14.jpg

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.

Advertisements

One comment

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


Comments are closed.