Quiz

Status
Niet open voor verdere reacties.
J

Justme135

Nieuwe gebruiker
Lid geworden
26 mrt 2010
Berichten
3
Hey

Ik ben bezig met een zelfstudiepakket voor javascript. In het boek staan uiteraard een aantal opdrachten. Voorlopig ben ik in staat geweest om alle javascript opdrachten te maken behalve deze voor DHML. Ik weet niet hoe ik hieraan moet beginnen. De opdracht in het boek luidt als volgt.


In een webpagina verschijnt een kwisje dat bestaat uit 4 vragen. Die vragen zijn te bepalen naar keuze, en per vraag zijn er 5 punten te verdienen. De gebruiker kan het antwoord van elke vraag ingeven in een tekstvak. De gebruiker kan bij elke vraag 4 extra hints vragen, door op een knop “Toon extra hint” te klikken. Er wordt dan een extra hint tussengevoegd onder de vraag en boven het tekstvak voor het antwoord.

Per hint gaat er wel één punt af, dit wil zeggen : indien de gebruiker het goede antwoord ingeeft zonder hint, verdient hij 5 punten, heeft hij één hint nodig, dan krijgt hij nog 4 punten, bij twee hints zijn dat 3 punten, enzovoort. Bij een fout antwoord krijgt de gebruiker uiteraard geen punten. Ontwerp je kwisje zo dat de gebruiker slechts één keer een antwoord kan ingeven.
Wanneer de vier vragen beantwoord zijn, wordt het totale puntenaantal van de kwis weergegeven in een alert-venstertje.

Deze opdracht in mijn boek gaat wel degelijk over DHTML en niet over gewone. :)

Alle hulp zou welkom zijn.
 
Justme135 zei:
Deze opdracht in mijn boek gaat wel degelijk over DHTML en niet over gewone. :)
Klik om te vergroten...

Van Wikipedia:
Dynamic HTML of DHTML is een term die gebruikt wordt voor interactieve webpagina's. Deze pagina's maken gebruik van een combinatie van HTML, een scripttaal in de browser zoals JavaScript, en CSS.
Klik om te vergroten...
en
DHTML is geen officiële standaard, maar een marketingterm die gebruikt werd bij de introductie van de 4.x browserversies door Netscape en Microsoft. Eerdere browsers dan de 4.x-versies van Netscape en Microsoft Internet Explorer hadden ook (zeer) beperkte mogelijkheden om een webpagina dynamisch te maken. Om dynamische onderdelen in een webpagina in te bouwen werd vooral gebruikgemaakt van java-applets.
Klik om te vergroten...

Met andere woorden, je maakt gebruik van gewone HTML in combinatie met Javascript :).


Wat betreft je vraag, je begrijpt wel dat wij het niet voor je gaan maken. Dus: wat heb je al gemaakt en waar loop je precies vast? Dan kunnen we je helpen.
 
probleem

Supersnail zei:
Van Wikipedia:

en


Met andere woorden, je maakt gebruik van gewone HTML in combinatie met Javascript :).


Wat betreft je vraag, je begrijpt wel dat wij het niet voor je gaan maken. Dus: wat heb je al gemaakt en waar loop je precies vast? Dan kunnen we je helpen.
Klik om te vergroten...

Dat is net het probleem ik weet niet goed hoe ik eraan moet beginnen.
 
Tussenstand

Ondertussen heb ik dit al
[js]
<script language="JavaScript">


<!-- Begin
// Aantal vragen
var vraag = 4;



// Aantal vragen in antwoordveld
var answers = new Array(4);

// Antwoorden

answers[0] = "1940";
answers[1] = "Beurscrash";
answers[2] = "Werk aanbieden";
answers[3] = "Auschwitz";

// Hint
hint 1 = 19..
hint 2 = einde 1945
hint 3 = 5 jaar
hint 4 = führer

hint 5 = beurs
hint 6 = Amerika
hint 7 = Wall street
hint 8 = vallende beleggers

hint 9 = crisis anno 2009-2010 België
hint 10 = jobmarkt
hint 11 = werklozen
hint 12 = ontslagen

hint 13 = Zwitserland
hint 14 = Oscar Schindler
hint 15 = vergassing miljoenen Joden
hint 16 = laatste halte


</script>


</head>

<body>



<h3>Quiz</h3>
<form name="quiz">

<table >
<tr>
<td>
1. Wanneer begon de 2e wereldoorlog?
<P><INPUT TYPE="text" NAME="naam" VALUE=""> </P>

2. Wat was er net gebeurd in Amerika voor het begin van de 2e wereldoorlog?
<P><INPUT TYPE="text" NAME="naam" VALUE=""> </P>

3. Wat was de rol van de Deutsche Führer hierin?
<P><INPUT TYPE="text" NAME="naam" VALUE=""> </P>

4. Welk is het bekendste kamp dat gebruikt werd ten tijde van WOII?
<P><INPUT TYPE="text" NAME="naam" VALUE=""> </P>

</td>

<td align="center"><br><br><input type="button" value="Bereken score" onClick="getScore(this.form)">
<input type="button" value="Toon extra hint" onClick="hint(this.form)">
<input type="reset" value="Opnieuw beginnen"><br><br><p> Uw Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br></td>
</tr>

</table>
</form>
[/js]


Hoe ik de berekening van die punten minder door het vragen van een hint enz... en hoe ik dat in een layer moet gieten daarbij kan ik nog wel wat hulp gebruiken.
Het bestand zit in bijlage indien je het eens van dichterbij wil bekijken.
 

Bijlagen

Laatst bewerkt door een moderator:
Allereerst even een opmerking over je "Toon extra hint"-knop. Het lastige hieraan is dat je 1 knop hebt, dus weet je niet voor welke vraag er een hint gegeven moet worden. Als je bij elke vraag een aparte "hint"-knop hebt, met een unieke "name" weet je dat wel.
Verder zou ik de hints in een 2-dimesionale array zetten.

Voor het geven van punten en het verminderen daarvan bij het vragen om een hint is het, denk ik, het makkelijkste om een array bij te houden, met voor elke vraag het aantal punten dat nog verdient kan worden (initieel staat dit dus vol 5'en). Als er om een hint gevraagd wordt moet je, aan de hand van de "name" van de knop, uitzoeken om welke vraag het gaat en op die positie in de array 1 punt aftrekken.

Met je vraag over de layer bedoel je hoe je de hint kan tonen? Dat kan op twee manieren. De eerste manier is alle hints, elke in een aparte div/span, al op de pagina zetten maar verbergen met 'style.visibility = "hidden"' of 'style.display = "none"'. Met Javascript kan je deze dan tonen.
Een andere manier is om onder elke vraag een lege div te zetten. Dan kan je met Javascript, een voor een, de hints toevoegen met "innerHTML" en "+=".

[edit]Overigens is
HTML: 
<script language="JavaScript">
verouderd. Tegenwoordig gebruik je hiervoor
HTML: 
<script type="text/javascript">
[/edit]
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan