Jump to content

Adding countdown

Matpatnik

By Matpatnik
in JavaScript

Recommended Posts

Matpatnik Member

Matpatnik

Posted
Posted

Hi guys, this is what I got so fare as code and it work good.I would like to do a countdown that after a preset time it show the answer of the calculation and call myCalculOperation() function again and again without refreshing the whole page (only the division).Thank you to guide me

<!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" lang="fr">  <head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	<link rel="shortcut icon" href="favicon.ico">	<link rel="stylesheet" href="Matpatnik.css" type="text/css">	<title>Matpatnik Addition</title>	<script type="text/javascript">/* --Merci a http://www.scriptygoddess.com-- */	function showMoreAnything(blocknum, isOpen) {		hid = ('hide' + (blocknum));		unhid = ('click' + (blocknum));		if(document.getElementById) {			if(document.getElementById(hid).style.display) {				if(isOpen != 0) {document.getElementById(hid).style.display = "block";					document.getElementById(unhid).style.display = "none";				}else{					document.getElementById(hid).style.display = "none";					document.getElementById(unhid).style.display = "block";				}			}else{				location.href = isOpen;return true;			}		}else{			location.href = isOpen;return true;		}	} 	function myCalculOperation(maxNumber, minNumber, operation) {		num2 = Math.round(Math.random() * maxNumber);		do {			num1 = Math.round(Math.random() * maxNumber);		}while (num1 < minNumber) 		switch (operation) {			case 1: 				return num1 +" + "+ num2 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 + num2);			break;			case 2: 				return num1 +" - "+ num2 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 - num2);			break;			case 3: 				return num1 +" x "+ num2 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 * num2);			break;			case 4: 				return (num1 * num2) +" ÷ "+ num1 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ num2;			break;			default: 				return num1 +" + "+ num2 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 + num2);			break;		}	}	</script>  </head>  <body>	<div align="center">	  <div><script type="text/javascript">document.write(myCalculOperation(100,25,1));</script></div>	  <div id="click101">		<a href="#jsenabled=no" class="uLigne" onclick="showMoreAnything(101,'#?jsenabled=no');return false;">Voir la réponse</a>	  </div>	</div>  </body></html>

Link to comment
Share on other sites
Matpatnik Member

Matpatnik

Posted
  • Author
Posted

Thank you :)I've been able to do this.Now my problem is that at the start up the user need to click on the link to activate the auto answer.Any hint on this will be great :)

<!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" lang="fr">  <head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	<link rel="shortcut icon" href="favicon.ico">	<link rel="stylesheet" href="Matpatnik.css" type="text/css">	<title>Matpatnik Addition</title>	<script type="text/javascript">	function showMoreAnything(blocknum, isOpen) {	/* --Merci a http://www.scriptygoddess.com-- */		hid = ('hide' + (blocknum));		unhid = ('click' + (blocknum));		if(document.getElementById) {			if(document.getElementById(hid).style.display) {				if(isOpen != 0) {					document.getElementById(hid).style.display = "block";					document.getElementById(unhid).style.display = "none";				}else{					document.getElementById(hid).style.display = "none";					document.getElementById(unhid).style.display = "block";				}			}else{				location.href = isOpen;return true;			}		}else{			location.href = isOpen;			return true;		}	} 		function myCalculOperation(maxNumber, minNumber, operation) {		num2 = Math.round(Math.random() * maxNumber);		do {			num1 = Math.round(Math.random() * maxNumber);}		while (num1 < minNumber) 				switch (operation) {			case 1: 				document.getElementById("the_calcul").innerHTML = num1 +" + "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 + num2);			break;			case 2: 				document.getElementById("the_calcul").innerHTML = num1 +" - "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 - num2);			break;			case 3: 				document.getElementById("the_calcul").innerHTML = num1 +" x "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 * num2);			break;			case 4: 				document.getElementById("the_calcul").innerHTML = (num1 * num2) +" ÷ "+ num1 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ num2;			break;		}	}		var t=5;	var int=self.setInterval("myConstructor()",1000);		function myConstructor() {		if (t == 0) {			document.getElementById("the_countdown").innerHTML = t--;			document.getElementById(hid).style.display = "block";			document.getElementById(unhid).style.display = "none";		} else if (t < 0) {			t = 5;			document.getElementById("the_countdown").innerHTML = "GO";			myCalculOperation(100,25,1);			document.getElementById(hid).style.display = "none";			document.getElementById(unhid).style.display = "block";		} else {			document.getElementById("the_countdown").innerHTML = t--;			document.getElementById(hid).style.display = "none";			document.getElementById(unhid).style.display = "block";		}	}	</script>  </head>  <body>	<div id="the_calcul" class="calcul"></div>	<div id="click101">	  <a href="#jsenabled=no" class="uLigne" onclick="showMoreAnything(101,'#?jsenabled=no');t=0;return false;">Voir la réponse</a>	</div>	<div id="the_countdown" class="calcul_countdown"></div>  </body></html>

I don't understand enough javascript yet but I think it have to do with the showMoreAnything() function.I will try to reverse the function to see what it will do.

Link to comment
Share on other sites
Matpatnik Member

Matpatnik

Posted
  • Author
Posted

ok it work with Firefox but not with IE of course. :) I guess when I've look on IE it was still on cache :) and I still didn't figured out the click problem with the auto answer.I did some minor change:

<script type="text/javascript">		function showMoreAnything(blocknum, isOpen) {		/* --Merci a http://www.scriptygoddess.com-- */			hid = ('hide' + (blocknum));			unhid = ('click' + (blocknum));			if(document.getElementById) {				if(document.getElementById(hid).style.display) {					if(isOpen != 0) {						document.getElementById(hid).style.display = "block";						document.getElementById(unhid).style.display = "none";					}else{						document.getElementById(hid).style.display = "none";						document.getElementById(unhid).style.display = "block";					}				}else{					location.href = isOpen;return true;				}			}else{				location.href = isOpen;return true;			}		} 				function myCalculOperation() {num2 = Math.round(Math.random() * 10);			do {				num1 = Math.round(Math.random() * 10);			}while (num1 < 0) 						switch (0) {				case 1: 					document.getElementById("the_calcul").innerHTML = num1 +" + "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 + num2);				break;				case 2: 					document.getElementById("the_calcul").innerHTML = num1 +" - "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 - num2);				break;				case 3: 					document.getElementById("the_calcul").innerHTML = num1 +" x "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 * num2);				break;				case 4: 					document.getElementById("the_calcul").innerHTML = (num1 * num2) +" ÷ "+ num1 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ num2;				break;			}		}				var t=10;		var int=self.setInterval("myConstructor(101)",1000);		function myConstructor(blocknum) {			hid = ('hide' + (blocknum));			unhid = ('click' + (blocknum));			if (t == 0) {				document.getElementById("the_countdown").innerHTML = t--;				document.getElementById(hid).style.display = "block";				document.getElementById(unhid).style.display = "none";			} else if (t < 0) {				t = 10;				document.getElementById("the_countdown").innerHTML = "GO!";				myCalculOperation();				document.getElementById(hid).style.display = "none";				document.getElementById(unhid).style.display = "block";			}  else {				document.getElementById("the_countdown").innerHTML = t--;				document.getElementById(hid).style.display = "none";				document.getElementById(unhid).style.display = "block";			}		}	</script>  </head>  <body>	<div align="center">	  <div id="the_calcul" class="calcul"></div>	  <div id="click101">		<a href="#jsenabled=no" class="uLigne" onclick="showMoreAnything(101,'#?jsenabled=no');t=0;return false;">Voir la réponse</a>	  </div>	  <div id="the_countdown" class="calcul_countdown"></div>	</div>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

I loaded your doc and I get the countdown. Now, every time the counter says GO! your calcul() function is supposed to run. But look at this line:switch (0) { That will never work. I hope you understand why? Maybe just a typing error?

Link to comment
Share on other sites
Matpatnik Member

Matpatnik

Posted
  • Author
Posted

Yes the switch (0) was a typing errorWe have no problem with FF and Opera.The countdown doesn't work on my 3 computers and my friends computer too with IE. It show the starting number but that's all and give me an error Line: 68, Char: 5, Error: Object required, Code: 0...

		function myConstructor(blocknum) {			hid = ('hide' + (blocknum));			unhid = ('click' + (blocknum));			if (t == 0) {				document.getElementById("the_countdown").innerHTML = t--;				document.getElementById(hid).style.display = "block";				document.getElementById(unhid).style.display = "none";			} else if (t < 0) {				t = 10;				document.getElementById("the_countdown").innerHTML = "GO!";				myCalculOperation();				document.getElementById(hid).style.display = "none";				document.getElementById(unhid).style.display = "block";			}  else {				document.getElementById("the_countdown").innerHTML = t--;				document.getElementById(hid).style.display = "none"; /* <--- It's this line  */				document.getElementById(unhid).style.display = "block";			}		}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...