Javascript Test Timer

trainspotter · 8 okt 2013

Beste allemaal,

Ik ben echt een beginner met javascript en ik heb nu een code getypt die een rekensom van twee getallen onder de 10 geeft en jouw antwoord controleert, zie onderstaande code.
Hier wil ik graag een timer bij hebben die het volgende doet:
- aftellen van 15 minuten naar 0
- wanneer de tijd is verstreken of er zijn 10 vragen gemaakt, het aantal goede en foute sommen weergeven
- met een start knop

Eigenlijk een soort overhoring zoals je die op school hebt.

Mijn code is nu:

<head>

<title>Opdracht</title>

<script type="text/javascript">

function som() {
getal1 = Math.floor(Math.random()*9+1);
getal2 = Math.floor(Math.random()*9+1);
antwoord = getal1+getal2;

document.getElementById('somveld').innerHTML= getal1 + ' + ' + getal2 + ' = ';
document.getElementById('uitvoerveld').innerHTML = ' ';

document.formulier.invoerveld.value = "";
document.formulier.invoerveld.focus();

}

function controleer() {

invoer = document.formulier.invoerveld.value;

if (invoer == antwoord) {
document.getElementById('uitvoerveld').innerHTML= 'Het antwoord ' + invoer + ' is juist.';
}
else
{document.getElementById('uitvoerveld').innerHTML= 'Het antwoord ' + invoer + ' is fout. Het goede antwoord is ' + antwoord + '.';
}
}

</script>
</head>

<body onload="som()">

<h3>
Optellen
</h3>

Bereken de onderstaande som:

<div id="somveld"> </div>

<form name="formulier">
Vul je antwoord in in het volgende hokje:
<input style="width: 50px;" type="text" name="invoerveld">,
<br>
<br>
<input class="knop" type="button" value="Geef nieuwe som" onclick="som();">
<input class="knop" type="button" value="Controleer" onclick="controleer();">
</form>

<div id="uitvoerveld"> </div>

</body>

</html>

Ik hoop dat iemand mij hierbij kan/wil helpen.

B.v.d.

maikel123 · 25 okt 2013

Had even niks te doen

. dus denk zoiets, zit alleen geen start knop in of een mooiere popup scherm.

HTML:

<html>
<head>
	<title>Rekenen</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		body {
			background-color: #eee;
			font-family: arial;
			color: #444;
		}
		#wrapper {
			width: 400px;
			margin: 50px auto;
			border-radius: 5px;
			background-color: #fff;
			border: 1px solid #ddd;
			padding: 30px;
		}
		
		#timer {
			margin: 0 auto;
			padding: 10px;
			color: #fff;
			background-color: green;
			text-align: center;
			margin-bottom: 20px;
			border-radius: 5px;
			border: 1px solid #ddd;
		}

		#sum {
			text-align: center;
			font-size: 32px;
		}

		#answer {
			margin-top: 20px;
			width: 100%;
			border: 1px solid #ddd;
			border-radius: 5px;
			padding: 10px;
			text-align: center; 
		}

		#message {
			margin-top: 15px;
		}
	</style>

	<script type="text/javascript">
		var operations = ['-','+','*','/'];
		var operator = null;
		var numb1 = 0;
		var numb2 = 0;
		var sum_count = 0;
		var good_answers = 0;
		var end_time = (new Date().getTime()/1000)+60*15;

		function randSum(){
		    operator = operations[Math.floor(Math.random()*4)];
		    if(operator == '-' || operator == '+'){
		        numb1 = Math.floor((Math.random()*80)+21);
		        numb2 = Math.floor((Math.random()*80)+21);
		    } else {
		        numb1 = Math.floor((Math.random()*9)+2);
		        numb2 = Math.floor((Math.random()*9)+2);
		        
		        while(operator == '/' && numb1 < numb2)
		        	numb2--;
		    }
		    document.getElementById('numb1').innerHTML = numb1;
		    document.getElementById('operator').innerHTML = operator;
		    document.getElementById('numb2').innerHTML = numb2;
		}

		function checkSum(){
		    var answer = document.getElementById('answer').value;
		    document.getElementById('answer').value = "";
		    
		    if(operator == '-')
		    	var good_answer = numb1-numb2;
		    if(operator == '+')
		    	var good_answer = numb1+numb2;
		    if(operator == '*')
		    	var good_answer = numb1*numb2;
		    if(operator == '/')
		    	var good_answer = numb1/numb2;

		    if(answer == good_answer) {
		    	document.getElementById('message').innerHTML= 'Het antwoord ' + answer + ' is juist.';
		    	good_answers++;
		    } else {
		    	document.getElementById('message').innerHTML= 'Het antwoord ' + answer + ' is fout. Het goede antwoord is ' + good_answer + '.';
		    }
		    sum_count++;
		}

		function checkGame(){
			var time = -Math.round((new Date().getTime()/1000)- end_time);
			if(sum_count > 9 || time < 0) {
				var tmp = good_answers;
				reset();
				alert("Je hebt "+tmp+" goede antwoorden van de 10.");
				return false;
			}
			return true;
		}

		function reset(){
		    sum_count = 0;
			good_answers = 0;
			end_time = (new Date().getTime()/1000)+60*15;
			document.getElementById('message').innerHTML= '';
		}

		function timer(){
		    var time = -Math.round((new Date().getTime()/1000)- end_time);
		    var node = document.getElementById("timer");
		    if(time >= 0) {
		    	minutes = Math.floor(time/60);
		    	seconds = time%60;
		         node.innerHTML = minutes+':'+seconds; 
		    } else {
		        node.innerHTML = "Time is up";
		        window.clearInterval(timer_id);
		    }
		}
	</script>
</head>

<body>
<div id="wrapper">
	<p id="timer">0</p>
	<div id="sum">
	    <span id="numb1">1</span>
	    <span id="operator">+</span>
	    <span id="numb2">1</span>
	<input id="answer" type="text">
	</div>
	<p id="message"></p>
</div>

<script type="text/javascript">
document.getElementById('answer').onkeypress = function(e){
   if (!e) e = window.event;
   var keyCode = e.keyCode || e.which;
   if (keyCode == '13'){
   	  if(checkGame())
      	checkSum();
      randSum();
      return false;
   }
}
randSum();
timer();
timer_id = window.setInterval(function() {timer(); if(!checkGame()){randSum()}},1000 );
</script>

</body>
</html>

Javascript Test Timer

trainspotter

Nieuwe gebruiker

maikel123

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy