probleem met vragensysteem

Status
Niet open voor verdere reacties.
jeroendenoot

jeroendenoot

Terugkerende gebruiker
Lid geworden
14 mrt 2005
Berichten
1.492
Hallo allemaal, ik ben in JavaScript een soort vragensysteem aan het maken. Het is bijna af, maar de uitslag lukt niet. Ik ben even begonnen met maar 2 vragen, maar ik kan er makkelijk meer toevoegen. Dit is de uitleg met daaronder het script:

Uitleg: Eerst wordt er een willekeurige vraag gekozen. Dan wordt die op het scherm gezet, samen met een invulvak en een knop. Dan kun je een antwoord invullen in het vak en op de knop klikken. Dan wordt er gekeken of het antwoord fout is. Als dat zo is, wordt er een element toegevoegd aan de Array 'vragenfout'. Daarna wordt de vraag die net gesteld is verwijderd uit de Array 'vragenantwoorden'. Dan wordt er weer een willekeurige vraag gekozen uit de Array 'vragenantwoorden' (in dit geval is er nog maar 1 over) en op het scherm weergeven (inclusief invulvak en knop). Dan vul je weer een antwoord in en klik je op de knop. Dan wordt er gekeken of het antwoord fout is. Als dat zo is, wordt er een element toegevoegd aan de Array 'vragenfout'. Daarna wordt de vraag die net gesteld is verwijderd uit de Array 'vragenantwoorden'. Dan zijn er geen elementen meer in de Array 'vragenantwoorden' en wordt de uitslag weergeven.
Maar dat stukje werkt niet. I.p.v. dat de uitslag wordt weergeven komt er NaN (Not a Number) te staan. Dat wil dus zeggen dat 'aantalvragen' of 'vragenfout.push()' geen getal is. Ik heb al van alles geprobeerd maar het lukt nog steeds niet. Zou iemand mij kunnen helpen?

Script:
Code: 
<script type="text/javascript">
<!--

var vragen = 'Vertaal in het Engels: jongen:::boy::::::Vertaal in het Engels: meisje:::girl';
var aantalvragen = 2;
var vragenantwoorden = vragen.split("::::::");
var vragenfout = new Array();

function controleer(invulantwoord,goedeantwoord,vraagnummer){
invulantwoord = invulantwoord.toLowerCase();
if(goedeantwoord != invulantwoord){
vraagnummer++;
vragenfout.push("fout");
}
vragenantwoorden.splice(vraagnummer,1);
schrijfvraag();
}

function schrijfvraag(){
aantalvragenover = vragenantwoorden.push();
if(aantalvragenover > 0){
var nr = Math.round(Math.random()*(aantalvragenover-1))+1;
nr--
vraagantwoord = vragenantwoorden[nr].split(":::");
var vraag = vraagantwoord[0];
var antwoord = vraagantwoord[1];
document.getElementById("vraag").innerHTML=vraag + '<br><input type="text" id="invullen"><br><input type="button" value="OK" onClick="controleer(document.getElementById(\'invullen\').value,\'' + antwoord + '\',\'' + nr + '\');">';
} else {
document.getElementById("vraag").innerHTML="Je bent klaar.<br><br>Aantal foute antwoorden: " + vragenfout.push() + "<br>Aantal goede antwoorden: " + aantalvragen-vragenfout.push();
}
}
schrijfvraag();

//-->
</script>
 
Laatst bewerkt:
ff een beginnetje :)
Code: 
var nr = Math.round(Math.random()*(aantalvragenover-1))+1;
nr--
> moet zijn
var nr = Math.floor(Math.random()*aantalvragenover);


aantalvragenover = vragenantwoorden.push();
> moet zijn
aantalvragenover = vragenantwoorden.length;


document.getElementById("vraag").innerHTML=vraag + '<br><input type="text" id="invullen"><br><input type="button" value="OK" onClick="controleer(document.getElementById('invullen').value,'' + antwoord + '','' + nr + '');">';
> moet zijn
document.getElementById("vraag").innerHTML=vraag + '<br><input type="text" id="invullen"><br><input type="button" value="OK" onClick="controleer(document.getElementById(\'invullen\').value,\'' + antwoord + '\',' + nr + ');">';
= invullen & antwoord staan tussen ' mét backslash, nr is een getal daar hoeft dat niet


Het aantal foute antwoorden is vragenfout.length niet vragenfout.push()


Tot zover, kijk maar even, groet Egel.
 
Er is geen verschil nu. Alles is precies hetzelfde. De enige foutmelding is nog steeds 'NaN'. Ik zal even de code opnieuw plaatsen hoe die er nu uit ziet:

Code: 
<div id="vraag">
</div>
<script type="text/javascript">
<!--

var vragen = 'Vertaal in het Engels: jongen:::boy::::::Vertaal in het Engels: meisje:::girl';
var aantalvragen = 2;
var vragenantwoorden = vragen.split("::::::");
var vragenfout = new Array();

function controleer(invulantwoord,goedeantwoord,vraagnummer){
invulantwoord = invulantwoord.toLowerCase();
vragenantwoorden.splice(vraagnummer,1);
if(goedeantwoord != invulantwoord){
vraagnummer++;
vragenfout.push(vraagnummer);
}
schrijfvraag();
}

function schrijfvraag(){
aantalvragenover = vragenantwoorden.length;
if(aantalvragenover > 0){
var nr = Math.floor(Math.random()*aantalvragenover);
vraagantwoord = vragenantwoorden[nr].split(":::");
var vraag = vraagantwoord[0];
var antwoord = vraagantwoord[1];
document.getElementById("vraag").innerHTML=vraag + '<br><input type="text" id="invullen"><br><input type="button" value="OK" onClick="controleer(document.getElementById(\'invullen\').value,\'' + antwoord + '\',' + nr + ');">';} else {
document.getElementById("vraag").innerHTML="Je bent klaar.<br><br>Aantal foute antwoorden: " + vragenfout.length + "<br>Aantal goede antwoorden: " + aantalvragen-vragenfout.length;
}
}
schrijfvraag();

//-->
</script>
 
Laatst bewerkt:
Code: 
var vragenfout = 0;
&
vragenfout++
&
vragenfout      aantalvragen-vragenfout

Ik denk (ken het niet exact) dat push() iets anders doet dan:
vragenfout[vragenfout.length] = 'fout';
een element aan het einde toevoegen.

Maar vragenfout kan gewoon een getal zijn, toch?

Je code kun je misschien beter tussen [ code ] zetten, [ php ] verandert er soms iets aan, zoals \' wordt '' zo te zien.


Gr. Egel.
 
Inderdaad. Het was eigenlijk ook mijn bedoeling dat er een element bij komt. (Zie hier een uitleg van push(): http://www.ivobrugge.be/cursusweb/javascript/arrays.asp#methoden) Want ik heb even de functie 'controleer' veranderd (zie mijn vorige bericht). Zo kan ik er straks aan toevoegen welke vragen er fout zijn en daar nog de goede antwoorden van geven. Want nu staat er steeds in het element dat er bij komt het vraagnummer. Maar ik zal het eens proberen op die manier van jou.
 
Laatst bewerkt:
Ik heb het geprobeerd, maar het resultaat is nog steeds hetzelfde. Hier het aangepaste script nog eens:

Code: 
<div id="vraag">
</div>
<script type="text/javascript">
<!--

var vragen = 'Vertaal in het Engels: jongen:::boy::::::Vertaal in het Engels: meisje:::girl';
var aantalvragen = 2;
var vragenantwoorden = vragen.split("::::::");
var vragenfout = 0;

function controleer(invulantwoord,goedeantwoord,vraagnummer){
invulantwoord = invulantwoord.toLowerCase();
vragenantwoorden.splice(vraagnummer,1);
if(goedeantwoord != invulantwoord){
vragenfout++;
}
schrijfvraag();
}

function schrijfvraag(){
aantalvragenover = vragenantwoorden.length;
if(aantalvragenover > 0){
var nr = Math.floor(Math.random()*aantalvragenover);
vraagantwoord = vragenantwoorden[nr].split(":::");
var vraag = vraagantwoord[0];
var antwoord = vraagantwoord[1];
document.getElementById("vraag").innerHTML=vraag + '<br><input type="text" id="invullen"><br><input type="button" value="OK" onClick="controleer(document.getElementById(\'invullen\').value,\'' + antwoord + '\',' + nr + ');">';
} else {
document.getElementById("vraag").innerHTML="Je bent klaar.<br><br>Aantal foute antwoorden: " + vragenfout + "<br>Aantal goede antwoorden: " + aantalvragen-vragenfout;
}
}
schrijfvraag();

//-->
</script>
 
Probeer dit eens,
het idee is om de parameters van controleer() uit de button onclick weg te laten. En ik heb de id question gemaakt om dubbele te voorkomen.
Code: 
<div id="question">
</div>
<script type="text/javascript">
<!--

var vragen = 'Vertaal in het Engels: jongen:::boy::::::Vertaal in het Engels: meisje:::girl';
var aantalvragen = 2;
var vragenantwoorden = vragen.split("::::::");
var vragenfout = 0;
var nr, vraag, antwoord, invulantwoord;

function controleer() {
 invulantwoord = document.getElementById("invullen").value.toLowerCase();
 vragenantwoorden.splice(nr,1);
 if(antwoord != invulantwoord) {
  vragenfout++;
  };
 schrijfvraag();
 };

function schrijfvraag(){
 aantalvragenover = vragenantwoorden.length;
 if(aantalvragenover > 0) {
  nr = Math.floor(Math.random()*aantalvragenover);
  vraagantwoord = vragenantwoorden[nr].split(":::");
  vraag = vraagantwoord[0];
  antwoord = vraagantwoord[1];
  document.getElementById("question").innerHTML = vraag + '<br><input type="text" id="invullen"><br><input type="button" value="OK" onClick="controleer();">';
  } else {
  document.getElementById("question").innerHTML = 'Je bent klaar.<br><br>Aantal foute antwoorden: ' + vragenfout + '<br>Aantal goede antwoorden: ' + (aantalvragen - vragenfout);
  };
 };

schrijfvraag();

//-->
</script>
Gr. Egel.
 
Nu doet hij het! Heel erg bedankt. Maar nu wil ik dat je bij de uitslag ook nog kunt zien welke vragen fout zijn. Plus het goede antwoord. Ik ga vast beginnen met wat uit te proberen.
 
Laatst bewerkt:
Dat is nu ook werkend. Hieronder staat het hele script:

Code: 
<div id="question">
</div>
<script type="text/javascript">
<!--

var vragen = 'Vertaal in het Engels: jongen:::boy::::::Vertaal in het Engels: meisje:::girl';
var aantalvragen = 2;
var vragenantwoorden = vragen.split("::::::");
var vragenantwoordenover = vragen.split("::::::");
var vragenfout = new Array();
var aantalvragenfout = 0;
var nr, vraag, antwoord, invulantwoord;

function controleer() {
 invulantwoord = document.getElementById("invullen").value.toLowerCase();
 vragenantwoordenover.splice(nr,1);
 if(antwoord != invulantwoord) {
  aantalvragenfout++;
  vragenfout.push(nr);
  };
 schrijfvraag();
 };

function schrijfvraag(){
 aantalvragenover = vragenantwoordenover.length;
 if(aantalvragenover > 0) {
  nr = Math.floor(Math.random()*aantalvragenover);
  vraagantwoord = vragenantwoordenover[nr].split(":::");
  vraag = vraagantwoord[0];
  antwoord = vraagantwoord[1];
  document.getElementById("question").innerHTML = vraag + '<br><input type="text" id="invullen"><br><input type="button" value="OK" onClick="controleer();">';
  } else {
  document.getElementById("question").innerHTML = 'Je bent klaar.<br><br>Aantal foute antwoorden: ' + aantalvragenfout + '<br>Aantal goede antwoorden: ' + (aantalvragen - aantalvragenfout);
  if(aantalvragenfout > 0){
   document.getElementById("question").innerHTML += '<br><br>Hieronder staan de vragen die je fout had. De goede antwoorden staan eronder.';
   teller = 0;
   while(aantalvragenfout > teller){
    vraagantwoord = vragenantwoorden[teller].split(":::");
    vraag = vraagantwoord[0];
    antwoord = vraagantwoord[1];
	document.getElementById("question").innerHTML += '<br><br>' + vraag + '<br><i>' + antwoord + '</i>';
	teller++;
   }
  }
  };
 };

schrijfvraag();

//-->
</script>
 
Hallo, ik heb de vraag weer even op 'Vraag is niet opgelost' gezet, want ik wil er graag nog iets bij. Ik wil namelijk dat je muis bij het vragensysteem niet hoeft te gebruiken. Dat dus de cursor bij elke vraag vanzelf in het invulvak komt en dat bij het drukken op 'Enter' de 'OK' button wordt geactiveerd. Hoe doe ik dat?
 
De focus() selecteerd het tekstvakje, enter of 'ok' gebruikt de onsubmit die door return false niet echt opstuurt.
Code: 
<body onload="schrijfvraag()">

<form name="formulier" onsubmit="return controleer();">
 <span id="question"></span><br>
 <input type="text" name="invullen">
 <input type="submit" value="ok">
</form>

<script type="text/javascript">
<!--

var vragen = new Array(
 'Vertaal in het Engels: jongen:::boy',
 'Vertaal in het Engels: meisje:::girl',
 'Vertaal in het Engels: trein:::train',
 'Vertaal in het Engels: regen:::rain',
 ''); vragen.pop();

var aantalvragen = vragen.length;
var vragenantwoorden = vragen;
var vragenantwoordenover = vragen;
var aantalvragenfout = 0;
var vragenantwoordenfout = '<br><br>Hieronder staan de vragen die je fout had.<br>De <i>goede</i> antwoorden staan eronder.';
var nr, vraag, antwoord, invulantwoord;

function controleer() {
 invulantwoord = document.formulier.invullen.value.toLowerCase();
 if(antwoord != invulantwoord) {
  aantalvragenfout++;
  vragenantwoordenfout += '<br><br>' + vraag + '<br><i>' + antwoord + '</i> (niet: ' + invulantwoord + ')';
  };
 vragenantwoordenover.splice(nr,1);
 schrijfvraag();
 return false;
 };

function schrijfvraag(){
 aantalvragenover = vragenantwoordenover.length;
 if(aantalvragenover > 0) {
  nr = Math.floor(Math.random()*aantalvragenover);
  vraagantwoord = vragenantwoordenover[nr].split(":::");
  vraag = vraagantwoord[0]; antwoord = vraagantwoord[1];
  document.getElementById("question").innerHTML = vraag;
  document.formulier.invullen.value = '';
  document.formulier.invullen.focus();
  } else {
  document.getElementById("formulier").innerHTML = 'Je bent klaar.<br><br>Aantal goede antwoorden: ' + (aantalvragen - aantalvragenfout) + '<br>Aantal foute antwoorden: ' + aantalvragenfout;
  if(aantalvragenfout > 0){
   document.getElementById("formulier").innerHTML += vragenantwoordenfout;
   };
  };
 };

//-->
</script>


</body>

De bijlage is hetzelfde als hierboven staat.


Groet, Egel.
 

Bijlagen

Wouw! Echt heel erg bedankt! Je hebt hem zelfs helemaal aangepast, echt cool.;)
 
Graag gedaan :o:);)

nog een kleine aanvulling omdat het bovenstaande niet goed werkt met Firefox (fx).

Het blijkt dat na het 'wissen' van het formulier met innerHTML de return false niet meer werkt in Fx om het opsturen van het formulier te stoppen.

De oplossing is om het formulier ipv te wissen onzichtbaar te maken met style.display = 'none';
en een aparte <span id="answers"></span> te gebruiken voor de antwoorden.
Code: 
<form name="formulier" onsubmit="return controleer();" style="display: inherit;">
 <span id="question"></span><br>
 <input type="text" name="invullen">
 <input type="submit" value="ok">
</form>
<span id="answers"></span>


  document.formulier.style.display = 'none';
  document.getElementById("answers").innerHTML = 'Je bent klaar.<br><br>Aantal goede antwoorden: ' + (aantalvragen - aantalvragenfout) + '<br>Aantal foute antwoorden: ' + aantalvragenfout;
  if(aantalvragenfout > 0){
   document.getElementById("answers").innerHTML += vragenantwoordenfout;
  };

zijn de iets veranderde stukken, de rest is hetzelfde gebleven.


Vr.Gr. Egel.
 

Bijlagen

Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan