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.
These pages are, for the most part, a re-structuring of the server delivered pages. I have an archive of those older server-side ASP pages here:
https://www.mikestrongphoto.com/lessons/You can see this in operation as a student by logging in as astudent, no password used. This will show that astudent is enrolled in two classes, one in winter 2003 and one in fall 2008. This will be shown with the two rows in the table with a white background. In the first column you will see the semester and any grades. Clicking on the grades gets you a grade-display for that student in that course. In the right column you will see the course names. In the middle column (hed is "Go") you can click on any "Open" button to get to the course.
The courses the student is enrolled in have a white background and allow the student to take quizzes and to see grades. The student is also allowed to visit any of the other courses. Indeed, I encouraged student to look. It gave them a way to see what they might be getting if they signed up. That avoided mistakes in knowing what the course was for.
Miscellaneous Utilities
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 poolsTime 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 amUpload and use directly or download and use directly, no server needed: TotalHours.htm
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.
Page Development (current courses)
These were added to Blackboard's resource folder for each course, then linked from the CMS-generated pages
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.
Foundation for Javascript Navigational Page Set (J-Nav)
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 Horizontal Navigation Template
J-Nav default (home) page. This is a roughly sketched out set of testing/dev pages as a prototyping template.
This set writes the links out across the top of the page, horizontally. The links are examples only and don't go anywhere (you will get a 404 error).This could work for a phone where side-panel space is lacking. Although this sample also retains in-page links, the same as any home/default page.
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:
The archive has been converted from server based to file based, with similar operation including course menus.
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: This was originally designed for a seminar with dance students at the Conservatory of Music and Dance at UMKC, the Dance Division. This was a couple of days in person with the covered material and extra support material online, as shown here. I threw together a lot of material from other courses I had online for PACE already. At that time the material was server delivered. I've taken that seminar and modified it to work off any file system using my J-Nav design to give it a menu down the left hand side of each page.
Course Content - a simple index page and simple HTML pages
(no server-side code) A starter page and related files (To Be)
Text Downloads: Essential J-Nav Files
Each link will open in a new window, or you can right click and select download.
CSS (Stylesheet) and Navigation Links
basenav.css - Combines regular page styles with behaviour styles for divs and page formatting.
NavList.js - (starting sample) This is the delimited (fields seperated by vertical bars) data set which is specific for this course. This needs to be hand coded by the teacher or designer. It get updated with each new page or removal of a page.
"vid|video|<15pt>|Video Editing|video,editors|-", "vid|video|DV_FileFormats.htm|Video File Formats|formats,files|-",The fields, in order, from 0 to nn are:
0 - page-grouping tag
1 - quiz-ID tag to match quiz score with lesson
2 - Either a font size (shown in <> angle brackets) meaning this line is a section heading OR the relative path (if needed) and filename of the html page (name and extension)
3 - Either the section heading text (if a section heading) OR the link text to show for the URL
4 - future use - not used now
5 - future use - not used now
6 - terminator segment to allow variable number of fields. Used as a sentry to avoid searching beyond the last element.NavFuncs.js - The code to use the data in NavList.js to create HTML code for a set of site links to other lesson pages in the course.
Quiz Functions
QuizFuncs.js - Contains functions to write the test to an area of the page based on the QuizList.js data lines.
QuizList.js - (starting sample) Here are all the questions in a delimited data format for all the named quizzes in a course. Each line lists the quiz ID and the type question with answers The square brackets [] will show as a long underscore for text (fill in the blank) questions.
"links|qz02|text|-|A link connects the linking document with the [].|10|resource|-",The fields, in order, from 0 to nn are:
0=pageID
1=QuizID
2=type (text, radio, checkbox)
3=dummy segment
4=question text
5=points
6=answers (as answer [text] or t/f,answer-option or points,answer-option)
7=terminator segment used as a sentry to mark end of record fields on this line.quizGrader_bare.js - Contains the functions to grade the quiz and display the results immediately.
It also retains a section used for posting the grades to a database to collect student quiz grades in a course, a section not being used at the moment. This last section is at the bottom of the js file starting with: if(postgrade==99). By changing the value of the variable postgrade to 99 you add the grade on the quiz to the database course record. For that, you need a record ID to the student record (can be local, with a transfer at grade posting time). If that isn't available there is no location to post to.
-- 30 --