Countdown and redirect.

Warren1978 · 03-20-2008, 09:46 PM

Hello everyone.
I've downloaded a quiz-JavaScript from http://www.javascriptkit.com/script/cut180.shtml - but I really want to make a little improvement, unfortually I'dont have any programmings skills at all, so it could be very nice to get some help from a smart person.

Here we go.
My wish is to add a countdown into the quiz, Ive found following countdown-script on an other site.

Code.
<script type="text/javascript" language="javascript">
var iMinutes=0;
var iSeconds=30;
var sRedirect="results.htm";
function CountDown(){
if(iSeconds==0){
iMinutes--;
iSeconds=59;
}else{
iSeconds--;
if(iMinutes==0&&iSeconds==0)window.location.href=sRedirect
}
document.getElementById("countdown").firstChild.nodeValue=iMinutes+":"+iSeconds
}
window.onload=function(){window.setInterval("CountDown()",1000)}
</script>
</head>
<body>

<div id="countdown"> </div>

There are two main problems I looking forward to get solved.

1)
When the time is up, is just redirect the user to http://www.yalla.dk/2706/results.htm without to calculate the score, and that is not funny.

2)
The countdown is on the top of my site http://www.yalla.dk/2706/popquiz.htm I'dont like this because I want to have my guests can watch the time they have left constantly without to scroll up and down to watch the countdown. I wish to place the counter in the browser windows left side, hope you understand what I mean.

coothead · 03-21-2008, 01:10 PM

Hi there Warren1978,

and a warm welcome to these forums.

You really should have posted your problem in this forum...

JavaScript programming

Anyway while it is here, see if this suits your requirements...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--this is for coothead testing and can be removed-->
<base href="http://www.yalla.dk/2706/">
<title>IQtest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
    margin:10px 0;
    padding:0;
    background-color:#eee;
 }
#container {
    width:600px;
    padding:10px;
    border:1px solid #999;
    margin-left:80px;
    background-color:#fff;
 }
#countdown {
    position:fixed; 
    left:10px;
    top:20px;
    width:50px;
    height:16px;
    padding:4px 0;
    border:3px double #999;
    font:bold 14px arial,sans-serif;
    color:#900;
    text-align:center;
    background-color:#fff;
 }
#h1 {
    font:18px arial,sans-serif;
 }
.qheader{
    font:bold 14px arial,sans-serif;
}
.qselections{
    font:normal 13px arial,sans-serif;
    padding-bottom:20px;
    border-bottom:2px solid #999;
    margin-bottom:20px;
 }
#butts {
    text-align:center;
 }
</style>

<!--[if lte IE 6]>
<style type="text/css">
html,body {
    height:100%;
    margin:0;
    overflow:auto;
 }
#countdown {
    position:absolute;
 }
</style>
<![endif]-->

<script type="text/javascript"  src="quizconfig.js"></script>

<script type="text/javascript">

/***********************************************
* JavaScriptKit.com Multiple Choice Quiz Script (http://www.javascriptkit.com)
* Copyright 2003 JavaScript Kit- http://www.javascriptkit.com
* This notice and footnote must stay intact for use
* Visit JavaScript Kit (http://www.javascriptkit.com/) for full source code
***********************************************/

  var actualchoices=new Array()
  document.cookie="ready=yes"
</script>
<script type="text/javascript">
   var iMinutes=0;
   var iSeconds=30;
function CountDown(){
if(iSeconds==0){
   iMinutes--;
   iSeconds=59;
 }
else {
   iSeconds--;
if(iMinutes==0&&iSeconds==0){
   gradeit();
   clearInterval(timer);
  }
 }
   document.getElementById('countdown').firstChild.nodeValue=iMinutes+':'+iSeconds;
}
window.onload=function(){
   timer=window.setInterval('CountDown()',1000);
 }
</script>

</head>
<body>

<div id="countdown">&nbsp;</div>

<div id="container">

<form action="#" method="post" name="myquiz">

<h1>Held og lykke.</h1>

<h2 class="qheader">Opgave 1</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item1.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question1">A) 
<input type="radio" value="b" name="question1">B)
<input type="radio" value="c" name="question1">C)
<input type="radio" value="d" name="question1">D) 
<input type="radio" value="e" name="question1">E)
</div>

<h2 class="qheader">Opgave 2</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item2.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question2">A) 
<input type="radio" value="b" name="question2">B) 
<input type="radio" value="c" name="question2">C) 
<input type="radio" value="d" name="question2">D) 
<input type="radio" value="e" name="question2">E) 
</div>

<h2 class="qheader">Opgave 3</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item3.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question3">A) 
<input type="radio" value="b" name="question3">B) 
<input type="radio" value="c" name="question3">C) 
<input type="radio" value="d" name="question3">D) 
<input type="radio" value="e" name="question3">E)
</div>

<h2 class="qheader">Opgave 4</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item4.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question4">A) 
<input type="radio" value="b" name="question4">B) 
<input type="radio" value="c" name="question4">C) 
<input type="radio" value="d" name="question4">D) 
<input type="radio" value="e" name="question4">E)
</div>

<h2 class="qheader">Opgave 5</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item5.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question5">A) 
<input type="radio" value="b" name="question5">B) 
<input type="radio" value="c" name="question5">C) 
<input type="radio" value="d" name="question5">D) 
<input type="radio" value="e" name="question5">E)
</div>

<h2 class="qheader">Opgave 6</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item6.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question6">A) 
<input type="radio" value="b" name="question6">B) 
<input type="radio" value="c" name="question6">C) 
<input type="radio" value="d" name="question6">D) 
<input type="radio" value="e" name="question6">E)
</div>

<h2 class="qheader">7) The longest river in the world is:</h2>

<div class="qselections">
<input type="radio" value="a" name="question7">a) Amazon (Brazil)<br>
<input type="radio" value="b" name="question7">b) Nile (Egypt)<br>
<input type="radio" value="c" name="question7">c) Yangtze (China)<br>
<input type="radio" value="d" name="question7">d) Congo (Zaire)<br>
</div>

<h2 class="qheader">8) 
Which software firm is the second largest in the world, after Microsoft?</h2>

<div class="qselections">
<input type="radio" value="a" name="question8">a) Netscape<br>

<input type="radio" value="b" name="question8">b) Oracle<br>
<input type="radio" value="c" name="question8">c) Lotus<br>
<input type="radio" value="d" name="question8">d) Norton<br>
</div>

<h2 class="qheader">9) What's the world's most widely spoken language?</h2>

<div class="qselections">
<input type="radio" value="a" name="question9">a) English<br>
<input type="radio" value="b" name="question9">b) Spanish<br>
<input type="radio" value="c" name="question9">c) Mandarin<br>
<input type="radio" value="d" name="question9">d) French<br>
</div>

<h2 class="qheader">10) Which continent is host to the most countries in the world?</h2>

<div class="qselections">
<input type="radio" value="a" name="question10">a) Asia<br>
<input type="radio" value="b" name="question10">b) Africa<br>
<input type="radio" value="c" name="question10">c) Europe<br>
</div>

<div id="butts">
<input type="button" value="Scor mig nu!" name="B1" onclick="gradeit()"> 
<input type="reset" value="Reset" name="B2" >
</div>
</form>

</div>

</body>
</html>

coothead

Warren1978 · 03-21-2008, 04:54 PM

Hi there Warren1978,

and a warm welcome to these forums.

Thanks!

You really should have posted your problem in this forum...

JavaScript programming

Didn't saw I could scoll down yesterday, I only saw those four subforums. My mistake, sorry.

Anyway while it is here, see if this suits your requirements...

Wauw, thats works 100% correct now, and what a brilliant layout. I like it so much

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--this is for coothead testing and can be removed-->
<base href="http://www.yalla.dk/2706/">
<title>IQtest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
    margin:10px 0;
    padding:0;
    background-color:#eee;
 }
#container {
    width:600px;
    padding:10px;
    border:1px solid #999;
    margin-left:80px;
    background-color:#fff;
 }
#countdown {
    position:fixed; 
    left:10px;
    top:20px;
    width:50px;
    height:16px;
    padding:4px 0;
    border:3px double #999;
    font:bold 14px arial,sans-serif;
    color:#900;
    text-align:center;
    background-color:#fff;
 }
#h1 {
    font:18px arial,sans-serif;
 }
.qheader{
    font:bold 14px arial,sans-serif;
}
.qselections{
    font:normal 13px arial,sans-serif;
    padding-bottom:20px;
    border-bottom:2px solid #999;
    margin-bottom:20px;
 }
#butts {
    text-align:center;
 }
</style>

<!--[if lte IE 6]>
<style type="text/css">
html,body {
    height:100%;
    margin:0;
    overflow:auto;
 }
#countdown {
    position:absolute;
 }
</style>
<![endif]-->

<script type="text/javascript"  src="quizconfig.js"></script>

<script type="text/javascript">

/***********************************************
* JavaScriptKit.com Multiple Choice Quiz Script (http://www.javascriptkit.com)
* Copyright 2003 JavaScript Kit- http://www.javascriptkit.com
* This notice and footnote must stay intact for use
* Visit JavaScript Kit (http://www.javascriptkit.com/) for full source code
***********************************************/

  var actualchoices=new Array()
  document.cookie="ready=yes"
</script>
<script type="text/javascript">
   var iMinutes=0;
   var iSeconds=30;
function CountDown(){
if(iSeconds==0){
   iMinutes--;
   iSeconds=59;
 }
else {
   iSeconds--;
if(iMinutes==0&&iSeconds==0){
   gradeit();
   clearInterval(timer);
  }
 }
   document.getElementById('countdown').firstChild.nodeValue=iMinutes+':'+iSeconds;
}
window.onload=function(){
   timer=window.setInterval('CountDown()',1000);
 }
</script>

</head>
<body>

<div id="countdown">&nbsp;</div>

<div id="container">

<form action="#" method="post" name="myquiz">

<h1>Held og lykke.</h1>

<h2 class="qheader">Opgave 1</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item1.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question1">A) 
<input type="radio" value="b" name="question1">B)
<input type="radio" value="c" name="question1">C)
<input type="radio" value="d" name="question1">D) 
<input type="radio" value="e" name="question1">E)
</div>

<h2 class="qheader">Opgave 2</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item2.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question2">A) 
<input type="radio" value="b" name="question2">B) 
<input type="radio" value="c" name="question2">C) 
<input type="radio" value="d" name="question2">D) 
<input type="radio" value="e" name="question2">E) 
</div>

<h2 class="qheader">Opgave 3</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item3.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question3">A) 
<input type="radio" value="b" name="question3">B) 
<input type="radio" value="c" name="question3">C) 
<input type="radio" value="d" name="question3">D) 
<input type="radio" value="e" name="question3">E)
</div>

<h2 class="qheader">Opgave 4</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item4.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question4">A) 
<input type="radio" value="b" name="question4">B) 
<input type="radio" value="c" name="question4">C) 
<input type="radio" value="d" name="question4">D) 
<input type="radio" value="e" name="question4">E)
</div>

<h2 class="qheader">Opgave 5</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item5.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question5">A) 
<input type="radio" value="b" name="question5">B) 
<input type="radio" value="c" name="question5">C) 
<input type="radio" value="d" name="question5">D) 
<input type="radio" value="e" name="question5">E)
</div>

<h2 class="qheader">Opgave 6</h2>

<div>
<img src="http://www.yalla.dk/iqtesten/billeder/item6.jpg" alt="">
</div>

<div class="qselections">
<input type="radio" value="a" name="question6">A) 
<input type="radio" value="b" name="question6">B) 
<input type="radio" value="c" name="question6">C) 
<input type="radio" value="d" name="question6">D) 
<input type="radio" value="e" name="question6">E)
</div>

<h2 class="qheader">7) The longest river in the world is:</h2>

<div class="qselections">
<input type="radio" value="a" name="question7">a) Amazon (Brazil)<br>
<input type="radio" value="b" name="question7">b) Nile (Egypt)<br>
<input type="radio" value="c" name="question7">c) Yangtze (China)<br>
<input type="radio" value="d" name="question7">d) Congo (Zaire)<br>
</div>

<h2 class="qheader">8) 
Which software firm is the second largest in the world, after Microsoft?</h2>

<div class="qselections">
<input type="radio" value="a" name="question8">a) Netscape<br>

<input type="radio" value="b" name="question8">b) Oracle<br>
<input type="radio" value="c" name="question8">c) Lotus<br>
<input type="radio" value="d" name="question8">d) Norton<br>
</div>

<h2 class="qheader">9) What's the world's most widely spoken language?</h2>

<div class="qselections">
<input type="radio" value="a" name="question9">a) English<br>
<input type="radio" value="b" name="question9">b) Spanish<br>
<input type="radio" value="c" name="question9">c) Mandarin<br>
<input type="radio" value="d" name="question9">d) French<br>
</div>

<h2 class="qheader">10) Which continent is host to the most countries in the world?</h2>

<div class="qselections">
<input type="radio" value="a" name="question10">a) Asia<br>
<input type="radio" value="b" name="question10">b) Africa<br>
<input type="radio" value="c" name="question10">c) Europe<br>
</div>

<div id="butts">
<input type="button" value="Scor mig nu!" name="B1" onclick="gradeit()"> 
<input type="reset" value="Reset" name="B2" >
</div>
</form>

</div>

</body>
</html>

coothead

coothead · 03-21-2008, 05:10 PM

No problem, you're very welcome.