Creating a Dynamic Interactive Quiz with Timer and Hints

Hello! My experience in JavaScript & Jquery is mostly editing code and adding a few lines to make it do what I want. But now, I want to create a quiz like this one, which was created in flash, with javascript (or any other tool that you can recommend) so that it’s viewable across all devices –> http://www.usfunds.com/interactive/how-well-do-you-know-your-flags

It will display hints after a certain time has passed and perhaps even have an image that starts off blurred and slowly clears up to help the quiz taker guess the answer. To complicate things a bit more (or make them more dynamic), instead of a multiple choice, there will be a text box for each letter of the answer (like Wheel of Fortune).

I can easily do this in flash, but I would like to know if there’s an alternative to flash, so I can create something very similar but that it can be seen across all devices. I’ve heard of Adobe Animate, but I don’t have it and don’t think we’ll be getting it anytime soon. :frowning:

I made this simple quiz that I was hoping I can edit to make it do all these things, but I almost think it would be easier to start from scratch –> http://www.usfunds.com/SurprisingCitiesQuiz/

HELP!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#quiz {
  position:absolute;overflow:hidden;left:100px;top:100px;width:500px;height:350px;border:solid blue 1px;
}

.header {
  position:absolute;left:0px;top:0px;width:100%;height:50px;background-Color:#CCFFFF;text-Align:right;
}

.header INPUT {
  width:30px;margin:10px;
}

.next {
  position:absolute;visibility:hidden;z-Index:10;left:380px;top:50px;width:100px;height:50px;background-Color:#FFCC66;
}

.score {
  position:absolute;visibility:hidden;z-Index:10;left:380px;top:250px;width:100px;height:50px;background-Color:#FFCC66;
}

.country {
  position:absolute;left:-460px;top:50px;width:450px;height:300px;border:solid red 1px;background-Color:#FFFFCC;
}

.start {
  position:absolute;left:20px;top:50px;width:450px;height:300px;border:solid red 1px;background-Color:#FFFFCC;
}

.flag {
  position:absolute;left:10px;top:10px;width:200px;height:150px;
}

.clues {
  position:absolute;overflow:hidden;left:250px;top:10px;width:200px;height:150px;border:solid red 1px;
}

.title {
  position:absolute;visibility:hidden;left:0px;top:180px;width:100%;text-Align:center;border:solid red 1px;
}

.buttons {
  position:absolute;left:0px;top:180px;width:100%;text-Align:center;border:solid red 1px;
}

.buttons INPUT {
  font-Size:15px;margin:10px;width:150px;
}

/*]]>*/
</style></head>

<body>

 <div id="quiz" >
  <div class="header" >Score <input name="" /> Time <input name="" />&nbsp;&nbsp;&nbsp;</div>
  <div class="next" >NEXT</div>
  <div class="score" >Score</div>

  <div class="start" >
  Click to Start;
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/gb.png" />
   <div class="clues" >
    Capital<br />.
    London<br />
    <br />
    Population<br />
    63,705,000<br />
    <br />
    Total area<br />
    242,900 km2<br />
   </div>
   <div class="title" >The United Kingdom</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input type="button" value="Canada" />
    <input name="" type="hidden" value="0"/>
   </div>
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/ca.png" />
   <div class="clues" >
    Capital<br />
    Ottawa<br />
    <br />
    <br />
    Population<br />
    35,295,770<br />
    <br />
    <br />
    Total area<br />
    9,970,610 km2

   </div>
   <div class="title" >Canada</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input type="button" value="Canada" />
    <input name="" type="hidden" value="1"/>
   </div>
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/jp.png" />
   <div class="clues" >
    Capita<br />
    Tokyo<br />
    <br />
    Population<br />
    127,180,000<br />
    <br />
    <br />
    Total area<br />
    377,873 km2
   </div>
   <div class="title" >Japan</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input name="" type="hidden" value="2"/>
   </div>
  </div>

 </div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcQuiz={

 init:function(o){
  var p=document.getElementById(o.ID);
  if (p){
   var s=this.bycls('start','DIV',p)[0],c=this.bycls('country','DIV',p),h=this.bycls('header','DIV',p)[0],n=this.bycls('next','DIV',p)[0],sc=this.bycls('score','DIV',p)[0],cl,b,i,t,z0=0,z0a;
   if (s&&n&&sc&&h&&h.getElementsByTagName('INPUT')[1]&&c[0]){
    s.style.left=(p.offsetWidth-s.offsetWidth)/2+'px';
    o.nxt=n;
    o.sc=sc;
    o.c=[[[s,'left']]];
    for (;z0<c.length;z0++){
     cl=this.bycls('clues','DIV',c[z0])[0];
     b=this.bycls('buttons','DIV',c[z0])[0];
     t=this.bycls('title','DIV',c[z0])[0];
     if (b&&cl&&t){
      i=b.getElementsByTagName('INPUT');
      for (var z0a=0;z0a<i.length-1;z0a++){
       this.addevt(i[z0a],'click','score',o,z0a);
      }
      t.style.visibility='hidden';
      o.c.push([[c[z0],'left'],[cl,'height',cl.offsetHeight],[b,'top',b.offsetTop],i[z0a].value,t]);
     }
    }
    o.p=p;
    o.n=0;
    o.ips=h.getElementsByTagName('INPUT');
    o.ips[0].value=0;
    o.sc.style.visibility=o.nxt.style.visibility='hidden';
    this.addevt(s,'click','next',o);
    this.addevt(n,'click','next',o);
   }
  }

 },

 score:function(o,n){
  var c=o.c[o.n];
  var s=(n==c[3]?o.ips[1].value*1:0);
  clearTimeout(o.to);
  clearTimeout(o.c[o.n][1][4]);
  o.sc.style.visibility=o.nxt.style.visibility='visible';
  o.sc.innerHTML='Score: '+s;
  o.ips[0].value=o.ips[0].value*1+s;
  o.c[o.n][1][0].style.height=o.c[o.n][1][2]+'px';
  o.c[o.n][4].style.visibility='visible';
  this.animate(o,c[2],c[2][0].offsetTop,o.p.offsetHeight,new Date(),1000);
 },

 next:function(o){
  o.n==0?o.ips[0].value='0':null;
  var c=o.c[o.n][0];
  clearTimeout(o.to);
  o.ips[1].value='10';
  this.animate(o,c,c[0].offsetLeft,o.p.offsetWidth,new Date(),1000);
  o.n=++o.n%o.c.length;
  c=o.c[o.n];
  o.sc.style.visibility=o.nxt.style.visibility='hidden';
  if (c[1]){
   c[1][0].style.height='0px';
   c[2][0].style.top=c[2][2]+'px';
   c[4].style.visibility='hidden';
  }
  this.animate(o,c[0],-c[0][0].offsetWidth,(o.p.offsetWidth-c[0][0].offsetWidth)/2,new Date(),1000,true);
 },

 animate:function(o,a,f,t,srt,mS,nxt){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[3]=Math.max(f<0||t<0?n:0,n);
   a[0].style[a[1]]=a[3]+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
  }
  else {
   a[3]=t;
   a[0].style[a[1]]=t+'px';
   if (nxt===true&&o.c[o.n][1]){
    n=o.c[o.n][1];
    this.animate(o,n,0,152,new Date(),10100,false);
    o.to=setInterval(function(){  o.ips[1].value=Math.max(o.ips[1].value*1-1,0); },1000);
   }
   if (nxt===false){
    oop.score(o,-1);
   }
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 },

 bycls:function (n,t,o){
  for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
   if((' '+c[z0].className+' ').match(' '+n+' ')){
    a.push(c[z0]);
   }
  }
  return a;
 }


}

zxcQuiz.init({
 ID:'quiz'
});
/*]]>*/
</script>
</body>

</html>

Thank you Vic! You are awesome! :slight_smile: Ok, since this seems easy to you (and I am so appreciative), how would you blur the flag and have it “unblur” as the timer is counting down?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#quiz {
  position:absolute;overflow:hidden;left:100px;top:100px;width:500px;height:350px;border:solid blue 1px;
}

.header {
  position:absolute;left:0px;top:0px;width:100%;height:50px;background-Color:#CCFFFF;text-Align:right;
}

.header INPUT {
  width:30px;margin:10px;
}

.next {
  position:absolute;visibility:hidden;z-Index:10;left:380px;top:50px;width:100px;height:50px;background-Color:#FFCC66;
}

.score {
  position:absolute;visibility:hidden;z-Index:10;left:380px;top:250px;width:100px;height:50px;background-Color:#FFCC66;
}

.country {
  position:absolute;left:-460px;top:50px;width:450px;height:300px;border:solid red 1px;background-Color:#FFFFCC;
}

.start {
  position:absolute;left:20px;top:50px;width:450px;height:300px;border:solid red 1px;background-Color:#FFFFCC;
}

.flag {
  position:absolute;left:10px;top:10px;width:200px;height:150px;
}

.clues {
  position:absolute;overflow:hidden;left:250px;top:10px;width:200px;height:150px;border:solid red 1px;
}

.title {
  position:absolute;visibility:hidden;left:0px;top:180px;width:100%;text-Align:center;border:solid red 1px;
}

.buttons {
  position:absolute;left:0px;top:180px;width:100%;text-Align:center;border:solid red 1px;
}

.buttons INPUT {
  font-Size:15px;margin:10px;width:150px;
}

/*]]>*/
</style></head>

<body>

 <div id="quiz" >
  <div class="header" >Score <input name="" /> Time <input name="" />&nbsp;&nbsp;&nbsp;</div>
  <div class="next" >NEXT</div>
  <div class="score" >Score</div>

  <div class="start" >
  Click to Start;
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/gb.png" />
   <div class="clues" >
    Capital<br />.
    London<br />
    <br />
    Population<br />
    63,705,000<br />
    <br />
    Total area<br />
    242,900 km2<br />
   </div>
   <div class="title" >The United Kingdom</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input type="button" value="Canada" />
    <input name="" type="hidden" value="0"/>
   </div>
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/ca.png" />
   <div class="clues" >
    Capital<br />
    Ottawa<br />
    <br />
    <br />
    Population<br />
    35,295,770<br />
    <br />
    <br />
    Total area<br />
    9,970,610 km2

   </div>
   <div class="title" >Canada</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input type="button" value="Canada" />
    <input name="" type="hidden" value="1"/>
   </div>
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/jp.png" />
   <div class="clues" >
    Capita<br />
    Tokyo<br />
    <br />
    Population<br />
    127,180,000<br />
    <br />
    <br />
    Total area<br />
    377,873 km2
   </div>
   <div class="title" >Japan</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input name="" type="hidden" value="2"/>
   </div>
  </div>

 </div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcQuiz={

 init:function(o){
  var p=document.getElementById(o.ID);
  if (p){
   var s=this.bycls('start','DIV',p)[0],c=this.bycls('country','DIV',p),h=this.bycls('header','DIV',p)[0],n=this.bycls('next','DIV',p)[0],sc=this.bycls('score','DIV',p)[0],cl,b,i,t,f,z0=0,z0a;
   if (s&&n&&sc&&h&&h.getElementsByTagName('INPUT')[1]&&c[0]){
    s.style.left=(p.offsetWidth-s.offsetWidth)/2+'px';
    o.nxt=n;
    o.sc=sc;
    o.c=[[[s,'left']]];
    for (;z0<c.length;z0++){
     cl=this.bycls('clues','DIV',c[z0])[0];
     b=this.bycls('buttons','DIV',c[z0])[0];
     t=this.bycls('title','DIV',c[z0])[0];
     f=this.bycls('flag','IMG',c[z0])[0];
     if (b&&cl&&t&&f){
      i=b.getElementsByTagName('INPUT');
      for (var z0a=0;z0a<i.length-1;z0a++){
       this.addevt(i[z0a],'click','score',o,z0a);
      }
      t.style.visibility='hidden';
      o.c.push([[c[z0],'left'],[cl,'height',cl.offsetHeight],[b,'top',b.offsetTop],[f],i[z0a].value,t]);
     }
    }
    o.p=p;
    o.n=0;
    o.ips=h.getElementsByTagName('INPUT');
    o.ips[0].value=0;
    o.sc.style.visibility=o.nxt.style.visibility='hidden';
    this.addevt(s,'click','next',o);
    this.addevt(n,'click','next',o);
   }
  }

 },

 score:function(o,n){
  var c=o.c[o.n];
  var s=(n==c[4]?o.ips[1].value*1:0);
  clearTimeout(o.to);
  clearTimeout(o.c[o.n][1][4]);
  clearTimeout(o.c[o.n][3][4]);
  o.sc.style.visibility=o.nxt.style.visibility='visible';
  o.sc.innerHTML='Score: '+s;
  o.ips[0].value=o.ips[0].value*1+s;
  o.c[o.n][1][0].style.height=o.c[o.n][1][2]+'px';
  o.c[o.n][5].style.visibility='visible';
  this.opc(o.c[o.n][3][0],100);
  this.animate(o,c[2],c[2][0].offsetTop,o.p.offsetHeight,new Date(),1000);
 },

 next:function(o){
  o.n==0?o.ips[0].value='0':null;
  var c=o.c[o.n][0];
  clearTimeout(o.to);
  o.ips[1].value='10';
  this.animate(o,c,c[0].offsetLeft,o.p.offsetWidth,new Date(),1000);
  o.n=++o.n%o.c.length;
  c=o.c[o.n];
  o.sc.style.visibility=o.nxt.style.visibility='hidden';
  if (c[1]){
   c[1][0].style.height='0px';
   c[2][0].style.top=c[2][2]+'px';
   c[5].style.visibility='hidden';
   this.opc(c[3][0],0);
  }
  this.animate(o,c[0],-c[0][0].offsetWidth,(o.p.offsetWidth-c[0][0].offsetWidth)/2,new Date(),1000,true);
 },

 animate:function(o,a,f,t,srt,mS,nxt){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[3]=Math.max(f<0||t<0?n:0,n);
   a[1]?a[0].style[a[1]]=a[3]+'px':oop.opc(a[0],a[3]);
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
  }
  else {
   a[3]=t;
   a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
   if (nxt===true&&o.c[o.n][1]){
    n=o.c[o.n];
    this.animate(o,n[1],0,152,new Date(),10100,false);
    this.animate(o,n[3],0,100,new Date(),10000);
    o.to=setInterval(function(){  o.ips[1].value=Math.max(o.ips[1].value*1-1,0); },1000);
   }
   if (nxt===false){
    oop.score(o,-1);
   }
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 },

 bycls:function (n,t,o){
  for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
   if((' '+c[z0].className+' ').match(' '+n+' ')){
    a.push(c[z0]);
   }
  }
  return a;
 }


}

zxcQuiz.init({
 ID:'quiz'
});
/*]]>*/
</script>
</body>

</html>

You are amazing Vic, this is perfect for me to edit and play with. Thank you so much. Where can I send you homemade brownies?

Vic, what if rather than go back to the start screen at the end, I wanted to add a final slide with the final score and a custom message depending on the score. A score of 30 (perfect) would show a message of “Perfect, you’re an expert!”, a score of 20-29 would display something like “You did good!”, and so forth.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#quiz {
  position:absolute;overflow:hidden;left:100px;top:100px;width:500px;height:350px;border:solid blue 1px;
}

.header {
  position:absolute;left:0px;top:0px;width:100%;height:50px;background-Color:#CCFFFF;text-Align:right;
}

.header INPUT {
  width:30px;margin:10px;
}

.next {
  position:absolute;visibility:hidden;z-Index:10;left:380px;top:50px;width:100px;height:50px;background-Color:#FFCC66;
}

.score {
  position:absolute;visibility:hidden;z-Index:10;left:380px;top:250px;width:100px;height:50px;background-Color:#FFCC66;
}

.country {
  position:absolute;left:-460px;top:50px;width:450px;height:300px;border:solid red 1px;background-Color:#FFFFCC;
}

.start {
  position:absolute;left:20px;top:50px;width:450px;height:300px;border:solid red 1px;background-Color:#FFFFCC;
}

.flag {
  position:absolute;left:10px;top:10px;width:200px;height:150px;
}

.clues {
  position:absolute;overflow:hidden;left:250px;top:10px;width:200px;height:150px;border:solid red 1px;
}

.title {
  position:absolute;visibility:hidden;left:0px;top:180px;width:100%;text-Align:center;border:solid red 1px;
}

.buttons {
  position:absolute;left:0px;top:180px;width:100%;text-Align:center;border:solid red 1px;
}

.buttons INPUT {
  font-Size:15px;margin:10px;width:150px;
}

/*]]>*/
</style></head>

<body>

 <div id="quiz" >
  <div class="header" >Score <input name="" /> Time <input name="" />&nbsp;&nbsp;&nbsp;</div>
  <div class="next" >NEXT</div>
  <div class="score" >Score</div>

  <div class="start" >
   <div >Click to Start</div>
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/gb.png" />
   <div class="clues" >
    Capital<br />.
    London<br />
    <br />
    Population<br />
    63,705,000<br />
    <br />
    Total area<br />
    242,900 km2<br />
   </div>
   <div class="title" >The United Kingdom</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input type="button" value="Canada" />
    <input name="" type="hidden" value="0"/>
   </div>
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/ca.png" />
   <div class="clues" >
    Capital<br />
    Ottawa<br />
    <br />
    <br />
    Population<br />
    35,295,770<br />
    <br />
    <br />
    Total area<br />
    9,970,610 km2

   </div>
   <div class="title" >Canada</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input type="button" value="Canada" />
    <input name="" type="hidden" value="1"/>
   </div>
  </div>

  <div class="country" >
   <img class="flag" src="http://flagpedia.net/data/flags/small/jp.png" />
   <div class="clues" >
    Capita<br />
    Tokyo<br />
    <br />
    Population<br />
    127,180,000<br />
    <br />
    <br />
    Total area<br />
    377,873 km2
   </div>
   <div class="title" >Japan</div>
   <div class="buttons" >
    <input type="button" value="The United Kingdom" />
    <input type="button" value="Canada" />
    <br />
    <input type="button" value="Japan" />
    <input name="" type="hidden" value="2"/>
   </div>
  </div>

 </div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

<script type="text/javascript">
/*<![CDATA[*/

