www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] Selection problem

  1. #1
    Join Date
    Nov 2009
    Posts
    65

    resolved [RESOLVED] Selection problem

    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?
    Last edited by ajajajak; 02-14-2010 at 12:09 PM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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();	
    }

  3. #3
    Join Date
    Nov 2009
    Posts
    65

    Thumbs up

    I had no variable storing the value...

    save - reset - insert saved. Works perfectly.
    Thank you!
    Last edited by ajajajak; 02-14-2010 at 02:06 PM.

  4. #4
    Join Date
    Nov 2009
    Posts
    65

    Question Syntax error?

    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

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    timer is not defined

  6. #6
    Join Date
    Nov 2009
    Posts
    65
    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.
    Last edited by ajajajak; 02-15-2010 at 09:48 AM.

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Show the complete document

  8. #8
    Join Date
    Nov 2009
    Posts
    65
    (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>

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Don't use eval
    The simple solution was given in a previous post.

    I don't get an error

  10. #10
    Join Date
    Nov 2009
    Posts
    65
    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.
    Last edited by ajajajak; 02-15-2010 at 11:55 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles