<?xml version="1.0" encoding="utf-8"?>

<svg xmlns:xlink="http://www.w3.org/1999/xlink"  width="1023" height="640">
<style type="text/css">
/* Style sheet for the presentation slides */


/* Header and Footer Styles */
path.titlearrow {stroke:none;fill:#0C469C}
rect.title      {fill:white;stroke:none}
line.title      {stroke:#0C469C;stroke-width:3;fill:none}
text.signature  {font-family:Arial;font-size:12;font-style:italic;font-weight:bold;fill:#0C469C} 
text.title      {font-family:Arial;font-size:36;font-weight:bold; fill:#0C469C;text-anchor:middle}
text.tooltip    {font-family:Arial;font-size:20;font-weight:bold; fill:#0C469C}
stop.side         { stop-color: #5C96EC; }
stop.side-right   { stop-color: #5C96EC; }
stop.middle       { stop-color: #eeeeff; }

/* Only used in preparation */
rect.background {fill:#eeeeff;stroke:none}

/* Body Styles */
.outline        {stroke-width:4;fill:none;stroke:maroon}
rect.back       {stroke:none;fill:white}
rect.box        {stroke:black;fill:white}
circle.box        {stroke:black;fill:white}
ellipse.box        {stroke:black;fill:white}

rect.emph       {stroke:black;fill:lemonchiffon}
rect.emph2      {stroke:black;fill:paleturquoise}
rect.emph3      {stroke:black;fill:rgb(143,124,258)}
circle.emph     {stroke:black;fill:lemonchiffon}
circle.emph2    {stroke:black;fill:paleturquoise}
circle.emph3    {stroke:black;fill:rgb(143,124,258)}
ellipse.emph    {stroke:black;fill:lemonchiffon}
ellipse.emph2   {stroke:black;fill:paleturquoise}
ellipse.emph3   {stroke:black;fill:rgb(143,124,258)}
path.emph       {stroke:black;fill:lemonchiffon}
path.emph2      {stroke:black;fill:paleturquoise}
path.emph3      {stroke:black;fill:rgb(143,124,258)}
rect.hyperlink  {stroke:black;fill:lightpink}
text.hyperlink  {fill:deeppink;stroke:none}
tspan.hyperlink  {fill:deeppink;stroke:none}

path.duck       {fill:sandybrown;}

path.lineduck   {stroke:crimson;stroke-width:4;fill:none}

text.major     {font-family:Arial;font-size:32; font-weight:bold; fill:#0C469C}
tspan.major    {font-family:Arial;font-size:32; font-weight:bold; fill:#0C469C}
text.minor     {font-family:Arial;font-size:24; font-weight:bold; fill:#0C469C}
tspan.minor    {font-family:Arial;font-size:24; font-weight:bold; fill:#0C469C}
text.min       {font-family:Arial;font-size:20; font-weight:bold; fill:#0C469C}
tspan.min      {font-family:Arial;font-size:20; font-weight:bold; fill:#0C469C}
text.code      {font-family:Arial;font-size:20; font-weight:bold; fill:brown}
text.medcode   {font-family:Arial;font-size:16; font-weight:bold; fill:brown}
text.subcode   {font-family:Arial;font-size:14; font-weight:bold; fill:brown}
tspan.code     {font-family:Arial;font-size:20; font-weight:bold; fill:brown}
tspan.medcode  {font-family:Arial;font-size:16; font-weight:bold; fill:brown}
tspan.subcode  {font-family:Arial;font-size:14; font-weight:bold; fill:brown}
tspan.em       {font-style:italic;fill:forestgreen}
tspan.high     {fill:mediumvioletred}
tspan.high2    {fill:blue}
tspan.high3    {fill:green}

text.dt        {font-family:Arial;font-size:24; font-weight:bold; fill:darkolivegreen}
tspan.dt        {font-family:Arial;font-size:24; font-weight:bold; fill:darkolivegreen}
text.dd        {font-family:Arial;font-size:20; font-weight:bold; fill:#0C469C}
tspan.dd        {font-family:Arial;font-size:20; font-weight:bold; fill:#0C469C}

text.box       {font-family:Arial;font-size:20; font-weight:bold; text-anchor:middle; fill:#0C469C}
tspan.box       {font-family:Arial;font-size:20; font-weight:bold; text-anchor:middle; fill:#0C469C}
text.marks     {font-family:Arial;font-size:18; font-weight:bold; text-anchor:middle; fill:#0C469C}
text.start     {font-family:Arial;font-size:20; font-weight:bold; text-anchor:start;  fill:#0C469C}
text.end       {font-family:Arial;font-size:20; font-weight:bold; text-anchor:end;  fill:#0C469C}
tspan.start     {font-family:Arial;font-size:20; font-weight:bold; text-anchor:start;  fill:#0C469C}
tspan.end       {font-family:Arial;font-size:20; font-weight:bold; text-anchor:end;  fill:#0C469C}
text.list      {font-family:Arial;font-size:24; font-weight:bold; text-anchor:start;  fill:darkgreen}
tspan.list     {font-family:Arial;font-size:24; font-weight:bold; text-anchor:start;  fill:darkgreen}
text.sublist   {font-family:Arial;font-size:20; font-weight:bold; text-anchor:start;  fill:#0C469C}
tspan.sublist  {font-family:Arial;font-size:20; font-weight:bold; text-anchor:start;  fill:#0C469C}
text.sub2list   {font-family:Arial;font-size:18; font-weight:bold; text-anchor:start;  fill:#0C469C}
tspan.sub2list  {font-family:Arial;font-size:18; font-weight:bold; text-anchor:start;  fill:#0C469C}

path.arrow     {fill:crimson;stroke:none}
line.arrow     {stroke:crimson;stroke-width:4;fill:none}
path.arrow2    {fill:darkgreen;stroke:none}
line.arrow2    {stroke:darkgreen;stroke-width:4;fill:none}

path.line      {stroke:crimson;stroke-width:3;fill:none}
path.thinline  {stroke:blue;stroke-width:1.5;fill:none}
path.thinline2  {stroke:green;stroke-width:1.5;fill:none}
line.line      {stroke:crimson;stroke-width:3;fill:none}
line.thinline  {stroke:blue;stroke-width:1.5;fill:none}
line.thinline2  {stroke:green;stroke-width:1.5;fill:none}
polyline.line  {stroke:crimson;stroke-width:3;fill:none}
polyline.thinline {stroke:blue;stroke-width:1.5;fill:none}
polyline.thinline2 {stroke:green;stroke-width:1.5;fill:none}

</style>
<rect class="background"  width="1023" height="640"/>
<g transform="translate(0,10)">




<g onload="DoOnLoad( evt )">

<defs>
<style type="text/css">
<![CDATA[
rect {stroke:black;fill:white;}
line {stroke:yellow;stroke-width:10;fill:none}
text {font-family:Arial;font-size:20}

]]>
</style>
</defs>

<defs>
<script type="text/ecmascript"><![CDATA[

var starttime = 0;
var doc;
var trial=1;
var startx=125;
var starty=125;
var dx=500;
var dy=200;
var posx=625;
var posy=325;
var d=540;
var rad=5;




var test = 1;
var total = 0;

function DoOnLoad(event)
{
doc = getSVGDocument(event.getTarget());
var el = doc.getElementById("circle");
el.getStyle().setProperty("fill", "green", ""); 
dx=500;
dy=200;
d=Math.ceil(Math.sqrt(dx*dx+dy*dy));

rad=5;
posx=dx+startx;
posy=dy+starty;
el = doc.getElementById("destination");
el.setAttribute("cx",posx);
el.setAttribute("cy",posy);
el.setAttribute("r",rad);
el = doc.getElementById("destext");
el.setAttribute("x",posx+rad+10);
el.setAttribute("y",posy-rad-10);
el = doc.getElementById("L1");
el.getStyle().setProperty("visibility", "visible", ""); 
el.firstChild.NodeValue = d;
el = doc.getElementById("R1");
el.getStyle().setProperty("visibility", "visible", ""); 
el.firstChild.NodeValue = rad;

}

function DoOnMouseOver(event)
{

if( event.getTarget().getAttribute("id") == "circle" )
{
doc = getSVGDocument(event.getTarget());
var el=doc.getElementById("circle");
el.getStyle().setProperty("fill", "blue", ""); 
var d = new Date();






var sum=0;
for (var i = 0; i<500000; ++i)
{sum += i;
}

starttime = d.getTime();
el = doc.getElementById("start");
el.getStyle().setProperty("visibility", "visible", ""); 


}
}

function go()
{
var el = doc.getElementById("start");
el.getStyle().setProperty("visibility", "visible", ""); 
}


function DoOnMouseOut(event)
{
if( event.getTarget().getAttribute("id") == "circle" )
{
 var el = getSVGDocument(event.getTarget()).getElementById("circle");
 el.getStyle().setProperty("fill", "green", ""); 

}
}



function DoOnMouseDown(event)
{
//alert("OnMouseDown");
doc = getSVGDocument(event.getTarget());
if( event.getTarget().getAttribute("id") == "destination" )
{
//alert("hello");
  var el = getSVGDocument(event.getTarget()).getElementById("helloText");
//  el.getStyle().setProperty("visibility", "visible", ""); 
var d = new Date();
var s = d.getTime();
//alert(s);
var elapsed = s-starttime;
//alert("elapsed=");
//alert(elapsed);
var elap=elapsed/5;
//alert("test=");
//alert(test);
switch (test) {
  case 1:var wd = getSVGDocument(event.getTarget()).getElementById("a1");break;
  case 2:var wd = getSVGDocument(event.getTarget()).getElementById("a2");break;
  case 3:var wd = getSVGDocument(event.getTarget()).getElementById("a3");break;
  case 4:var wd = getSVGDocument(event.getTarget()).getElementById("a4");break;
  case 5:var wd = getSVGDocument(event.getTarget()).getElementById("a5");break;
  case 6:var wd = getSVGDocument(event.getTarget()).getElementById("a6");break;
  case 7:var wd = getSVGDocument(event.getTarget()).getElementById("a7");break;
  case 8:var wd = getSVGDocument(event.getTarget()).getElementById("a8");break;
  case 9:var wd = getSVGDocument(event.getTarget()).getElementById("a9");break;
  case 10:var wd = getSVGDocument(event.getTarget()).getElementById("a10");break;
  default:break;
}

  total=total+elap;
  wd.setAttribute("width", 2*elap); 
  wd.getStyle().setProperty("visibility", "visible", ""); 
 
  var el=doc.getElementById("circle");
  el.getStyle().setProperty("fill", "green", ""); 
  el = doc.getElementById("start");
  el.getStyle().setProperty("visibility", "hidden", ""); 
  if (test == 5) 
   {complete()
   }
   test=test+1;
}

}

function complete()
{
//alert("Test Complete");
var av=total/1000;
//alert(av);





switch (trial) 
{
case 1:
var el=doc.getElementById("average");
el.getStyle().setProperty("visibility", "visible", ""); 
//el.firstChild.NodeValue = av;
avftext=' '+av+' ';
avtext=avftext.substr(0,6);
el.getFirstChild().setData(avtext);
el = doc.getElementById("T1");
el.getStyle().setProperty("visibility", "visible",""); 
el.getFirstChild().setData(avtext);
break;

case 2:
var el=doc.getElementById("average");
el.getStyle().setProperty("visibility", "visible",""); 
avftext=' '+av+' ';
avtext=avftext.substr(0,6);
el.getFirstChild().setData(avtext);
el = doc.getElementById("T2");
el.getStyle().setProperty("visibility", "visible",""); 
el.getFirstChild().setData(avtext);
break;


case 3:
var el=doc.getElementById("average");
el.getStyle().setProperty("visibility", "visible",""); 
avftext=' '+av+' ';
avtext=avftext.substr(0,6);
el.getFirstChild().setData(avtext);
el = doc.getElementById("T3");
el.getStyle().setProperty("visibility", "visible",""); 
el.getFirstChild().setData(avtext);
break;


case 4:
var el=doc.getElementById("average");
el.getStyle().setProperty("visibility", "visible",""); 
avftext=' '+av+' ';
avtext=avftext.substr(0,6);
el.getFirstChild().setData(avtext);
el = doc.getElementById("T4");
el.getStyle().setProperty("visibility", "visible",""); 
el.getFirstChild().setData(avtext);
break;

default:break;
}


switch (trial) 
{
case 1:
trial=2;
dx=400;
dy=250;
d=Math.ceil(Math.sqrt(dx*dx+dy*dy));
rad=15;
posx=dx+startx;
posy=dy+starty;
el = doc.getElementById("destination");
el.setAttribute("cx",posx);
el.setAttribute("cy",posy);
el.setAttribute("r",rad);
el = doc.getElementById("destext");
el.setAttribute("x",posx+rad+10);
el.setAttribute("y",posy-rad-10);
el = doc.getElementById("L2");
el.getStyle().setProperty("visibility", "visible",""); 
el.firstChild.NodeValue = d;
el = doc.getElementById("R2");
el.getStyle().setProperty("visibility", "visible",""); 
el.firstChild.NodeValue = rad;
//alert("reset");
reset();
break;

case 2:
trial=3;
dx=200;
dy=0;
d=Math.ceil(Math.sqrt(dx*dx+dy*dy));
rad=25;
posx=dx+startx;
posy=dy+starty;
el = doc.getElementById("destination");
el.setAttribute("cx",posx);
el.setAttribute("cy",posy);
el.setAttribute("r",rad);
el = doc.getElementById("destext");
el.setAttribute("x",posx+rad+10);
el.setAttribute("y",posy-rad-10);
el = doc.getElementById("L3");
el.getStyle().setProperty("visibility", "visible",""); 
el.firstChild.NodeValue = d;
el = doc.getElementById("R3");
el.getStyle().setProperty("visibility", "visible",""); 
el.firstChild.NodeValue = rad;
reset();
break;

case 3:
trial=4;
dx=400;
dy=0;
d=Math.ceil(Math.sqrt(dx*dx+dy*dy));
rad=15;
posx=dx+startx;
posy=dy+starty;
el = doc.getElementById("destination");
el.setAttribute("cx",posx);
el.setAttribute("cy",posy);
el.setAttribute("r",rad);
el = doc.getElementById("destext");
el.setAttribute("x",posx+rad+10);
el.setAttribute("y",posy-rad-10);
el = doc.getElementById("L4");
el.getStyle().setProperty("visibility", "visible",""); 
el.firstChild.NodeValue = d;
el = doc.getElementById("R4");
el.getStyle().setProperty("visibility", "visible",""); 
el.firstChild.NodeValue = rad;
reset();
break;

case 4:alert("All Tests Complete");

default:break;
}
}

function DoOnMouseUp(event)
{

if( event.getTarget().getAttribute("id") == "destination" )
{
  var el = getSVGDocument(event.getTarget()).getElementById("helloText");
  el.getStyle().setProperty("visibility", "hidden",""); 
}

}


function DoOnMouseMove(event)
{

}


function getSVGDocument(node)
{
// given any node of the tree, will obtain the SVGDocument node.
// must be careful: a Document node's ownerDocument is null!
if( node.getNodeType() != 9 )  // if not DOCUMENT_NODE
return node.getOwnerDocument();
else
return node;
}



function reset()
{

var wd=doc.getElementById("a1");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a2");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a3");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a4");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a5");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a6");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a7");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a8");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a9");
wd.getStyle().setProperty("visibility", "hidden","");
wd=doc.getElementById("a10");
wd.getStyle().setProperty("visibility", "hidden","");


var el = doc.getElementById("circle");
el.getStyle().setProperty("fill", "green",""); 
 test = 0;
 total = 0;
}

]]></script>

</defs>

 <g onmouseover="DoOnMouseOver( evt )" onmouseout="DoOnMouseOut( evt )"   onmousedown="DoOnMouseDown( evt )" onmouseup="DoOnMouseUp( evt )" onmousemove="DoOnMouseMove( evt )">





<text class="minor" x="30" y="100"  style="fill:green">Starting Point</text>

<circle class="emph3" cx="125" cy="125" r="10" id="circle" style="visibility: visible"/>

<text class="minor" x="630" y="350"  id="destext" style="fill: blue">Destination</text>

<circle class="emph3" cx="625" cy="325" r="5" id="destination" style="visibility: visible"/>
       
</g>


<text class="minor" x="300" y="100" id="helloText" style="visibility:hidden;">Time!</text>

<g transform="translate(325,400)">
<text class="min" >
<tspan x="0" dy="24">Move the cursor over starting circle</tspan>
<tspan x="0" dy="30">On Go, </tspan>
<tspan x="0" dy="24">move to within destination and click</tspan>
<tspan x="0" dy="30">Repeat 5 times</tspan>
</text>
</g>



<text class="major" x="145" y="125" id="start" style="visibility: hidden;  font-size: 36">Go</text>

<text class="major" x="125" y="125" id="start2" style="visibility: hidden">Start</text>

<g transform="translate(600,30)">
<rect  width="400" height="30" class="box"/>
<text class="minor" x="10" y="25" id="averagebefore" style="visibility: visible">Average time is </text>
<text class="minor" x="200" y="25" id="average" style="visibility: hidden;fill:red">123456</text>
<text class="minor" x="300" y="25" id="averageafter" style="visibility: visible">seconds</text>
</g>


<g transform="translate(50,350)">
<g transform="scale(0.25)">
<rect x="-40" y="-160" width="1060" height="960" class="emph3" />
<line x1="0" y1="0" x2="0" y2="800" />
<line x1="0" y1="0" x2="1000" y2="0"  />
<line x1="200" y1="0" x2="200" y2="-30"  />
<line x1="400" y1="0" x2="400" y2="-30"  />
<line x1="600" y1="0" x2="600" y2="-30"  />
<line x1="800" y1="0" x2="800" y2="-30"  />
<rect id="a1" x="0" y="20" width="400" height="30" style="visibility: hidden;" />
<rect id="a2" x="0" y="70" width="400" height="30"  style="visibility: hidden;" />
<rect id="a3" x="0" y="120" width="400" height="30"  style="visibility: hidden;" />
<rect id="a4" x="0" y="170" width="400" height="30"  style="visibility: hidden;" />
<rect id="a5" x="0" y="220" width="400" height="30"  style="visibility: hidden;" />
<rect id="a6" x="0" y="270" width="400" height="30"  style="visibility: hidden;" />
<rect id="a7" x="0" y="320" width="400" height="30"  style="visibility: hidden;" />
<rect id="a8" x="0" y="370" width="400" height="30"  style="visibility: hidden;" />
<rect id="a9" x="0" y="420" width="400" height="30"  style="visibility: hidden;" />
<rect id="a10" x="0" y="470" width="400" height="30"  style="visibility: hidden;" />
</g>
<text x="50" y="-15" style="fill: yellow; font-size: 20;font-weight:bold">Seconds</text>
</g>





<g transform="translate(700,330)">
<rect  x="0" y="0" width="280" height="280" class="emph3" />
<text class="minor" x="0" y="20" style="fill:yellow">Length</text>
<text class="minor" x="90" y="20" style="fill:yellow">Radius</text>
<text class="minor" x="180" y="20" style="fill:yellow">Time</text>



<text class="minor" x="10" y="50" id="L1" style="visibility: hidden;fill: white;">105</text>
<text class="minor" x="100" y="50" id="R1" style="visibility: hidden; fill: white;">1</text>
<text class="minor" x="190" y="50" id="T1" style="visibility: hidden; fill: white;">1.7</text>

<text class="minor" x="10" y="80" id="L2" style="visibility: hidden;fill: white;">90</text>
<text class="minor" x="100" y="80" id="R2" style="visibility: hidden; fill: white;">3</text>
<text class="minor" x="190" y="80" id="T2" style="visibility: hidden; fill: white;">1.7</text>


<text class="minor" x="10" y="110" id="L3" style="visibility: hidden;fill: white;">40</text>
<text class="minor" x="100" y="110" id="R3" style="visibility: hidden; fill: white;">5</text>
<text class="minor" x="190" y="110" id="T3" style="visibility: hidden; fill: white;">1.7</text>


<text class="minor" x="10" y="140" id="L4" style="visibility: hidden;fill: white;">80</text>
<text class="minor" x="100" y="140" id="R4" style="visibility: hidden; fill: white;">3</text>
<text class="minor" x="190" y="140" id="T4" style="visibility: hidden; fill: white;">1.7</text>

</g>
</g>
</g>
</svg>

 
 




