Ga naar inhoud

open nieuw pagina on event in Javascript


anoniem

Aanbevolen berichten

Hoi kenners, Kan iemand mij helpen met het volgende? Ik heb een formulier met vragen voor kinderen gemaakt. Het zijn 10 vragen en bij elke vraag kunnen ze checken of het antwoord goed is. Dit gebeurt met een alertbox (bijv. alert('Goed zo! Ga verder met vraag x');) Nu komt het: Wanneer ze de laatste vraag (10) goed hebben beantwoordt, moet er wederom een venster verschijnen met de teskt "Wil je nu moeielijkere vragen doen?" en de knoppen "OK/Ja" en "Annuleren/Nee". Wanneer er op OK/Yes geklikt wordt moet er een nieuwe pagina geopend worden met nieuwe vragen en als er op "annuleren geklikt wordt moet dezelfde pagina geopend blijven zodat ze eventueel dezelfde vragen nog een keer kunnen doen. Ik hoop dat ik een beetje duidelijke ben geweest en dat iemand mij kan helpen met dit javascript. Alvast bedankt, Eric.
Link naar reactie
[quote:535b1633b0="teacher"]wat jij nodig hebt is een confirm(). t.[/quote:535b1633b0] Ik maak al gebruik van conform() zie code: function erafvr10_onclick(form) { if (form.eraf_vr_10.value == "") alert('Je hebt geen antwoord ingevuld bij vraag 10 van "Oefening Eraf"'); else if (form.eraf_vr_10.value == 4) (confirm('Goed zo! Klik op "OK" om naar de moeilijkere vragen te gaan. Als je deze vragen nog een keer wilt doen, klik dan op "annuleren"'), location.url ='rekenen.htm'); else alert('Fout! Probeer het nog eens.', document.vraageraf.eraf_vr_10.value = "", document.vraageraf.eraf_vr_10.focus()); } In de <body> en </body> staat <td>Vraag 10:</td> <td>20 - 16 =</td> <td><input type="text" name="eraf_vr_10" size="10"></td> <td><[b:535b1633b0]input type="button" onClick="erafvr10_onclick(this.form)" name="but_eraf_vr_10" value="Is het goed?" [/b:535b1633b0]></td> </tr> <tr> <td colspan="4"><div align="center"> <input type="reset" name="reset2" value="Deze vragen nog een keer?" size="20"> </div></td> </tr> Misschien dat het nu duidelijker is wat ik wil weten. Groetjes, Eric.
Link naar reactie
[quote:102531ad9f="BasHamar"]Wat is het probleem dan precies? Je kan evt confirm() nesten... - Bas[/quote:102531ad9f] Het probleem is dat ik het niet voor elkaar krijg dat wanneer er op "OK" geklikt wordt, er een nieuwe pagina geopend wordt met nieuwe vragen. En wanneer er op "annuleren" geklikt wordt moet de huidige pagina geopend blijven. Help. Groetjes, Eric.
Link naar reactie
Mag ik je allereerst complimenteren met een van de meest obscure manier van samenvoegen van commando's in javascript die ik ooit heb gezien ;) De "normale" manier om meerdere commando's te bundelen in een blok is om deze tussen accolades te plaatsen. Constructies als [code:1:0b77184c1b] else alert('bla', x=1, y=2); [/code:1:0b77184c1b] werken misschien wel, maar zijn imho slecht leesbaar en daarmee niet echt aan te raden. Beter is dit: [code:1:0b77184c1b] else { alert('bla'); x = 1; y = 2; } [/code:1:0b77184c1b] Dat gezegd hebbende hieronder wat (ongeteste) code die meer in de richting komt van wat jij wil. [code:1:0b77184c1b] function erafvr10_onclick(form) { if (form.eraf_vr_10.value == "") { alert('Je hebt geen antwoord ingevuld bij vraag 10 van "Oefening Eraf"'); } else if (form.eraf_vr_10.value == 4) { if (confirm('Goed zo! Klik op "OK" om naar de moeilijkere vragen te gaan. Als je deze vragen nog een keer wilt doen, klik dan op "annuleren"')) { location.href = 'rekenen.htm'; } } else { alert('Fout! Probeer het nog eens.'); document.vraageraf.eraf_vr_10.value = ""; document.vraageraf.eraf_vr_10.focus(); } } [/code:1:0b77184c1b]
Link naar reactie
Hoi Annie, Bedankt voor je welgemeende complimenten :oops: Ik heb je advies uteraard opgevolgt, ik ben zoals je gezien hebt nog maar een beginner, maar dit is het geworden en het werkt ook nog. Bedankt! [code:1:b1c3d69408]function erafvr10_onclick(form) { if (form.eraf_vr_10.value == 6) { var Yes= confirm('Goed zo! Klik op "OK" om naar de moeilijkere vragen te gaan. Als je deze vragen nog een keer wilt doen, klik dan op "annuleren"'); } if (Yes==true) { document.location="groep3_les2.htm"; } else if (Yes=false) { document.location="groep3_les1.htm"; } else if (form.eraf_vr_10.value == "") { alert('Je hebt geen antwoord ingevuld bij vraag 10 van "Oefening Eraf"'); document.vraageraf.eraf_vr_10.focus(); } else if(form.eraf_vr_10.value != 6) { alert('Helaas fout! Probeer het nog eens.'); document.vraageraf.eraf_vr_10.value = ""; document.vraageraf.eraf_vr_10.focus(); } } [/code:1:b1c3d69408] Nu ik toch een heel eind op weg ben, zou ik graag nog het één en ander weten. Hoe krijg ik het voor elkaar dat het aantal fouten en goede antwoorden geteld worden en deze vervolgens na de laatste vraag in een alert-box (of zo) getoond worden. Ook zou ik graag willen dat je bijvoorbeeld maar 2 keer per vraag mag proberen een antwoord te geven en dat je daarna perse naar de volgende vraag moet. Misschien vraag ik teveel, maar zou iemand mij een beetje op weg kunnen helpen??? Wederom bedankt! groetjes, Eric.
Link naar reactie
[quote:1207b7701f="Eric33"]Hoe krijg ik het voor elkaar dat het aantal fouten en goede antwoorden geteld worden en deze vervolgens na de laatste vraag in een alert-box (of zo) getoond worden. Ook zou ik graag willen dat je bijvoorbeeld maar 2 keer per vraag mag proberen een antwoord te geven en dat je daarna perse naar de volgende vraag moet. [/quote:1207b7701f]Als antwoord op beide vragen zou je het gebruik van cookies kunnen overwegen. Aangezien je telkens doorspringt naar een volgende pagina voor de volgende vraag zal je bij moeten houden wat de punten tot dan toe zijn voor die persoon (dit kan overigens ook in de querystring), maar daarnaast zal je ook data moeten bijhouden wanneer de bezoeker later terugkomt. Cookies kunnen natuurlijk wel verwijderd of gewijzigd worden door de bezoeker, dus waterdicht is het nooit, maar ik neem aan dat dat geen probleem is voor zo'n quizje. [url=http://www.codebase.nl/?command=viewcode&id=108]een voorbeeldje[/url] om cookies te "set-ten" en te "get-ten". p.s. kleine verbetering: location is een property van het window object, dus is het [url=http://www.devguru.com/Technologies/ecmascript/quickref/location.html]window.location[/url] ipv [i:1207b7701f]document.location[/i:1207b7701f]
Link naar reactie
Volgens mij is dat niet wat ik bedoel Annie. Ik heb in het totaal 20 vragen op een pagina staan. Nu zou ik ergens op de pagina een soort teller willen hebben die de goede en de fouten vragen bijhoudt. Bijv. x goed en x fout fout beantwoordt En ik wil niet dat er oneindig geantwoordt kan worden tot de vraag goed is. Na 2 keer een fout antwoordt moet het desbetreffende textveld readonly worden bijvoorbeeld + een melding dat de vraag 2 keer fout beantwoordt is en ze door moeten naar de volgende vraag. Kun je me daarbij helpen? Bedankt vast. Groetjes, Eric.
Link naar reactie
Je kan op je pagina wat globale variabelen bijhouden waarin je bijvoorbeeld het aantal pogingen zet en het aantal goede en/of foute antwoorden. Ik heb een klein testscriptje in elkaar gezet waarbij ik gebruik maak van deze techniek. Aarzel niet om wat te experimenteren met het voorbeeldje, dit is zo maar 1 mogelijkheid en zo zijn er nog vele andere manieren om het 'probleem' aan te pakken. Ik heb geprobeerd het zo simpel en overzichtelijk mogelijk te houden en overal wat uitleg te geven. Hopelijk is dit wat meer wat je bedoelt en kan je er ook wat mee. [code:1:586228edb7] <html> <head> <script type="text/javascript"> // definieer de goede antwoorden var antwoorden = new Array(); antwoorden[1] = 12; antwoorden[2] = 45; antwoorden[3] = 'appel'; // definieer de pogingenteller var pogingen = new Array(); // en zet deze ook meteen voor de volledigheid op 0 for (var i = 0; i < antwoorden.length; i++) pogingen[i] = 0; // teller voor de huidige vraag var huidigevraag = 1; // teller voor het aantal goede antwoorden var goed = 0; // functie voor controle van antwoorden function controleerAntwoord() { var vragenform = document.forms[0]; // hoog de pogingen teller op voor deze vraag pogingen[huidigevraag]++; // haal antwoord uit het formulier var antwoord = vragenform.elements["vraag" + huidigevraag].value; var volgendevraag = false; // spring naar de volgende vraag als het antwoord goed is // of als het antwoord fout is en dit de tweede poging is if (antwoord == antwoorden[huidigevraag]) { alert("goed zo!"); goed++; volgendevraag = true; } else { alert("het gegeven antwoord is helaas fout."); if (pogingen[huidigevraag] == 2) { volgendevraag = true; } } // als we naar de volgende vraag springen deactiveer dan even de vorige if (volgendevraag == true) { vragenform.elements["vraag" + huidigevraag].disabled = true; vragenform.elements["controle" + huidigevraag].disabled = true; huidigevraag++; } // werk het aantal goede en foute antwoorden bij vragenform.elements["goed"].value = goed; vragenform.elements["fout"].value = (huidigevraag - 1) - goed; // als we bij de laatste vraag aanbeland zijn spring dan door naar de volgende pagina // en zo niet geef dan de focus aan de vraag waar we zijn if (huidigevraag == antwoorden.length) { alert("klaar"); //window.location.href = 'eenpagina.html'; } else { vragenform.elements["vraag" + huidigevraag].focus(); } } </script> </head> <body> <form> vraag 1: Hoeveel appels passen er in 1 dozijn?<br /> <input type="text" name="vraag1" /> <input type="button" name="controle1" value="controleer antwoord" onclick="controleerAntwoord()" /><br /> vraag 2: Wat is de uitkomst van 5 maal 9?<br /> <input type="text" name="vraag2" /> <input type="button" name="controle2" value="controleer antwoord" onclick="controleerAntwoord()" /><br /> vraag 3: Vul het spreekwoord aan: "een ... valt niet ver van de boom"<br /> <input type="text" name="vraag3" /> <input type="button" name="controle3" value="controleer antwoord" onclick="controleerAntwoord()" /><br /> <br /> vragen goed: <input type="text" name="goed" readonly="readonly" value="0" /><br /> vragen fout: <input type="text" name="fout" readonly="readonly" value="0" /><br /> </form> </body> </html> [/code:1:586228edb7]
Link naar reactie
Hoi Annie en andere bezoekers, Het laatste script van je gemaakt hebt is inderdaad precies wat ik bedoel. Zou hieronder gebreurt voor mij in het Nederlands willen vertalen? for (var i = 0; i < antwoorden.length; i++) pogingen[i] = 0; Hoe kom je aan "vraag" en wat doet deze? var antwoord = vragenform.elements["vraag" + huidigevraag].value; Bedankt. Groetjes, Eric.
Link naar reactie
Hallo, Heeft iemand einig idee waarom de onderstaande code een fout geeft. De foutmelding is: Regel 88 Fout: 'elements[....]' is leeg of geen object. Volgende foutmelding ontstaat wanneer je op de volgende knop druk: Regel 47 Fout: 'elements[...].value' is leeg of geen object. kan iemand mij helpen? Groetjes, Eric. [code:1:4f0e1fbabf] <html> <head> <script type="text/javascript"> // definieer de goede antwoorden var antwoorden = new Array(); antwoorden[1] = 2; antwoorden[2] = 3; antwoorden[3] = 5; antwoorden[4] = 7; antwoorden[5] = 6; antwoorden[6] = 7; antwoorden[7] = 9; antwoorden[8] = 9; antwoorden[9] = 8; antwoorden[10] = 10; antwoorden[11] = 1; antwoorden[12] = 1; antwoorden[13] = 2; antwoorden[14] = 3; antwoorden[15] = 4; antwoorden[16] = 4; antwoorden[17] = 3; antwoorden[18] = 2; antwoorden[19] = 3; antwoorden[20] = 6; // definieer de pogingenteller var pogingen = new Array(); // en zet deze ook meteen voor de volledigheid op 0 for (var i = 0; i < antwoorden.length; i++) pogingen[i] = 0; // teller voor de huidige vraag var huidigevraag = 1; // teller voor het aantal goede antwoorden var goed = 0; // functie voor controle van antwoorden function controleerAntwoord() { var vragenform = document.forms[1]; // hoog de pogingen teller op voor deze vraag pogingen[huidigevraag]++; // haal antwoord uit het formulier var antwoord = vragenform.elements["vraag" + huidigevraag].value; var volgendevraag = false; // spring naar de volgende vraag als het antwoord goed is // of als het antwoord fout is en dit de tweede poging is if (antwoord == antwoorden[huidigevraag]) { alert("goed zo!"); goed++; volgendevraag = true; } else { alert("het gegeven antwoord is helaas fout."); vragenform.elements["vraag" + huidigevraag].value = ''; if (pogingen[huidigevraag] == 2) { volgendevraag = true; } } // als we naar de volgende vraag springen deactiveer dan even de vorige if (volgendevraag == true) { vragenform.elements["vraag" + huidigevraag].disabled = true; vragenform.elements["controle" + huidigevraag].disabled = true; huidigevraag++; } // werk het aantal goede en foute antwoorden bij vragenform.elements["goed"].value = goed; vragenform.elements["fout"].value = (huidigevraag - 1) - goed; // als we bij de laatste vraag aanbeland zijn spring dan door naar de volgende pagina // en zo niet geef dan de focus aan de vraag waar we zijn if (huidigevraag == antwoorden.length) { alert("klaar"); //window.location.href = 'eenpagina.html'; } else { vragenform.elements["vraag" + huidigevraag].focus(); } } function resetform() { window.location = "antwoorden_bijhouden.htm"; } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Rekenen voor beginners groep 3 Les 1</title> </head> <script language="javascript"> //de functie function bereken_onclick() { var getal1 = document.bereken.getal1.value var getal2 = document.bereken.getal2.value var optellen = 1*getal1 + 1*getal2 document.bereken.uitkomsterbij.value=optellen } function berekeneraf() { var getal1eraf = document.eraf.getal1eraf.value var getal2eraf = document.eraf.getal2eraf.value document.eraf.uitkomsteraf.value = getal1eraf-getal2eraf } </script> <body bgcolor="#FFFF00"> <table width="346" border="0" bordercolor="#000099"> <form name="bereken"> <tr> <td colspan="2" bgcolor="#66CC00"><strong>Hulp voor oefening "<font color="#FFFFFF">ERBIJ</font>":<br> Maar probeer het eerst zelf! Als je er echt niet<br> uitkomt mag je dit als hulp gebruiken. </strong></td> </tr> <tr> <td width="100" bgcolor="#FF0000"><font color="#FFFFFF">Voer getal in:</font></td> <td width="108" bgcolor="#0000CC"><input type="text" name="getal1" size="10"></td> </tr> <tr> <td bgcolor="#9933FF"><font color="#FFFFFF">Voer getal in:</font></td> <td bgcolor="#0000CC"><input type="text" name="getal2" size="10"> <font color="#FFFFFF"><strong>+</strong></font></td> </tr> <tr> <td bgcolor="#FF0000"><font color="#FFFFFF">De uitkomst is:</font></td> <td bgcolor="#0000CC"><input type="text" name="uitkomsterbij" size="10" readonly="" value="0"></td> </tr> <tr> <td bgcolor="#66CC00"><input type="reset" value="leeg maken" name="reset"></td> <td bgcolor="#66CC00"><input name="button" type="button" onClick="bereken_onclick()" value="Bereken"></td> </tr> </form> </table> <br /> <form> <table> <tr> <td colspan="4"><div align="center">"Oefening 1 Erbij"</div></td> <td width="50"></td> <td colspan="4"><div align="center">"Oefening 1 Eraf"</div></td> </tr> <tr> <td width="81">Vraag 1:</td> <td width="46">1 + 1 =</td> <td width="20"><input type="text" name="vraag1" size="2" width="20"></td> <td width="98"><input type="button" name="controle1" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td width="85">Vraag 11:</td> <td width="46">2 - 1 =</td> <td width="20"><input type="text" name="vraag11" size="2" width="20"></td> <td width="110"><input type="button" name="controle11" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>Vraag 2:</td > <td>1 + 2 =</td> <td><input type="text" name="vraag11" size="2" width="20"></td> <td><input type="button" name="controle11" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 12:</td> <td>3 - 2 =</td> <td><input type="text" name="vraag12" size="2" width="20"></td> <td><input type="button" name="controle12" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>Vraag 3:</td> <td>2 + 3 =</td> <td><input type="text" name="vraag3" size="2" width="20"></td> <td><input type="button" name="controle3" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 13:</td> <td>4 - 2 =</td> <td><input type="text" name="vraag13" size="2" width="20"></td> <td><input type="button" name="controle13" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td height="26">Vraag 4:</td> <td>3 + 4 =</td> <td><input type="text" name="vraag4" size="2" width="20"></td> <td><input type="button" name="controle4" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 14:</td> <td>5 - 2 =</td> <td><input type="text" name="vraag14" size="2" width="20"></td> <td><input type="button" name="controle14" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>Vraag 5:</td> <td>4 + 2 =</td> <td><input type="text" name="vraag5" size="2" width="20"></td> <td><input type="button" name="controle5" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 15:</td> <td>6 - 2 =</td> <td><input type="text" name="vraag15" size="2" width="20"></td> <td><input type="button" name="controle15" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>Vraag 6:</td> <td>5 + 2 =</td> <td><input type="text" name="vraag6" size="2" width="20"></td> <td><input type="button" name="controle6" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 16:</td> <td>7 - 3 =</td> <td><input type="text" name="vraag16" size="2" width="20"></td> <td><input type="button" name="controle16" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>Vraag 7:</td> <td>6 + 3=</td> <td><input type="text" name="vraag7" size="2" width="20"></td> <td><input type="button" name="controle7" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 17:</td> <td>8 - 5 =</td> <td><input type="text" name="vraag17" size="2" width="20"></td> <td><input type="button" name="controle17" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>Vraag 8:</td> <td>8 + 1=</td> <td><input type="text" name="vraag8" size="2" width="20"></td> <td><input type="button" name="controle8" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 18:</td> <td>8 - 6 =</td> <td><input type="text" name="vraag18" size="2" width="20"></td> <td><input type="button" name="controle18" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>Vraag 9:</td> <td>2 + 6=</td> <td><input type="text" name="vraag9" size="2" width="20"></td> <td><input type="button" name="controle9" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 19:</td> <td>9 - 6 =</td> <td><input type="text" name="vraag19" size="2" width="20"></td> <td><input type="button" name="controle19" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>Vraag 10:</td> <td>3 + 7 =</td> <td><input type="text" name="vraag10" size="2" width="20"></td> <td><input type="button" name="controle10" value="Goed of Fout?" onClick="controleerAntwoord()"></td> <td></td> <td>Vraag 20:</td> <td>10 - 4 =</td> <td><input type="text" name="vraag20" size="2" width="20"></td> <td><input type="button" name="controle20" value="Goed of Fout?" onClick="controleerAntwoord()"></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><font color="#33CC00">Vragen goed</font>:</td> <td><input type="text" name="goed" readonly="yes" value="0" size="5" width="20"></td> </tr> <tr> <td><font color="#FF0000">Vragen fout:</font></td> <td><input type="text" name="fout" readonly="yes" value="0" size="5" width="20"></td> </tr> <tr> <td colspan="4"><input type="button" name="reset form" value="Nog een keer?" onClick="resetform()"></td> </tr> </table> </form> </body> </html> [/code:1:4f0e1fbabf]
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...