<?xml version="1.0" encoding="ISO-8859-1"?>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:time="http://www.x-smiles.org/2004/timesheet" 
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xforms="http://www.w3.org/2002/xforms">

    <head>    

        <style type="text/css">
            .video { display: inline; width: 160; height: 287; }
            .slides {position:absolute; display:block; top: 0px; left: 180px; width: 475; height: 287; margin: 0px 0px 0px 0px; }
            #logosection { position: absolute; top: 297px; left: 0px; width: 160px; height: 150px; }
            #logo { display:inline;  margin: 35px 0px 0px 5px; }
            #links { position: absolute; background-color: #d0d0d0; border-width: 3px;border-style: solid; border-color: black; 
                     margin: 3px 3px 10px 3px; width: 350px; height: 150px; top: 297px; left: 180px; }
            a { display: block; font-size: 18px; font-weight: bold; font-family: Arial; color: blue; }
            .linkinactive { font-size:  18px; font-weight: bold; font-family: Arial; margin: 0px 0px 0px 0px; }
            #title,#doexam,#end { display: inline; font-size: 30px; font-weight: bold; font-family: Arial; margin: 10px 0px 0px 70px; }
            .time { display: inline; font-size: 30px; font-weight: bold; font-family: Arial; color: blue; margin: 10px 0px 0px 100px; }
            #examdiv,#resultdiv { margin: 10px 0px 0px 70px; width: 640px; padding: 10px 10px 10px 10px; border-style: solid; border-width: 3px;background-color: #eeeeee; }
            #resultdiv {padding: 40px;}
            .question { display: inline; font-size: 16px; font-weight: bold; font-family: Arial; margin: 0px 0px 0px 0px; }
            #question2 { padding: 0px 0px 0px 30px; }
            
            @namespace xforms url(http://www.w3.org/2002/xforms);
			xforms|* {font-weight:bold;}
			xforms|trigger {width:300px;height:40px;font-size:17px;}
			xforms|trigger,xforms|trigger::value {background-color:#dddddd;}
			xforms|select1,xforms|select1 label,xforms|select1::value {font-size:20px;display:block;}
			/*xforms|select1 {width: 200px; height:128px;font-size:20px;}*/
			/*select1#select2,select1#select1 { display:inline; margin: 0px 0px 0px -50px; }*/
			/*select1#select1 label {width:10px;height:2px;}
			select1#select2 label {width:10px;height:2px;}*/
			xforms|label {background-color:#eeeeee;font-size:13px;}
        </style>
        
        <time:time>
            <time:item select="#logosection"/>
            <time:item select="#links"/>
            <time:seq>              
                <time:par dur="30s" id="lesson1" begin="0s,link1.DOMActivate,resultdiv.failed">
                    <time:item select="#link3"/>
                    <time:item select="#link4inactive"/>                    
                    <time:item select="#video1" id="videoitem1" dur="indefinite" prefetch="true"/>
                    <time:seq id="slideseq1" begin="videoitem1.begin">
                        <time:item select="#slide1" dur="10s" prefetch="true"/>
                        <time:item select="#slide2" dur="10s" prefetch="true"/>
                        <time:item select="#slide3" prefetch="true"/>                                
                    </time:seq>
                </time:par>
                
                <time:par id="lesson2" dur="30s" begin="2s,link2.DOMActivate">
                    <time:item select="#link3"/>
                    <time:item select="#link4inactive"/>                                        
                    <time:item select="#video2" id="videoitem2" dur="indefinite" prefetch="true"/>
                    <time:seq id="slideseq2" begin="videoitem2.begin">
                        <time:item select="#slide4" dur="10s" prefetch="true"/>
                        <time:item select="#slide5" dur="10s" prefetch="true"/>
                        <time:item select="#slide6" prefetch="true"/>                                
                    </time:seq>
                </time:par>            
                
                <time:par id="pre-exam">
                    <time:item select="#doexam"/>
                    <time:item select="#link3"/>
                    <time:item select="#link4inactive"/>
                </time:par>
                
                <time:par id="exam" begin="link3.DOMActivate,doexam.DOMActivate" dur="10s">
                    <time:item select="#theexam"/>
                    <time:item select="#examdiv"/>                    
                    <time:item select="#link3inactive"/>
                    <time:item select="#link4inactive"/>
                    <time:seq>
                        <time:item select="#10s" dur="1s"/>
                        <time:item select="#9s" dur="1s"/>
                        <time:item select="#8s" dur="1s"/>
                        <time:item select="#7s" dur="1s"/>
						<time:item select="#6s" dur="1s"/>                         
                        <time:item select="#5s" dur="1s"/>
                        <time:item select="#4s" dur="1s"/>
                        <time:item select="#3s" dur="1s"/>												
                        <time:item select="#2s" dur="1s"/>
                        <time:item select="#1s" dur="1s"/>																		
                    </time:seq>                           
                </time:par>

                <time:par id="post-exam">
                    <time:item select="#theexam"/>
                    <time:item select="#resultdiv"/>                    
                    <time:item select="#link3"/>
                    <time:item select="#link4inactive"/>
                </time:par>
                
                <time:par id="lesson3" begin="link4.DOMActive,resultdiv.passed" dur="30s">
                    <time:item select="#link3"/>
                    <time:item select="#link4"/>
                    <time:item select="#video3" id="videoitem3" dur="indefinite" prefetch="true"/>
                    <time:seq id="slideseq3" begin="videoitem3.begin">
                        <time:item select="#slide7" dur="10s" prefetch="true"/>
                        <time:item select="#slide8" dur="10s" prefetch="true"/>
                        <time:item select="#slide9" prefetch="true"/>                                
                    </time:seq>                    
                </time:par>
                
                <time:par id="theend">
                    <time:item select="#link3"/>
                    <time:item select="#link4"/>
                    <time:item select="#end"/>
                </time:par>

            </time:seq>
        </time:time>
        
        <!-- XForms exam model -->
		<xforms:model>
        	<xforms:instance xmlns="">
		        <exam>
        			<part>
		        		<question id="standard">
				        	<rightanswer>IEEE</rightanswer>
        					<answer></answer>
		        			<answered>false</answered>
				        	<passed>false</passed>
        				</question>
		        		<question id="range">
				        	<rightanswer>small</rightanswer>
        					<answer></answer>
		        			<answered>false</answered>
				        	<passed>false</passed>
        				</question>
		        	</part>
        			<results>
		        		<numpassed>0</numpassed>
        				<passed>false</passed>
		        		<passedtrigger></passedtrigger>
        				<failedtrigger></failedtrigger>
		        	</results>
        		</exam>
        	</xforms:instance>
        	<xforms:bind nodeset="results/passedtrigger" relevant="../passed='true'"/> 
        	<xforms:bind nodeset="results/failedtrigger" relevant="../passed='false'"/> 
        	<xforms:bind nodeset="results/passed" constraint=".='true'"/> 
        	<xforms:bind nodeset="part/question/passed" calculate="../answer=../rightanswer"/> 
        	<xforms:bind nodeset="results/numpassed" calculate="count(/exam/part/question[passed='true'])"/> 
        	<xforms:bind nodeset="results/passed" calculate="if(../numpassed=count(/exam/part/question),'true','false')"/> 
        </xforms:model>
        
    </head>
          
    <body>
        <div>
            <!-- lesson 1 -->
            <object id="video1" class="video" type="video/ms-avi" data="../../smil/demo_lecture/video/video2.avi"/>  
            <object id="slide1" class="slides" type="text/xml" data="slides/slide1.xhtml"/>  
            <object id="slide2" class="slides" type="text/xml" data="slides/slide2.xhtml"/>  
            <object id="slide3" class="slides" type="text/xml" data="slides/slide3.xhtml"/>              

            <!-- lesson 2 -->
            <object id="video2" class="video" type="video/ms-avi" data="../../smil/demo_lecture/video/video2.avi"/>  
            <object id="slide4" class="slides" type="text/xml" data="slides/slide4.xhtml"/>  
            <object id="slide5" class="slides" type="text/xml" data="slides/slide5.xhtml"/>  
            <object id="slide6" class="slides" type="text/xml" data="slides/slide6.xhtml"/> 
            
            <a href="" id="doexam" ev:event="DOMActivate" ev:defaultAction="cancel">Do the Exam!</a>

            <!-- exam -->
            <div id="theexam">
                <p id="title">Mid-Term Exam</p>
                <p id="10s" class="time">10</p>
                <p id="9s" class="time">9</p>
                <p id="8s" class="time">8</p>
				<p id="7s" class="time">7</p>
                <p id="6s" class="time">6</p>
                <p id="5s" class="time">5</p>				
                <p id="4s" class="time">4</p>				
                <p id="3s" class="time">3</p>
                <p id="2s" class="time">2</p>				
                <p id="1s" class="time">1</p>				
        
                <div id="examdiv">        
                <!--
                   <p id="question1" class="question">1. Which is a WLAN standard?</p>            
                   <p id="question2" class="question">2. What is the range of a WLAN station?</p>
                   -->
                   
                   <xforms:select1 ref="part/question[@id='standard']/answer" id="select1" appearance="full">
                        <xforms:label>1. Which is a WLAN Standard?</xforms:label>
                        <xforms:label/>
  		            	<xforms:item><xforms:label>IEEE 802.11</xforms:label><xforms:value>IEEE</xforms:value></xforms:item>
  			            <xforms:item><xforms:label>W3C XForms</xforms:label><xforms:value>W3C</xforms:value></xforms:item>
           			    <xforms:item><xforms:label>WAP</xforms:label><xforms:value>WAP</xforms:value></xforms:item>
               		</xforms:select1> 
    
           	    	<xforms:select1  ref="part/question[@id='range']/answer" appearance="full" id="select2">
   	        	    	<xforms:label>2. What is the range of a WLAN station?</xforms:label>
   		        	    <xforms:item><xforms:label>5 km</xforms:label><xforms:value>large</xforms:value></xforms:item>
       			        <xforms:item><xforms:label>1 km</xforms:label><xforms:value>medium</xforms:value></xforms:item>
           			    <xforms:item><xforms:label>100 m</xforms:label><xforms:value>small</xforms:value></xforms:item>
           	    	</xforms:select1>
           	    </div>

           	    <div id="resultdiv">
           	    	<a href="">
                        <xforms:trigger id="continuetrigger"  ref="results/passedtrigger" appearance="full">
                    	    <xforms:label>Passed! Continue.</xforms:label>
                    		<xforms:action ev:event="DOMActivate">
    		                    <xforms:dispatch name="passed" target="resultdiv"/>
                            </xforms:action>
                		</xforms:trigger>
        		    </a>
                    <a href="">
                        <xforms:trigger ref="results/failedtrigger" appearance="full">
                            <xforms:label>Failed! Review lectures.</xforms:label>
                            <xforms:action ev:event="DOMActivate">
        		                <xforms:dispatch name="failed" target="resultdiv"/>
                            </xforms:action>        		            
                        </xforms:trigger>
                    </a>
                </div>

       	    </div>

            <!-- lesson 3 -->
            <object id="video3" class="video" type="video/ms-avi" data="../../smil/demo_lecture/video/video2.avi"/>  
            <object id="slide7" class="slides" type="text/xml" data="slides/slide7.xhtml"/>  
            <object id="slide8" class="slides" type="text/xml" data="slides/slide8.xhtml"/>  
            <object id="slide9" class="slides" type="text/xml" data="slides/slide9.xhtml"/> 

        </div>

        <p id="end">The end. Have a nice day!</p>                      

        <div id="logosection">
            <img src="logo.png" id="logo"/>
        </div>
        <div id="links">
            <a href="" id="link1" ev:event="DOMActivate" ev:defaultAction="cancel">1. Frequency Allocation</a>
            <a href="" id="link2" ev:event="DOMActivate" ev:defaultAction="cancel">2. WLAN Standards</a>
            <a href="" id="link3" ev:event="DOMActivate" ev:defaultAction="cancel">3. Exam</a>
            <p id="link3inactive" class="linkinactive">3. Exam</p>
            <a href="" id="link4" ev:event="DOMActivate" ev:defaultAction="cancel">4. WLAN Layers</a>
            <p id="link4inactive" class="linkinactive">4. WLAN Layers</p>
        </div>
    </body>
          
</html>
