Lesson Examples and Prototypes

By Mike Strong

This is a devbox (developer's box) for working out courseware and courses. These are either in development, represent proposal previews or are archived.

Index of pages in development, still very rough.

Foundation for Javascript Navigational Page Set

These pages are designed to use javascript for most of the navigation in a bound set of lesson pages. The choice of javascript rather than ASP or PHP server technology is deliberate to avoid the need for server-based script coding for students who are not ready to create a server on their own computers but need to learn HTML and CSS. This also allows a student to develop and run the entire site, with working code, on their own local desktop or laptop without installing a server.

I needed to have a unified set of pages, including review quizzes which worked across that set of pages for inclusion in individual pages (specifically applied adjacent to the contextual material) and for separate quiz pages generating quizzes for more than one page.

A javascript array guides the navigation. All left-side menu items are generated in javascript at the client side using a javascript data array. This is a substitute for what would otherwise be either server-side script or server-side include files, both of which require a server.

This isn't the only possible choice but was one of several configurations I looked at for an introductory-level class to get up and running with a capable site but also simple enough for a single semester. A number of options used by others (nav menus) were far too complex for what I was looking for. I can get them but it will simply stop most first-time-to-web-dev students in their tracks so it doesn't belong here. My other option, which may still be a good one, is to focus on CMS sites, such as WordPress and develop there. That has the advantage of something used by more people and is more approachable in many ways but each CMS has its own learning curves and none of them really concentrate on basic HTML/CSS. I may introduce some copy-as-is javascript code but I don't want to approach a first web site class as a javascript class. That would be separate.


The Javascript Page-Set Navigation Template

J-Nav default (home) page. This is a roughly sketched out set of testing/dev pages as a prototyping template.

Question Generator - for self-review quizzes and for BlackBoard quiz questions

Quiz Question Generator for in-page, non-graded review quizzes. (NOTE: the grade is generated locally but not stored or turned in) These quizes are held together in the JNav pages as a question pool. This is a stand-alone page and can be downloaded (saved) and used by itself offline.

This was originally written to generate questions for this in-page graded quiz providing the HTML code to copy and paste into the page code for a <form> section containing the quiz. I've now added a quiz <form> generating javascript function code to write any such in-page quiz using a simple javascript api function call from a javascript data array question pool. You simply copy and paste the function call anywhere in the HTML code of your page adding the tag to match the dataline tags for that quiz. To support this I've modified and added on to the question generator the added ability to create code lines to add to the question pool directly.

This led to a simultaneous generation of BlackBoard-import lines to copy and paste into a text document for import by Blackboard.

The output (to copy and paste):
1 - HTML code for an in-page quiz
2 - data-array lines to add questions to a question pool as an array of data lines (each line a question)
3 - data lines in BlackBoard import format used to create questions for BlackBoard and to import into BlackBoard quiz pools

Time Totaler - quick and simple utility

I wrote this because I couldn't find an earlier application I had written a few years ago, which did the same. I like to keep my job times in a very simple hash list format: time - comment or note where the time is in sexagesimal format (hh:mm:ss) followed by a hyphen to separate the time followed by a note or comment about what I did. A typical format looks like this:

At The GEM
3:00:00 - prep time Friday night
2:20:00 - drive time
6:30:00 - location time 2:30-9:00?
1:20:00 - drive time
3:00:00 - download and synch
2:30:00 - edit
2:34:31 - render to mxf
Topeka performance
12:00:00 - Lightroom for Topeka stills
2:26:00 - export Topeka Stills (full set of 204 [out of 517]) 1:25 - 3:51 am)
0:23:00 - Lightroom for remainder of GEM stills (34 out of 97 rated and 343 totao - ) 7 am - 7:23 am
Selected Stills: Total of 860 frames, 301 rated 3:1 ratio or 35%
0:35:00 - Author both DVDs
3:20:54 - Prepare Topeka DVD - Start 8 am, eta 11:30 am

Upload and use directly or download and use directly, no server needed: TotalHours.htm



Courses using the J-Nav design template

NOTE 1: The Syllabi for these courses are preliminary versions to guide my development and need to be updated as I update the information. But for now they help to provide a visible starting point to look at. Although they cover a good deal of territory they will be updated.

NOTE 2: Quiz pages will get some updating as I add to the quiz database (question pool). For the moment the separate quiz pages are just space holders. The quiz generating javascript function has nothing to generate so it presents the "No questions found" message.

NOTE 3: These were originally created to be requested from a web server. I wanted to be able to use these on a USB stick or CD (older times) so they would operate the same, even without needing a server. This was accomplished with a some javascript - my coding.

Archive (Pages in Development for 2018, first term) - placed equivalent on BlackBoard instead

Each of these courses is self-contained. A link to any single page produces the side menu for all the pages.

Web Site Design Course Prototype (update of 1999 course, in development since early October 2017 for first term 2018). At this time it I am updating with an emphasis on CSS responsive pages for desktop and phones. This uses my JNav menu system and self-review in-page quiz system.

Archived courses:

Multimedia Production and Concepts Course Prototype (in development since early October 2017 for first term 2018). At this time I am updating with an emphasis on Live Streaming, television and phones.

Dance Animation: Designed for dance students as a live-classroom course which quickly became a mixture of face-to-face, peer-collaboration and web lessons. This was for a Friday afternoon and designed as a tech/computer requirement for the dancers at the Conservatory of Music and Dance, UMKC, Dance Division. Although setup in a lab in the Conservatory we also needed to accomodate the traditional performance-curriculum schedule which meant dancers are often in shows both in the school and in the city or other locations. Friday afternoons they are often in rehearsal. Also dancers are great collaborators. That is almost their entire life in performance. So I quickly setup web pages to accomodate them when they could not come to class and also set up other lab times by appointment as needed.

Dance Production (to be added)


Course Content - a simple index page and simple HTML pages

(no server-side code)

Page Development (current courses)

Introduction to Computers - (105) Just an index page and the content pages without the BlackBoard overhead.

Computers: Uses and Impact - (106) An index page and content without BlackBoard top end.

Ballet Curriculum

Curriculum lessons for teachers at American Dance Center - by owner/dancer Jennifer Tierney. Run through as many of the videos as you can. Pay attention to the Plie lessons, because plies are central to movement in ballet. In these lessons Jennifer is telling her teachers what she expects of them in teaching the youngest kids in the school and preparing them to move into her American Youth Ballet company at age 13.



-- 30 --