var zxcQuiz={

 init:function(o){
  var p=document.getElementById(o.ID);
  if (p){
   var s=this.bycls('start','DIV',p)[0],c=this.bycls('country','DIV',p),h=this.bycls('header','DIV',p)[0],n=this.bycls('next','DIV',p)[0],sc=this.bycls('score','DIV',p)[0],cl,b,i,t,f,z0=0,z0a;
   if (s&&n&&sc&&h&&h.getElementsByTagName('INPUT')[1]&&c[0]){
    s.style.left=(p.offsetWidth-s.offsetWidth)/2+'px';
    o.nxt=n;
    o.sc=sc;
    o.c=[[[s,'left']]];
    for (;z0<c.length;z0++){
     cl=this.bycls('clues','DIV',c[z0])[0];
     b=this.bycls('buttons','DIV',c[z0])[0];
     t=this.bycls('title','DIV',c[z0])[0];
     f=this.bycls('flag','IMG',c[z0])[0];
     if (b&&cl&&t&&f){
      i=b.getElementsByTagName('INPUT');
      for (var z0a=0;z0a<i.length-1;z0a++){
       this.addevt(i[z0a],'click','score',o,z0a);
      }
      t.style.visibility='hidden';
      o.c.push([[c[z0],'left'],[cl,'height',cl.offsetHeight],[b,'top',b.offsetTop],[f],i[z0a].value,t]);
     }
    }
    o.p=p;
    o.n=0;
    o.ips=h.getElementsByTagName('INPUT');
    o.ips[0].value=0;
    o.sc.style.visibility=o.nxt.style.visibility='hidden';
    this.addevt(s,'click','next',o);
    this.addevt(n,'click','next',o);
   }
  }

 },

 score:function(o,n){
  var c=o.c[o.n];
  var s=(n==c[4]?o.ips[1].value*1:0);
  clearTimeout(o.to);
  clearTimeout(o.c[o.n][1][4]);
  clearTimeout(o.c[o.n][3][4]);
  o.sc.style.visibility=o.nxt.style.visibility='visible';
  o.sc.innerHTML='Score: '+s;
  o.ips[0].value=o.ips[0].value*1+s;
  o.c[o.n][1][0].style.height=o.c[o.n][1][2]+'px';
  o.c[o.n][5].style.visibility='visible';
  this.opc(o.c[o.n][3][0],100);
  this.animate(o,c[2],c[2][0].offsetTop,o.p.offsetHeight,new Date(),1000);
 },

 next:function(o){
  o.n==0?o.ips[0].value='0':null;
  var c=o.c[o.n][0];
  clearTimeout(o.to);
  o.ips[1].value='10';
  this.animate(o,c,c[0].offsetLeft,o.p.offsetWidth,new Date(),1000);
  if (o.n==o.c.length-1){
   c=o.c[0][0][0].getElementsByTagName('DIV')[0];
   var m='Try Again';
   for (var z0=0;z0<o.Score.length;z0++){
    if (o.ips[0].value>=o.Score[z0][0]){
     m=o.Score[z0][1];
    }
   }
   c.innerHTML='You Scored '+o.ips[0].value+' '+m;
  }
  o.n=++o.n%o.c.length;
  c=o.c[o.n];
  o.sc.style.visibility=o.nxt.style.visibility='hidden';
  if (c[1]){
   c[1][0].style.height='0px';
   c[2][0].style.top=c[2][2]+'px';
   c[5].style.visibility='hidden';
   this.opc(c[3][0],0);
  }
  this.animate(o,c[0],-c[0][0].offsetWidth,(o.p.offsetWidth-c[0][0].offsetWidth)/2,new Date(),1000,true);
 },

 animate:function(o,a,f,t,srt,mS,nxt){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[3]=Math.max(f<0||t<0?n:0,n);
   a[1]?a[0].style[a[1]]=a[3]+'px':oop.opc(a[0],a[3]);
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
  }
  else {
   a[3]=t;
   a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
   if (nxt===true&&o.c[o.n][1]){
    n=o.c[o.n];
    this.animate(o,n[1],0,152,new Date(),10100,false);
    this.animate(o,n[3],0,100,new Date(),10000);
    o.to=setInterval(function(){  o.ips[1].value=Math.max(o.ips[1].value*1-1,0); },1000);
   }
   if (nxt===false){
    oop.score(o,-1);
   }
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 },

 bycls:function (n,t,o){
  for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
   if((' '+c[z0].className+' ').match(' '+n+' ')){
    a.push(c[z0]);
   }
  }
  return a;
 }


}

zxcQuiz.init({
 ID:'quiz',
 Score:[
  [0,'Try Again'],
  [10,'not Bad'],
  [25,'Well Done']
 ]
});
/*]]>*/
</script>
</body>

</html>

thank you so much Vic! :slight_smile: