Drag & Drop Activities

Pipefitting Activity >
Electrical Activity >

Original Prototype

Have a look at the first prototype in Articulate

Why the original wasn’t sufficient?

It was clunky and the entire exercise was spread across a number of  “screens” which didn’t allow the student to view the entire excercise at one time.

What happened next?

I searched for some code that allowed me to drop an object into a defined space. Using javascript, I figured we could duplicate this as many times as necessary to place the entire exercise on one “page”.

I forwarded the idea to a programmer on our team, which is where the magic began:

  • I mocked up an interface design using photoshop, and extrapolated a CSS style sheet for him to use.
  • He took it and developed a way of handling the programming to rapidly deploy other projects like this in the future.
  • I rendered the graphics and made sure each was relative to each other … all in same context making a better learning tool.
  • We made it open, and the programmer appropriated code that was open also.
  • Basically uses a style sheet, graphics folder, and java script to generate the activity.

The amazing part is that it borrows the graphics file names to generate the exercise. This allows us to create a subsequent one in a couple hours, significantly cutting down on programmer time.