Edworlds - Edtec671

EdTec671 - Learning Environment Design

Project 1: Scenario-based E-Learning App

Project 1 requires us to create a scenario-based e-learning application based on the E-Learning Blueprint instructional design methodology.

Due date: March 21, 2013.

View Weekly Updates for this project.


My initial plan was to use Adobe Edge Animate to build an SBEL app around Dr. Beth Simon's CS Principles teaching methodologies using interactive web-based video.

I had difficulties with video (no built-in support with Edge Animate) so I switched to Flash to develop a prototype to help define the navigational interface since I know Flash well.

As things progressed with the prototype I had what I call a BFO (Brilliant Flash of the Obvious) of using my Case Creator software and take a different approach to SBEL app.

Case Creator was developed 10 years ago with (what was then Macromedia) Director. It was developed as a generic video-based case creation template for any kind of teacher education application. However, Director can be troublesome, with frequent crashing, bugs, and it requires an outdated archaic Shockwave plugin for web support.

However, the tool was surprisingly functional for this specific purpose. I managed to transcribe 15 minutes of a 1-hour video and create an initial prototpye case and test it with two of our teachers.


Review of the Process

Breaking up the 1-hour video into 5 parts

The 1-hour recording of Beth was made on Feb. 3, 2012 during the winter quarter of UCSD's Computer Science & Engineering 3 (CSE3). CSE3 is taught to non-CS majors in UCSD's Sixth College. Sixth College has an "arts and technology" emphasis but students are not expected to be actual programmers. CSE3 is intended to give them a deeper understanding of computer science PRINCIPLES so they may be more capable in their particular area of study.

The original video format was HD (1920 x 1080) mpg4, 1.5 Gb. The case tool was really designed to work with multiple shorter videos, not really 1-hour single videos, so I felt it was important to break the 1-hour up into segments based on some sort of reasoning. The video was already compressed and I knew that trying to convert it would probably be slow and potentially create larger files than the original.

Initially I used Quicktime and exported five videos of varying length with 720x480 dimensions in a .mov format. These files resulted in filesizes larger than the original which made them difficult to work with. I was able to successfully import the five videos into the Case Creator but the videos were not rendering properly in the transcription synchronization interface. Below are images of what I should have been seeing and what I was actually seeing:

Normal video transcription synchronization interface

Bug in rendering 720x480 video


Since the videos were properly rendering in the video import interface, it seemed reasonable to try debuggin the problem for the video transcription interface. Unfortunately, debugging the problem was unsuccessful, so I concluded the only solution was to re-export the videos in a 320x240 format.

Since the Quicktime Pro exporting was so slow, I tried using Camtasia to export to the smaller video format. Camtasia was much faster but the file size for a 15 minute 320x240 video was 7.5 Gb. This was not practical to work with so I resorted to using the much slower but more useful Quicktime Pro exporting option. This was a bit of a setback but ultimately proved to be an acceptable solution and this is what the current tool is using.


Video Transcription

I used my Video Sync tool to transcribe the video. Video Sync is a Director app I developed to make it a little easier to transcribe video and synchronize the transcription in a Quicktime caption format. Video Sync was developed way back in 2000 but it is still a functional tool.

I transcribed the first 15 minutes of the 1-hour recording, or 2253 words. Beth speaks very quickly, probably faster than JFK. The process went smoothly but required a little over 2 hours to complete 15 minutes. I am not a real fast typist.


Creating the Case

The Case Creator has a simple step-by-step process. I imported the five videos. Next, I imported the single transcript for the first video. Next, I synchronized the first video with its transcript. This went smoothly. Next, I added issues for the first three videos to the Issue Matrix. Last, I added some supplementary resources.



Video Synchronized with Searchable Transcript

The Case Creator allows the user to search the transcript and click on the results to jump to that spot in the video corresponding to the text search result.


Users may use the Annotations and Bookmarking feature to identify segments of particular interest to them which were not actually part of the Issues Matrix (see above image).

Issues Matrix

The Issues Matrix allows the person creating the case to include clickable links to specific spots in the video as examples of that particular issue. There may be multiple examples of a particular issue in each of the videos.

One of the advantages of the Issues Matrix is that it may be useful without a transcription.

Issues Matrix

Supplementary Resources

The case creator can add links to supplementary resources found on the web. When a student clicks the links a web browser is opened and the desired resource is loaded.


More Setbacks

I had initially planned to test the application on Friday, March 15 with two of our CS Principles curriculum teachers since they are basing their instructional methodologies on Beth Simon's and would already have ideas on what works and doesn't work. I planned to create a standalone executable I could copy to their computers. The Thursday evening preceding the meeting when I was hoping to put the finishing touches on the first video, I got a licensing error from Director making it impossible to launch and create the application. I was unable to find a solution in time for the Friday meeting so we had to reschedule. Luckily I found a resolution (the License Recovery app from Adobe).

The Actual Test

We tested the prototype Thursday, March 21. Two of our CS Principles teachers were kind enough to take 1/2 hour and run through the application and they answered some questions.


Questions for User Evaluation

Question 1: How usable did you find the navigation to be?

I liked the tabs and the color-coding.

The yellow was kind of hard to read. The red and green might be difficult of color-blind users.

The issues matrix was great! I wish I could have something like that on the web.

I liked the option to show/hide the timline, search, and bookmarks.

I'm not sure why there's an option to show/hide the timeline, search, and bookmarks.

I wasn't sure how to use the bookmarks feature. Having some built-in help would be nice.

I really liked the transcript search feature. Maybe you could add a feature to convert search results into bookmarks automatically.


Question 2: Given that the purpose of the application is to give pre-service teachers multiple ways of learing Beth's pedagogy, how helpful did you find it to be in gaining a better understanding of Beth's instructional methods?

I like the application but I don't think I really had enough time to learn much about Beth's methods. I would need to sit down and give it some more undivided attention.

I like the fact that the app can be "pre-made", but I think I might find it more useful to start with the video and transcript myself and create my own case. Maybe it should be given to the pre-service teachers in more of a "blank" state and let them create their own case, issues matrix, resources, etc.


Question 3: Do you have any suggestions or comments?

A web version would be great, sort of an advanced Youtube kind of service for teacher education.

I would like to videotape myself and create my own case for my own purposes.



In hindsight there are few things I would reconsider or simply do differently. The choice of Adobe Edge Animate was suspect to begin with. Susan had expressed some frustration with the tool herself when she tried to use it several months ago in its earlier development stages. I was perhaps overly optimistic that it had matured enough since then. I was aware it did not have built-in video support, but I was hoping I would find a relatively simple way to integrate video after exporting the Edge Animate file to HTML5. This proved more difficult than I had expected.

The decision to go with my own Case Creator tool was difficult since I was a little behind in the course already and I knew that Director could present some unexpected problems since it has always had a certain degree of unpredictability to it. However, never having actually used my own tool to create a video-based case study, I was pleasantly surprised at how functional it is.

While I was developing the tool many years ago I made some design decisions which significantly restricted its complexity, such as limiting the number of videos and transcripts to five. I had always felt the imposed simplicity might be a drawback, but I found in this particular case that the simplicity was an advantage. The step-by-step point-and-click interface was nice.

One of the problems with the video was they were not recorded with the idea of using them in a case study. I really liked the suggestion from one of the teacher-testers to allow pre-service teachers to build their own cases. Doing is learning!