Digi
alle pijlers
Controleer functie met html
donderdag 8 mei 2014 om 12:24
Hoi allemaal,
Ik wil voor mijn website een controleer functie maken. Alleen niet voor een email-formulier, maar voor een vraag. Het gaat namelijk zo: er staat een vraag (bijv. 2+4) en die moeten de mensen met het goede antwoord beantwoorden, in het invoerveld met dat als antwoord komen 6, maar als ze die vraag fout hebben dan moeten ze hem eerst goed beantwoorden. Maar hoe maak je zoiets in html?
Floris
Ik wil voor mijn website een controleer functie maken. Alleen niet voor een email-formulier, maar voor een vraag. Het gaat namelijk zo: er staat een vraag (bijv. 2+4) en die moeten de mensen met het goede antwoord beantwoorden, in het invoerveld met dat als antwoord komen 6, maar als ze die vraag fout hebben dan moeten ze hem eerst goed beantwoorden. Maar hoe maak je zoiets in html?
Floris
donderdag 8 mei 2014 om 14:25
Dit kan inderdaad niet met HTML
Persoonlijk zou ik voor JavaScript gaan omdat je dat op kunt nemen in een HTML pagina, en omdat je daarbij de pagina niet hoeft te verversen om te testen en het resultaat te tonen.
Wil je je code enigszins afschermen dat moet je de javascript code in een apart bestand plaatsen.
Persoonlijk zou ik voor JavaScript gaan omdat je dat op kunt nemen in een HTML pagina, en omdat je daarbij de pagina niet hoeft te verversen om te testen en het resultaat te tonen.
Wil je je code enigszins afschermen dat moet je de javascript code in een apart bestand plaatsen.
Niet geschoten is altijd mis
vrijdag 9 mei 2014 om 14:06
Ik heb geen idee in hoeverre het mogelijk is om code te plaatsen hier op het forum maar ik ga een poging wagen voor je.
Het is een HTML voorbeeld pagina, zodra je het invoerveld verlaat wordt het antwoord gecontroleerd.
Zowel CSS (opmaak) als JavaScript heb ik in de HTML pagina opgenomen om het niet nodeloos ingewikkeld te maken.
Dit is niet DE oplossing maar EEN oplossing.
Succes er mee.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
<meta charset="utf-8">
<title>Testprogramma</title>
<script type="text/javascript">
function controleer(item) {
var keuze = document.getElementById('antwoord_'+item.id.split('_')[1])
if (keuze.value == item.value)
alert('dat is het juiste antwoord. ');
else
alert('dat is een foutief antwoord. ');
}
</script>
<style>
.regel {
align : 0 auto 0;
width : 500px;
clear : both;
}
.links {
width : 220px;
float : left;
}
.rechts {
width : 220px;
float : left;
}
</style>
</head>
<body>
<form name="test" id="test">
<div class="regel">
<div class="links" id="links_1" >4 + 2 = </div>
<div class="rechts" id="rechts_1"><input type="text" id="veld_1" onBlur="controleer(this)"><input type="hidden" id="antwoord_1" value="6"></div>
</div>
<div class="regel">
<div class="links" id="links_2" >4 * 2 = </div>
<div class="rechts" id="rechts_2"><input type="text" id="veld_2" onBlur="controleer(this)"><input type="hidden" id="antwoord_2" value="8"></div>
</div>
<div class="regel">
<div class="links" id="links_3" >4 / 2 = </div>
<div class="rechts" id="rechts_3"><input type="text" id="veld_3" onBlur="controleer(this)"><input type="hidden" id="antwoord_3" value="2"></div>
</div>
</form>
<body>
</html>
Het is een HTML voorbeeld pagina, zodra je het invoerveld verlaat wordt het antwoord gecontroleerd.
Zowel CSS (opmaak) als JavaScript heb ik in de HTML pagina opgenomen om het niet nodeloos ingewikkeld te maken.
Dit is niet DE oplossing maar EEN oplossing.
Succes er mee.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
<meta charset="utf-8">
<title>Testprogramma</title>
<script type="text/javascript">
function controleer(item) {
var keuze = document.getElementById('antwoord_'+item.id.split('_')[1])
if (keuze.value == item.value)
alert('dat is het juiste antwoord. ');
else
alert('dat is een foutief antwoord. ');
}
</script>
<style>
.regel {
align : 0 auto 0;
width : 500px;
clear : both;
}
.links {
width : 220px;
float : left;
}
.rechts {
width : 220px;
float : left;
}
</style>
</head>
<body>
<form name="test" id="test">
<div class="regel">
<div class="links" id="links_1" >4 + 2 = </div>
<div class="rechts" id="rechts_1"><input type="text" id="veld_1" onBlur="controleer(this)"><input type="hidden" id="antwoord_1" value="6"></div>
</div>
<div class="regel">
<div class="links" id="links_2" >4 * 2 = </div>
<div class="rechts" id="rechts_2"><input type="text" id="veld_2" onBlur="controleer(this)"><input type="hidden" id="antwoord_2" value="8"></div>
</div>
<div class="regel">
<div class="links" id="links_3" >4 / 2 = </div>
<div class="rechts" id="rechts_3"><input type="text" id="veld_3" onBlur="controleer(this)"><input type="hidden" id="antwoord_3" value="2"></div>
</div>
</form>
<body>
</html>
Niet geschoten is altijd mis
