A lecture is an HTML file with certain HTML elements that are parsed slightly different than normal elements. The user can modify a lecture by editing its underlying HTML code in the Lecture Editor. In the Code View of the tool, the HTML of the lecture is visible as a large, editable string of text. The user can also write HTML outside of the eClass application and import it later using the Import tool. Regardless of the method used to create lectures, the user must understand the building blocks of a lecture and how certain aspects of HTML define functionality.
Lectures are written in precisely formatted HTML where certain elements are reserved and treated in way specific to the eClass. HTML is formatted in the form of nested ordered and unordered list elements to create a layered hierarchy of sections and subsections. Each ordered list can be expanded or collapsed during runtime. The portion of the TopicTree that can be clicked to expand or collapse the associated topic is defined by an HTML heading element (h1). Slides are separated by the horizontal rule element. These reserved elements should only be used when their assigned purpose is desired. They will never behave as regular HTML elements.
| Element | Tag | Purpose | Use Case |
|---|---|---|---|
| Ordered List | <ol type="X"> | Expandable/Collapsible Topic. The optional type attribute specifies which style of numbering should be used. Its value, X, can be one of the following: "A" (A, B, C...), "a" (a, b, c...), "I" (I, II, III...), "i" (i, ii, iii...), "1" (1, 2, 3...), or "dewey" (1.1, 1.2, 1.2.1, 1.2.2, etc.). If the type attribute is not specified, the default will be used (1, 2, 3...) | Creating a system of topic trees nested within each other where order matters. |
| Unordered List | <ul> | Expandable/Collapsible Topic. There is no type attribute because the list items are unordered and are all bulletted. | Creating a system of topic trees nested within each other where order does not matter. |
| List Item | <li> | The singular items of a topic tree. Each list item can itself contain another topic tree. | Preserving the proper structure of a topic tree |
| Heading | <h1> | Portion of TopicTree that is clickable to allow expanding/collapsing. Must be within a list item (li). | Creating the title of a topic and differentiating between the topic's static content and its funtionality to expand and collapse |
| Horizontal Rule | <hr> | Slide Break | Mark locations in the HTML file where one slide ends and a new slide begins |
The following is an example of the HTML of a lecture consisting of 5 images, each designated as a slide:
<img src="1.png"/> <hr> <img src="2.png"/> <hr> <img src="3.png"/> <hr> <img src="4.png"/> <hr> <img src="5.png"/>
That same HTML would be displayed like so:
Slide 1:The following is an example of the HTML of a lecture containing a topic tree by making use of the ordered list tag. This lecture has 3 slides.
<ol>
<li>
<h1>Linked Lists</h1>
<ol>
<li>
<h1>Nodes</h1>
<p>
` Nodes are the individual pieces of the Linked List that
hold data and can be traversed back and forth.
</p>
</li>
<li>
<h1>Double Linked</h1>
<p>
A doubly linked list is the same as a regular linked list,
but each node also has a previous node reference.
</p>
<p>
This allows you to traverse the list in both directions.
</p>
</li>
<li>
Topic 1.3
</li>
</ol>
</li>
<li>
Topic 2
<ol>
<li>
Topic 2.1
</li>
<li>
Topic 2.2
</li>
</ol>
</li>
</ol>
<hr>
<ol>
<li>
Topic 3
</li>
<li>
Topic 4
<ol>
<li>
Topic 4.1
</li>
<li>
Topic 4.2
</li>
</ol>
</li>
<li>
Topic 5
</li>
</ol>
<hr>
<ol>
<li>
Topic 6
</li>
<li>
Topic 7
</li>
<li>
Topic 8
</li>
</ol>
That same HTML would be displayed like so (the topics can be toggled into an expanded or collapsed state by double clicking):
Slide 1:Nodes are the individual pieces of the Linked List that hold data and can be traversed back and forth.
A doubly linked list is the same as a regular linked list, but each node also has a previous node reference.
This allows you to traverse the list in both directions.