2.2.3 Format Details

EClass uses XHTML to encode presentations. All standard HTML elements are available for use in EClass presentations (so long as the elements are in XHTML format), and CSS is allowed as well. The EClass presentation file is simply an XHTML file with special attributes. The special attributes that EClass supports are:

Collapsible List Element

Ordered and unordered list-elements can be given a specific property which specifies that the list-element is collapsible. Collapsible list elements are displayed differently than non-collapsible list elements to communicate their collapsible property. Collapsible list-elements start off initially collapsed or uncollapsed depending on how the attribute is specified, and when a collapsible list-item is selected it alternates between collapsed and un-collapsed. When a list-item is collapsed, its inner information is hidden. When it is un-collapsed, its inner information is displayed.

The following is sample source code on how collapsible elements are constructed:

<ul>                                                                                
   <li collapsible="enabled;collapsed">I'm collapsible and I'm initialized as collapsed.</li>
      <div class="CollapsibleInnerDiv">                                           
         <p>Hello, world!</p>                                                    
      </div>                                                                     
   <li collapsible="enabled;expanded">I'm collpasable and I'm initialized as expanded</li>
      <div class="CollapsibleInnerDiv">                                           
         <p>Hello, world!</p>                                                    
      </div>                                                                     
   <li collapsible="disabled">I'm not collapsible</li>                               
      <div class="CollapsibleInnerDiv">                                           
         <p>Hello, world!</p>                                                    
      </div>                                                                     
   <li>I'm not collapsible</li>                                                     
      <div class="CollapsibleInnerDiv">                                           
         <p>Hello, world!</p>                                                    
      </div>                                                                     
</ul>

Notice that to specify a list item as collapsible, the presentation maker must add the attribute "collapsible" to the list item and specify the property value. The property value can be either "disabled" "enabled;collapsed" or "enabled;expanded". The collpased/expanded value defines the default state of the collapsible list item. The following is an example of the resultant behavior (clicked on an underlined li to observe collapsing).

The eample above uses an unordered list (ul). Ordered lists (ol) are also supported in the same exact fashion. Ordered and unordered lists may have a specified bulletStyle attribute which can take the values A, a, i, I, 1, filled-dot, hollow-dot, and none. A, a, i, I, and 1 are all ordered-list bulletStyles. A and a specify a list with alphabetic ordering where the first list-element has the letter A or a, respectively and then carries on to the letter b for the next list element and so forth. i and I specify roman numeral list ordering, and 1 creates numeric ordering where the list elements begin at 1 procede to 2 and so forth. filled-dot, hollow-dot, and none are ul bulletStyle attributes. filled-dot specifies a ul with bullets of a filled-dot (as seen above). hollow-dot specifies a ul with bullets of a hollow-dot, and none specifies a ul without a bullet marker.

Below is an example of how the bulletAttribute is specified with the lowercase alphabetic numbering on an ordered list.

<ol bulletStyle="a">
   <li>First list item which will have the bullet "a"</li>
   <li>Second list item which will have the bullet "b"</li>
</ol>

See the following for more information on collapsing: details of how collapsing and uncollaping is performed and specifying an element's collapsible properties in the editor

Slide Boundary Element

The presentation exists as one large document through the editing process. However, when the presentation is viewed it is displays in slides. Slides are simply HTML elements. Here is an example:

<ul>                                                                                
   <li collapsible="enabled;collapsed">I'm collapsible and I'm initialized as collapsed.</li>
      <div class="CollapsibleInnerDiv">                                           
         <p>Hello, world!</p>                                                    
      </div>                                                                     
   <li collapsible="enabled;expanded">I'm collpasable and I'm initialized as expanded</li>
      <div class="CollapsibleInnerDiv">                                           
         <p>Hello, world!</p>                                                    
      </div>                                                                     
   <li collapsible="disabled">I'm not collapsible</li>                               
      <div class="CollapsibleInnerDiv">                                           
         <p>Hello, world!</p>                                                    
      </div>                                                                     
   <li>I'm not collapsible</li>                                                     
      <div class="CollapsibleInnerDiv">                                           
         <p>Hello, world!</p>                                                    
      </div>                                                                     
</ul>
<slide></slide>
<p>A very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long paragraph.</p>

The slide element denotes the slide break. Everything above the slide element is displayed on one slide; everything below is displayed in another slide. As many slide breaks as desired are allowed on a presentation with each slide element denoting where to begin the next slide. Assuming the above code is the entire presentation document, the ul is dispyed as slide one and the very long paragraph is displayed as slide two.

When using the slidify button of the presentation editor, all existing slide elements are removed before new slide boundaries are added. To specify a slide boundary as unremovable by the slidify feature, the attribute locked is added to the slide tag. EClass does not pay attention to the value of locked attribute; it only checks whether or not the attribute exists on the tag.






Prev: Importing A Presentation | Next: [none] | Up: Preparing A Presentation | Top: index