javascript willekeurig opgave creeren met meerdere bewerkingen

Status
Niet open voor verdere reacties.
S

siedje

Gebruiker
Lid geworden
24 feb 2009
Berichten
7
Dag ik wil een willekeurig opgave maken met willekeurige operatoren. Dus 1 keer plus, 1 keer min, 1 keer maal etc. Bjvoorveeld de opgave 2*9-7 dient op het scherm te worden gegeven.
De gebruiker geeft het antwoord en er vindt dan een controle plaats. Doch in de controle gaat het bij mij fout.

Dit is mijn code,
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<title>test order of operation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="generator" content="CSE HTML Validator (http://www.htmlvalidator.com/)">
	
	<script type="text/javascript">
	
function myOperator() {
    number1 = Math.floor(Math.random()*10)+1;
    number2 = Math.floor(Math.random()*10)+1; 
    operator = ["*", "+", "-", "/"];
    equation = number1+operator[Math.floor(Math.random() * operator.length)]+number2;
    document.getElementById('exportField').innerHTML= equation;
    equationSolved = number1+operator[Math.floor(Math.random() * operator.length)]+number2;         
}

function myCheck(){
input = formA.inputfield.value;
  if (input == equationSolved)
	{
	document.getElementById('result').innerHTML= 'The answer (' + input + ') is correct.';}
	 else
     	{
	document.getElementById('exportField').innerHTML= 'The answer (' + input + ') is false. The correct answer  is ' + equationSolved + '.';
    	}
 }


</script>
</head>



<body style="background-image: url('Afbeeldingen/Schriftzonderrodelijn.gif')"  onload="myOperator()">
<div id="exportField"> </div>
<div id="result"> </div>

<FORM name="formA">
  <INPUT class="knop" type="button" value="Give new equation" onclick="myOperator();"><BR>
  &nbsp;<INPUT class="knop" type="button" value="Check" onclick="myCheck();">
   Solve the equation. Fill in the answer in the box.:
  <INPUT style="width: 30px;" type="text" name="inputfield">  
  </FORM>



</body>
</html>
 
Laatst bewerkt door een moderator:
Kan je een werkend voorbeeld geven (bijvoorbeeld een jsfiddle)?

Kan je aangeven wat er precies niet werkt? Ik zie tal van dingen die fout gaan.
 
Je zult ongetwijfeld Javascript errors krijgen wanneer je dit uit laat voeren, in welke browser laat je deze code uitvoeren?
 
Knipsel.PNGKnipsel2.PNG
Kvothe zei:
Kan je een werkend voorbeeld geven (bijvoorbeeld een jsfiddle)?

Kan je aangeven wat er precies niet werkt? Ik zie tal van dingen die fout gaan.
Klik om te vergroten...

Hoi

Ik krijg wel een opgave te zien. Maar de controle werkt niet. Stel ik heb een opgave 2*4. De functie myCheck die controleert werkt 2*4 niet uit. Dus die ziet als antwoord 2 i.p.v. 8.
 
Laatst bewerkt:
Wat heb je qua debugging gebruikt? Heb je variabelen gecontroleerd of de waardes overeenkomen met wat je verwacht?

Math.random() is in dit geval een van je problemen, voor de variabele equation kan een andere operator gebruikt worden dan voor de variable equationSolved.
 
Debugging

Voor debugging heb ik CSE HTML validator 2012 gebruikt.
Die geeft geen errors aan.
 
Dat is geen debugger maar een validator. :)
Die controleert geen code, alleen of jouw HTML (niet je Javascript) zich aan de standaard (gedefineerd in het DOCTYPE) houdt.

Debuggen in Javascript doe je o.a. door middel van de console.log() functie.
In de console van je browser zie je dan het resultaat verschijnen en op welke regel dat is.

Dit zal je in ieder geval al aardig op weg helpen denk ik:
[js]
function myOperator() {
number1 = Math.floor(Math.random()*10)+1;
number2 = Math.floor(Math.random()*10)+1;
operator = ["*", "+", "-", "/"];
equation = number1+operator[Math.floor(Math.random() * operator.length)]+number2;
document.getElementById('exportField').innerHTML= equation;
equationSolved = number1+operator[Math.floor(Math.random() * operator.length)]+number2;
// Debugging
console.log('equation: '+ equation);
console.log('equationSolved: '+ equationSolved);
}
[/js]
 
Bedankt voor je vlugge reactie.
Wat ik kan zien is dat equationSolved niet wordt opgelost. Er komt dus geen getal uit en dus kan ik die ook niet vergelijken met de invoer.
 
Heeft equationSolved geen waarde of is de waarde niet gelijk aan het resultaat dat je verwacht?

Geeft je console nog errors dan?
 
de console geeft deze waardenals ik 3 en 7 bij elkaar probeer op te tellen.Knipsel4.PNG
 
Je kan niet op die manier een berekening uitvoeren. '+' is een string, geen operator.

Je zou iets kunnen doen als:

[JS]
function operate(a, i, b) {
switch (i) {
case '+':
return a + b;
break;
case '-':
return a - b;
break;
case '*':
return a * b;
break;
case '/':
return a / b;
break;
}
}
[/JS]
 
Bedankt voor de reacties.
Ik ben er al uit.

Bij deze mij nieuwe html code
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>test order of operation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="generator" content="CSE HTML Validator (http://www.htmlvalidator.com/)">
    
    <script type="text/javascript">
    
function myOperator() {
    document.getElementById('result').innerHTML = ' ';
    document.getElementById('exportField').innerHTML = ' ';
    document.formA.inputfield.focus();
    number1 = Math.floor(Math.random()*10)+1;
    number2 = Math.floor(Math.random()*10)+1; 
    number3 = Math.floor(Math.random()*10)+1; 
    number4 = Math.floor(Math.random()*10)+1; 
    number5 = Math.floor(Math.random()*10)+1; 
    operator = ["*", "+", "-", "/"];
    equation = number1+operator[Math.floor(Math.random() * operator.length)]+number2+operator[Math.floor(Math.random() * operator.length)]+number3+operator[Math.floor(Math.random() * operator.length)]+number4;
    document.getElementById('exportField').innerHTML= equation;
    equationSolved = eval(equation);  
  // Debugging    
  // console.log('equation: '+ equation);
  // console.log('equationSolved: '+ equationSolved);
}
 
function myCheck(){
input = formA.inputfield.value;
  if (input == equationSolved)
    {
    document.getElementById('result').innerHTML= 'The answer (' + input + ') is correct.';}
     else
        {
    document.getElementById('exportField').innerHTML= 'The answer (' + input + ') is false. The correct answer  is ' + equationSolved + '.';
        }
 }
 
 
</script>
</head>
 
<body style="background-image: url('Afbeeldingen/Schriftzonderrodelijn.gif')"  onload="myOperator()">
<div id="exportField"> </div>

 
<FORM name="formA">
  <INPUT class="knop" type="button" value="Give new equation" onclick="myOperator();"><BR>
  &nbsp; <span lang="nl">Los de opdracht op en vul het antwoord in</span>:
  <INPUT style="width: 30px;" type="text" name="inputfield">  
  <INPUT class="knop" type="button" value="Check" onclick="myCheck();"></FORM>
 
 <div id="result"> </div>
 
</body>
</html>
 
Laatst bewerkt door een moderator:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan