Quiz vraag per pagina

Status
Niet open voor verdere reacties.

gast0446

Gebruiker
Lid geworden
29 dec 2009
Berichten
373
Hallo allemaal,

Ik heb een simpele javascript quiz.
Nu staat alle vragen nog gewoon onder elkaar als een formulier, maar ik zou dit graag zo willen hebben dat elke vraag een aparte pagina heeft.
Als ik nu een antwoord aanklik krijg ik direct de melding of het goed is of niet.
Ik wil dus het antwoord krijgen, en dan automatisch naar de volgende pagina gaan.

Hoe kan ik dit bereiken?

Alvast bedankt!

gast0446
 
Dat kan op twee manieren:

  • XHR - via een request haal je steeds de nieuwe quiz-vraag op en deze stop je netjes in een div. Voordeel is dat je server-side (PHP oid) je vragen en antwoorden kan controleren en dat je geen 'refresh' hebt als je op de 'controleer antwoord' knop drukt.
  • DOM manipulatie - het ziet er precies hetzelfde uit als hierboven, maar alles is Javascript. Er zit geen server-side kant aan vast. Voordeel is dat je het dus ook 'stand-alone' offline kan gebruiken.
  • Zonder fancy stuff - je werkt ook met een server-side script (PHP), maar zonder XHR. Nadeel is dat je een korte 'refresh' hebt (omdat een nieuwe pagina geladen wordt) maar het voordeel is dat het makkelijker is dan de opties hierboven - en zonder Javascript!

Dus, de vraag is eigenlijk: wil je een server-side script gebruiken (PHP ofzo) of wil je het liever in alleen maar Javascript doen?


:thumb:
 
Laatst bewerkt:
XHR lijkt mij wel wat omdat je dan geen refresh ziet.
Zou je met misschien willen uitleggen hoe ik hiermee verder moet?

gast0446
 
Laatst bewerkt:
Okay, maar dan moet je eerst eens even vertellen hoe je op het moment je server-side hebt werken (aka: post je huidige script eens). Het idee is zoiets:


qa.php:
een GET met vraag #, en een GET met antwoord. Je maakt dus steeds XHR's naar zoiets: qa.php?vraag=1&antwoord=tweeenveertig. Het idee is dat 'ie dan het antwoord op vraag 1 controleerd en als dat goed is, dat laat zien en de 2e vraag stelt. Het PHP gedeelte is het lastigst; het Javascript/HTML is maar zo'n 30 regeltjes lang denk ik zo.

Het makkelijkste lijkt me om je PHP bestand een JSON object te laten retourneren met daarin dingen als de vraag, of het vorige antwoord goed was, en hoeveel vragen er nog over zijn. Op deze manier kan je Javascriptje bijhouden hoeveel goed en/of fout is en dit ook nog netjes ergens neerzetten.
 
Oké dit is het script dat ik gebruik, het is niet echt heel erg indrukwekkend:

Code:
<script language="JavaScript">

<!-- Begin

var ans = new Array;

var done = new Array;

var score = 0;

ans[1] = "a";
ans[2] = "c";
ans[3] = "b";
ans[4] = "c";
ans[5] = "c";
ans[6] = "d";
ans[7] = "b";
ans[8] = "a";
ans[9] = "c";
ans[10] = "a";





function Engine(question, answer) {

if (answer != ans[question]) {

if (!done[question]) {

done[question] = -1;

alert("Fout Uw score is nu " + score + "  Het juiste antwoord is: " + ans[question]); 

}

else {

alert("U heeft deze vraag al beantwoord!");

   }

}

else {

if (!done[question]) {

done[question] = -1;

score++;

alert("Prima!! Uw score is nu " + score );

}

else {		

alert("U heeft deze vraag al beantwoord !");

      }

   }

}

 

 

function NextLevel () 

{

if (score ==10) {

alert("Je score is " + score + " goed van de 10 vragen  Gefeliciteerd  je hebt geen enkel foutje gemaakt!")(done=[]); 

}

 

if (score >= 5 && score <=10) {

alert("Je score is " + score + " goed van de 10 vragen  je wist (bijna) alles!")(done=[]);

}


else {

alert("Je score is " + score + " goed van de 10 vragen  Jammer, bekijk mijn site nog wat beter")(done=[]);

   }

}

// End -->

</script>

 

<font size="3" face="tekton pro"> 

<h1>Zeilen Quiz</h1>
Hier kun je jou kennis van zeilen testen.
<br>
Alle antwoorden staan op de site, dus als je iets fout hebt kun je het zo opzoeken in het zeilwoordenboek.
</font>

 

<noscript>JavaScript is <b><i>disabled</b></i>.  Get Netscape 3.0 or turn it on!</noscript>

<hr noshade>

<form>
<font size="3" face="tekton pro"> 

<b>1. Waarvoor gebruik je de grootschoot?</b><br>
<input type=radio name="q1" value="a" onClick="Engine(1, this.value)">a) Om je het zeil aantrekken en laten vieren<br>
<input type=radio name="q1" value="b" onClick="Engine(1, this.value)">b) Om je grootzeil te hijsen<br>
<input type=radio name="q1" value="c" onClick="Engine(1, this.value)">c) Om de fok te hijsen<br>
<input type=radio name="q1" value="d" onClick="Engine(1, this.value)">d) Niks, want het is een touwtje voor de sier<p>
<img src="/quiz/images/harpje.jpg" height="220" width="137">
<br>
<b>2. Wat zie je op het plaatje hierboven?</b><br>
<input type=radio name="q2" value="a" onClick="Engine(2, this.value)">a) Een dol<br>
<input type=radio name="q2" value="b" onClick="Engine(2, this.value)">b) Een blok<br>
<input type=radio name="q2" value="c" onClick="Engine(2, this.value)">c) Een harpje<br>
<input type=radio name="q2" value="d" onClick="Engine(2, this.value)">d) De voorstag<p>
<b>3. Waarmee hijs je het grootzeil?</b><br>
<input type=radio name="q3" value="a" onClick="Engine(3, this.value)">a) Met het marrellijntje<br>
<input type=radio name="q3" value="b" onClick="Engine(3, this.value)">b) Met piekeval en de klauwval<br>
<input type=radio name="q3" value="c" onClick="Engine(3, this.value)">c) Met het rijglijntje<br>
<input type=radio name="q3" value="d" onClick="Engine(3, this.value)">d) Met de kraamlijn <p>
<b>4. Op welke koers kan een zeilboot niet varen?</b><br>
<input type=radio name="q4" value="a" onClick="Engine(4, this.value)">a) Voor de wind<br>
<input type=radio name="q4" value="b" onClick="Engine(4, this.value)">b) Naast de wind<br>
<input type=radio name="q4" value="c" onClick="Engine(4, this.value)">c) In de wind (tegen de wind in)<br>
<input type=radio name="q4" value="d" onClick="Engine(4, this.value)">d) Aan de wind<p>
<b>5. Wat is de afkoring van CWO?</b><br>
<input type=radio name="q5" value="a" onClick="Engine(5, this.value)">a) Centrale water opslag<br>
<input type=radio name="q5" value="b" onClick="Engine(5, this.value)">b) Culturele water organistatie<br>
<input type=radio name="q5" value="c" onClick="Engine(5, this.value)">c) Comissie watersport opleiding<br>
<input type=radio name="q5" value="d" onClick="Engine(5, this.value)">d) Het is gewoon een naam en geen afkorting<p>
<b>6. Wat is een kikker?</b><br>
<input type=radio name="q6" value="a" onClick="Engine(6, this.value)">a) Een lijn voor je zeilboot<br>
<input type=radio name="q6" value="b" onClick="Engine(6, this.value)">b) Een knoop<br>
<input type=radio name="q6" value="c" onClick="Engine(6, this.value)">c) Gewoon zo een groen beest<br>
<input type=radio name="q6" value="d" onClick="Engine(6, this.value)">d) Iets waar je bijvoorbeeld je vallen aan vast maakt<p>
<b>7. Waar zorgt het zwaard voor in je boot?</b><br>
<input type=radio name="q7" value="a" onClick="Engine(7, this.value)">a) Het zwaard regeld de snelheid<br>
<input type=radio name="q7" value="b" onClick="Engine(7, this.value)">b) Door het zwaard schommeld de boot minder<br>
<input type=radio name="q7" value="c" onClick="Engine(7, this.value)">c) Door het zwaard ligt je boot dieper in het water<br>
<input type=radio name="q7" value="d" onClick="Engine(7, this.value)">d)Het zwaard stuurt je boot<p>
<b>8. Wat is verleieren?</b><br>
<input type=radio name="q8" value="a" onClick="Engine(8, this.value)">a) Als je te weinig snelheid hebt drijf je de foute kant op<br>
<input type=radio name="q8" value="b" onClick="Engine(8, this.value)">b) Een ander woord voor zinken<br>
<input type=radio name="q8" value="c" onClick="Engine(8, this.value)">c) Een zeilmanoeuvres<br>
<input type=radio name="q8" value="d" onClick="Engine(8, this.value)">d) Achteruit zeilen<p>
<b>9. Wat is de helmstok</b><br>
<input type=radio name="q9" value="a" onClick="Engine(9, this.value)">a) Met de helmstok kun je een vlag hijsen<br>
<input type=radio name="q9" value="b" onClick="Engine(9, this.value)">b)Met de helmstok doe je het zwaard omhoog en omlaag<br>
<input type=radio name="q9" value="c" onClick="Engine(9, this.value)">c) Met de helmstok kun je het roer bewegen, dus de boot sturen<br>
<input type=radio name="q9" value="d" onClick="Engine(9, this.value)">d) De helmstok is de rem van een zeilboot<p>
<b>10. Wat is een ploffer</b><br>
<input type=radio name="q10" value="a" onClick="Engine(10, this.value)">a) Een andere naam voor een automatich zwemvest<br>
<input type=radio name="q10" value="b" onClick="Engine(10, this.value)">b) Een wil die ontploft<br>
<input type=radio name="q10" value="c" onClick="Engine(10, this.value)">c) Iets wat je kunt gooien naar andere boten<br>
<input type=radio name="q10" value="d" onClick="Engine(10, this.value)">d) Een oud zeiljacht<p>
<br>
</font>
<center>
<input type=button onClick="NextLevel()" value="Controleer de antwoorden">
</center>
</form>

Nog even een paar vraagjes:
Wat is een JSON object? Nu controleerd javascript of de vraag goed/fout is en houd hij de score bij.
Is dat goed genoeg?
En wat bedoel je overigens met server-side?
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan