[RESOLVED] Selection problem

**ajajajak** · 02-14-2010, 10:35 AM

Hello,

I know it might seem long, but in reality it really isn't - I did try to extensively explain the script. If you do not want to read it you can just scroll down to the problem description at the bottom. You will also find the full HTML there.

Following script has:

A function for generating random numbers between 1 - 10

Code:

function willekeurig(){
getal = Math.random()*10;
getal = Math.round(getal);
return getal;
}

A function that generates a calculation the user needs to solve. The user has the option between three calculations: Adding/Subtracting/Multiplication.
The values for these calculations are stored in the option's value attribute.

Code:

function opgave_ophalen(){
index = document.getElementById("bewerking").selectedIndex;
bewerking = document.getElementById("bewerking").options[index].value;
getal1 = willekeurig();
getal2 = willekeurig();
opgave = document.getElementById("opgave");
opgave.value = getal1 + " " + bewerking + " " + getal2;
document.getElementById("antwoord").value = "";
document.getElementById("antwoord").focus();
}

the end function which stops the whole process.

Code:

function einde(){
alert("De minuut is verstreken. Controleer je score onderaan!");
document.getElementById("opgave").value = "De test is afgelopen";
}

a function to start the whole process. Including a timer which calls the end or "einde" function to stop the game. This happens after 1 min(60000 secs).

Code:

function start_spel(){
document.getElementById("form").reset();
timer = window.setTimeout("einde()",60000);
opgave_ophalen();	
}

A function which controls the answers to the calculations inputted by the user. Keeping track of the number of correct and incorrect answers given.

Code:

function controleer(){
antwoord = document.getElementById("antwoord");
oplossing = eval(document.getElementById("opgave").value);
if(timer != ""){
	if(antwoord.value == oplossing){
		document.getElementById("juist").value++;
		}
		else{
			document.getElementById("fout").value++;
			}	
		opgave_ophalen();
	}
else{
	alert("Klik eerst op de knop \"Start het spel\"");
}
}

HTML Code:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rekenspel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Rekenspel.css" />
<script type="text/javascript">
/* <![CDATA[ */
function willekeurig(){
getal = Math.random()*10;
getal = Math.round(getal);
return getal;
}

function opgave_ophalen(){
index = document.getElementById("bewerking").selectedIndex;
bewerking = document.getElementById("bewerking").options[index].value;
getal1 = willekeurig();
getal2 = willekeurig();
opgave = document.getElementById("opgave");
opgave.value = getal1 + " " + bewerking + " " + getal2;
document.getElementById("antwoord").value = "";
document.getElementById("antwoord").focus();
}

function einde(){
alert("De minuut is verstreken. Controleer je score onderaan!");
document.getElementById("opgave").value = "De test is afgelopen";
}

function start_spel(){
document.getElementById("form").reset();
timer = window.setTimeout("einde()",60000);
opgave_ophalen();	
}

function controleer(){
antwoord = document.getElementById("antwoord");
oplossing = eval(document.getElementById("opgave").value);
if(timer != ""){
	if(antwoord.value == oplossing){
		document.getElementById("juist").value++;
		}
		else{
			document.getElementById("fout").value++;
			}	
		opgave_ophalen();
	}
else{
	alert("Klik eerst op de knop \"Start het spel\"");
}
}
/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<form id="form" action="">
	<fieldset>
		<legend>Rekenspel</legend>
		<fieldset id="one">
			<div id="block1">
				<p>Kies de bewerking:</p>
				<select id="bewerking">
					<option value="+">Optellen</option>
					<option value="-">Aftrekken</option>
					<option value="*">Vermenigvuldigen</option>
				</select>
			</div>
			<div id="block2">
				<input type="button" class="btn" id="orange" value="Start het spel" onclick="start_spel()" />
				<input type="reset" class="btn" value="Begin opnieuw" onclick="window.clearTimeout(timer);" />
			</div>
		</fieldset>
		<fieldset id="two">
			<div id="block3">
				<p>Opgave</p>
				<input type="text" id="opgave" value="0" onfocus="blur()" />
				<p>Antwoord</p>
				<input type="text" id="antwoord" value="0" />
				<input type="button" id="controle" class="btn" value="Controleer het antwoord" onclick="controleer()" />
			</div>
			<div id="block4">
				<p>Score</p>
				<label>Juist:</label><input type="text" class="left" id="juist" size="3" value="0" />
				<label id="lblfout">Fout:</label><input type="text" class="left" id="fout" size="3" value="0" />
			</div>
		</fieldset>
	</fieldset>
</form>
</div>
</body>
</html>

Now the problem occurs when selecting one of three calculation options. No matter what you chose before starting the game it will turn back to the first option - which is "Adding" - upon starting the game. You can only change the calculation during the game which isn't what we want.

I tried removing the form.reset() in the start function but this did not solve it. Any idea what is causing this?

**Fang** · 02-14-2010, 12:11 PM

Code:

function start_spel(){
index = document.getElementById("bewerking").selectedIndex;
document.getElementById("form").reset();
document.getElementById("bewerking").selectedIndex = index;
timer = window.setTimeout("einde()",60000);
opgave_ophalen();	
}

**ajajajak** · 02-14-2010, 01:03 PM

I had no variable storing the value...

save - reset - insert saved. Works perfectly.
Thank you!

**ajajajak** · 02-14-2010, 04:02 PM

Code:

if(timer != ""){
	if(antwoord.value == oplossing){
		document.getElementById("juist").value++;
		}
	else{
		document.getElementById("fout").value++;
		}	
	opgave_ophalen(); //na he evalueren en bijvoegen van de correcte score-verdeling wordt opgave_ophalen() telkens opnieuw aangeroepen zodat er ook telkens een nieuwe opgave verschijnt. na 1 min wordt de "manuele lus" doorbroken d.m.v een string.
	}
else{
	alert("Klik eerst op de knop \"Start het spel\"");
	}

This processes an error with the (timer!="") statement/structure. It does not work.

Error: Expected ';' on line 43

Code:

if(timer != ""){

Any idea

**Fang** · 02-15-2010, 12:39 AM

timer is not defined

**ajajajak** · 02-15-2010, 08:34 AM

I have tried defining the timer at the top as var timer = ""; but this did not solve the problem. I have however mistaken line 44 with 43. The actual line is:

Code:

oplossing = eval(document.getElementById("opgave").value);

I have tried splitting the line up in a line getting the value and another applying the eval() method to it but the same error occured.

**Fang** · 02-15-2010, 09:00 AM

Show the complete document

**ajajajak** · 02-15-2010, 09:05 AM

(it was posted in the first post at the bottom

)

HTML Code:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rekenspel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Rekenspel.css" />
<script type="text/javascript">
/* <![CDATA[ */
var timer = "";
function willekeurig(){
getal = Math.random()*10;
getal = Math.round(getal);
return getal;
}

function opgave_ophalen(){
index = document.getElementById("bewerking").selectedIndex;
bewerking = document.getElementById("bewerking").options[index].value;
getal1 = willekeurig();
getal2 = willekeurig();
opgave = document.getElementById("opgave");
opgave.value = getal1 + " " + bewerking + " " + getal2;
document.getElementById("antwoord").value = "";
document.getElementById("antwoord").focus();
}

function einde(){
alert("De minuut is verstreken. Controleer je score onderaan!");
document.getElementById("opgave").value = "De test is afgelopen"; // String invoeren die niet gevaled kan worden en dus niet vergeleken kan worden zorgt ervoor dat het hele script niet meer functioneert en dus stopt
}

function start_spel(){
index = document.getElementById("bewerking").selectedIndex;
document.getElementById("form").reset();
document.getElementById("bewerking").selectedIndex = index;
timer = window.setTimeout("einde()",60000);
opgave_ophalen();	
}

function controleer(){
antwoord = document.getElementById("antwoord");
oplossing = eval(document.getElementById("opgave").value); //String behandelen als integer/float en output is ook integer/float.
if(timer != ""){
	if(antwoord.value == oplossing){
		document.getElementById("juist").value++;
		}
	else{
		document.getElementById("fout").value++;
		}	
	opgave_ophalen(); //na he evalueren en bijvoegen van de correcte score-verdeling wordt opgave_ophalen() telkens opnieuw aangeroepen zodat er ook telkens een nieuwe opgave verschijnt. na 1 min wordt de "manuele lus" doorbroken d.m.v een string.
	}
else{
	alert("Klik eerst op de knop \"Start het spel\"");
	}
}
/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<form id="form" action="">
	<fieldset>
		<legend>Rekenspel</legend>
		<fieldset id="one">
			<div id="block1">
				<p>Kies de bewerking:</p>
				<select id="bewerking">
					<option value="+">Optellen</option>
					<option value="-">Aftrekken</option>
					<option value="*">Vermenigvuldigen</option>
				</select>
			</div>
			<div id="block2">
				<input type="button" class="btn" id="orange" value="Start het spel" onclick="start_spel()" />
				<input type="reset" class="btn" value="Begin opnieuw" onclick="window.clearTimeout(timer);" />
			</div>
		</fieldset>
		<fieldset id="two">
			<div id="block3">
				<p>Opgave</p>
				<input type="text" id="opgave" value="0" onfocus="blur()" />
				<p>Antwoord</p>
				<input type="text" id="antwoord" value="0" />
				<input type="button" id="controle" class="btn" value="Controleer het antwoord" onclick="controleer()" />
			</div>
			<div id="block4">
				<p>Score</p>
				<label>Juist:</label><input type="text" class="left" id="juist" size="3" value="0" />
				<label id="lblfout">Fout:</label><input type="text" class="left" id="fout" size="3" value="0" />
			</div>
		</fieldset>
	</fieldset>
</form>
</div>
</body>
</html>

**Fang** · 02-15-2010, 09:29 AM

Don't use eval
The simple solution was given in a previous post.

I don't get an error

**ajajajak** · 02-15-2010, 10:10 AM

Nevermind. I misjudged your comment - appologies. However it was not my intention to somehow question your javascript skills as I feel you reacted to that. It just did not work...

I know now I should not use eval(), thank you for that. I'll try to figure the rest out on my own.

Thread: [RESOLVED] Selection problem

Thread Tools

Display

[RESOLVED] Selection problem

Syntax error?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions