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 or represent proposal previews.

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

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.

Pages in Development for 2018, first term

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 (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.

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.


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.

-- 30 --