Lectures and layouts are prepared as standard XHTML 1.1 with the addition of a few tags specifically recognized by eClass. There are two steps to the markup process: Preparing the layout files, and preparing the lecture. Layout files can be re-used across many lectures, and are used by eClass to render the lectures.
Layout Sets are groups of layout documents, placed in a folder of eClass's directory, or fetched from the Instructor's computer.
| Markup | Summary Description |
<eclass> | <eclass> is located in the <head> tag of the XHTML document. Every tag between this and </eclass> in this table are children of <eclass>.
|
<replace regex="search/replace"
[in="{sections}"]/>
| The replace tag allows a regular expression to be run against the contents of a section. |
<sections>...</sections> | Allows the definition of sections. See 2.2.1.3.3. |
<layout type="{layouttype}" />
| This tag defines the document to satisfy the layout "layouttype". |
</eclass> | |
<eclass-include sect="{section}" />
| Includes a section in the body of a layout document. |
<html> <head> <eclass> <layout type="default"/> . . .eClass would see that document as satisfying the "default" layout. This means that eClass would use this file to arrange the content in a
<page> tag if no alternate layout were specified.
The standard layout set has definitions for "default", "image", and "intro". The Instructor can add other layout files or sets of layout file as he sees fit.
2.2.1.3.2 The Replace Tag
The replace tag has the following syntax:
<replace regex="search/replace" [in="{sections}]"/>
The replace tag simply runs the regex search/replace expression against the sections in the 'in' attribute. If no 'in' attribute is specified, the regular expression is run against all sections.
As an example, in the standard layout, the "default" layout document has the following replace expression:
<replace regex="<li([^>]*)>([^<]*)/<li\1><span class='db'>\2</span>" in="content summary" />This expression means, "In the sections 'content' and 'summary', find all
<li> tags, and put a span tag around their contents." The reason for this is that normal XHTML does not allow for the default color scheme (red and blue) to be represented without explicitly coloring the text inside the "<li>" tags blue.
<eclass-include> tag defined in 2.2.1.3.4.
NOTE: The following is a rough description of what the sections tag may contain. If implementers find a better way to communicate the same information to the eClass program, then that is an equally acceptable alternative. An obvious shortcoming of the following plan is the inability to style different levels of the list independently using CSS. I actually advise that this entire section be scrapped and rethought. A good alternative might be to use PHP5 to describe these layouts, and then define the interface between eClass and the layouts such that the layouts return an XHTML document representing the "rendered" slide. That way, we wouldn't have to create a new scripting language/engine. I will continue, however, in the effort to show what this section might feel like.
The sections tag itself takes no attributes. The tags beneath the sections tag are of the following format:
<section_name type="kind" [value="data"] />Currently, there are a few 'kind's of sections:
A script consists of the following:
slide 1 ------ top is true:
The text returned from a given 'level' is the text at that level that is inside an "sd" (slide detail) tag, unless an additional restrictive designator is specified.
A restrictive designator further cuts down on what text is returned by that level, specifying that only the text within "sd" tags with a specific type attribute will be returned.
The " + 'string literal'" is the most obvious of all the script parts, and simply appends the string literal to whatever the previous part of the script results in.
As an example of all of this, consider the following:
<section type="script" value="top?([0]):([0]s + \", cont'd\")" />This expression means:
<eclass-incl sect="{section}" />
This tag is replaced by the contents of the referenced section name, as defined in the "sections" tag.
In version 1 of eClass, the Instructor then manually inserts special markup tags so that eClass can parse and understand the lecture.
| Markup | Summary Description |
<eclass> | <eclass> is located in the <html> tag of the XHTML document. Every tag between this and </eclass> in this table are children of <eclass>.
|
<section_name>...contents... | This is used to define layout sections with the type "header". See section 2.1 for more information. |
<layout set="layout_set" /> | This defines what set of layout files the Instructor wishes to use. |
</eclass> | |
<elcass-slide-num /> | This is substituted with the slide number of whatever slide that this tag appears in, including if it is placed in a "section_name" tag in the head of the lecture. |
<page [layout="layout-type"]
[type="render-type"]>
... content ...
</page>
| This tag describes a "page" of information to eClass. The optional layout attribute specifies what layout document that eClass should use to display this page's slides. The type attribute determines how the page is rendered. |
<sd [type="sd-type"]
[reg="search/replace"]>
... content ...
</sd>
| The sd tag surrounds text information that is meant to appear on slides in eClass. The 'type' specifies an 'sd-type' for use with layouts. The 'reg' specifies a search/replace regular expression to be applied to the contents of sd. |
| attribute: eclass-attrib="attrib params" | This attribute can be applied to any xhtml tag, and has the meaning that the attribute attrib is added to that tag ONLY when it is being displayed in eClass. If that attribute exists in that tag normally, it is replaced by this one. Normal browsers will ignore this tag. |
| optional attribute for ol/ul: [status="status"] | Status is an optional attribute for lists that tells eClass whether or not the lists are 'expanded' or 'collapsed' when the lecture is first loaded. If the status is not specified, a value of "expanded" is implied. |
<eclass> tag inside the <head> XHTML tag, the Instructor may define the contents of static sections in his chosen layout. In the default layout, there are 4 header sections: topleft, topright, bottomleft and bottomright. These header sections appear on every slide in the same location. For example, to place a copyright notice in the bottom left of every slide, the Instructor would use the following:
<bottomleft>©2006 Ð Instructor Name, School Name</bottomleft>
<layout set="Interesting" />This would instruct eClass to look in the "./layouts/Interesting/" directory to satisfy page layout requirements. The Instructor would, before lecture, construct a proper set of layout documents and placed them into this directory on his computer.
When a student connects to an eClass lecture, the layout documents are transferred to their copy of eClass along with the lecture document in order to ensure proper formatting.
2.2.2.3.3 eClass Slide Number Tag
This tag is replaced by eClass at slide render time with the slide number that eClass has calculated for that slide. The slide number is simply one plus the count of slides before the current one with the current settings for Outline Depth.
The tag is used as:
<elcass-slide-num />It has no attributes.
<page [layout="layout-type"] [type="render-type"]>
... content ...
</page>
Render type can be either "slides" or "scroll". The default is slides. The "slides" option breaks the page up into screenfuls of information. Scroll simply takes the page and displays it with a scrollbar beside it.
The "layout-type" specifies which layout document to use to format the slides in a page.
2.2.2.3.5 The SD tag
The Instructor uses the sd, or "slide detail", tag to let eClass know how to summarize a single element of a lecture when displaying it on the screen.
The syntax of the sd tag is:
<sd [type="sd-type"] [reg="search/replace"]> ... content ... </sd>The optional type specifies an "sd-type" that the current page's layout may recognize. The standard layout set uses "s" and "t", depending on the particular layout.
The optional reg specifies a search and replace regular expression pattern to be run against the tag's content before it is submitted to the layout.
If a block item, such as an li tag, does not contain any sd tags, eClass assumes the entire contents of the li are within an sd tag.
If there are multiple sd tags in an li element, their contents are concatenated.
As a final step before eClass tries to lay out a slide, all li's sd tags are "Sentencified", in that the first word is capitalized, words are spaced by a single space between them, and a period is added to the end if there is no punctuation already there (such as a ":" or a "?").
2.2.2.3.6 The eclass-attrib optional attribute
eClass adds the ability for any XHTML tag to take an additional attribute that is only used when the XHTML is rendered by eClass. For example, to make something only visible when in eclass, surround it with a div like so:
<div style="display: none;" eclass-style="">
... content ...
</div>
When eClass encounters this attribute, it replaces the current attrib, if any, with the data indicated by eclass-attrib="data".
<ul status="collapsed"> ... content ... </ul> or <ol status="collapsed"> ... content ... <ol>The default value for status is "collapsed". The possible values are "collapsed" and "expanded".
If status="collapsed", the specified list is shown in eClass as being collapsed, and does not show up in the course of the lecture, unless the teacher manually expands it in eClass.
Because this is version 1, the Instructor opens up the html and begins the markup process. He begins with adding an <eclass> clause to the beginning of the document. A typical <eclass> clause would look like:
<div style="display:none;">
<eclass>
<topleft>CSC308-F06-L1-2</topleft>
<topright>Slide <elcass-slide-num /></topright>
</eclass>
</div>
(Notice the div surrounding the eclass clause. This prevents browsers from displaying the markup inside when viewing the lecture on a standard browser. If this is not done, then most browsers will display " CSC308-F06-L1-2 Slide" at the top left of the page.)
This has instructed eClass to put "CSC308-F06-L1-2" in the top left corner of the slides (as per the standard layout set), and "Slide xx" in the top right corner (where xx will be replaced with the current slide number).
The Instructor then begins to mark up the actual lecture. The first thing that he encounters is the following data at the top of his lecture:
<p align=center>
<font size=+2>
<strong>
CSC 308 Lecture Notes Weeks 1 and 2
<br>
Introduction to Software Engineering,
<br>
Requirements Analysis, and Specification
</strong>
</font>
</p>
The Instructor decides to transform this into an introduction slide. Accordingly, he marks it up as:
<page layout="intro">
<p align=center>
<font size=+2>
<strong>
<sd type="t">CSC 308</sd> Lecture Notes Weeks 1 and 2
<br>
<sd type="s">Intro</sd>duction <sd type="s" reg="$/ the Course">to</sd> Software Engineering,
<br>
Requirements Analysis, and Specification
</strong>
</font>
</p>
</page>
This maintains the appearance in normal browsers, and tells eClass to render it as a single page with the "intro" layout document. eClass will display this portion of the lecture as this slide.
Notice the sd tags. The sd type="t" tags surround the "title" of the intro slide, and the sd type="s" tags surround the "subtitle" of the intro slide.
The regular expression inserts " the Course" after the "to".
As he continues marking up the lecture, he encounters a list that he knows will span multiple screens. He marks it up as this, and eClass renders the second part of it (it is broken into two slides), as this.
No layout is specified in the "page" tag, so eClass uses the default layout document. The sd-type="s" is used to display the "summary" for the second slide.
Further down, the Instructor encounters an image that he wants to show as a slide. So, he marks it as this:
<page layout="image">
<br>
<br>
<hr>
<a name="Figure Major phases of the software development process">
<p align=center>
<img src="figures/1-fig1.gif">
</p>
<p align=center> <sd>Figure 1: Major phases of</sd> the software development <sd reg="^/SE ">process</sd>.
</p>
<hr>
</a>
<br>
</page>
The layout "image" displays a single image on a slide. It renders in eClass as this.
When the Instructor finishes marking up his lecture, he saves it, ready to be loaded into eClass. This file has been provided as an example in 2.2.3.3, as well as the slides it renders into.
Intro uses sd-type "t" to designate the main title, and "s" to designate the subtitle.
The Standard Layout Set has been designed to mimic, as closely as possible, the behavior of Professor Gene Fisher's standard slide presentation style.
To insert a slide break, an Instructor selects a series of lecture elements in the Outline Preview window and then selects "Lecture-> Insert -> Slide Break". The eClass software then surrounds those lecture elements by a <page> tag pair and re-slidifies that section. The resulting slides are as defined in the rest of this section.
To insert an image, the Instructor selects a lecture element in the Outline Preview and then selects "Lecture -> Insert -> Image" from the menu bar. The Instructor is then prompted for an image file and a caption. The eClass software then inserts the following at the point in the lecture selected:
<page layout="image">
<img src="{selected image source}" />
<sd>{Image Caption}</sd>
</page>
That slide is then rendered in the same manner as any other <page layout="image"> tag.