The following should work - excuse the Google translate translations ;)
http://jsfiddle.net/Tbg6G/
You needed to approach things so that there was an event (triggered by the user clicking the button) that would start the next question off. I'll post the code here in a second along with comments.
markup
<div id="partituur"></div>
<div id="antwoord"></div>
<div id="buttons">
<button type="button" id="derde">
Derde
</button>
<button type="button" id="vierde">
Vierde
</button>
<button type="button" id="keuze">
Keuze
</button>
</div>
javascript
/// first off wrap all our code in our own scope, this means we keep our vars
/// to ourselves and don't mess up anyone elses code - doesn't usually matter
/// with your own app, but good practice is good practice.
(function(){
/// might as well store an array with each answer, could be improved
/// by storing the question as well - so in the end you could give
/// the user a summary.
var antwoordenAnswers = [];
var antwordenPartituur = 0; /// store the score count
var antwoordVerwacht = null; /// keep a reference to the expected answer
/// reformatted your arrays to better fit with SO layout ;)
var vierdeNaamval = [
"bis", "durch", "für", "gegen",
"ohne", "um", "entlang"
],
derdeNaamval = [
"aus", "bei", "mit", "nach", "seit",
"von", "zu", "entgegen", "außer",
"gegenüber", "an...vorbei"
],
keuzevoorzetsel = [
"an", "auf", "hinter", "neben", "in",
"über", "unter", "vor", "zwischen"
];
/// added some translation vars for English people
/// out there (and to help me)
var accusative = vierdeNaamval,
dative = derdeNaamval,
choicePreposition = keuzevoorzetsel;
/// to aid with a random choice it's nice to work with arrays
var opties = [vierdeNaamval, derdeNaamval, keuzevoorzetsel];
var options = opties;
/// ... then we can use a function like this to grab a random item
var getRandomItem = function( a ){
return a[Math.floor((a.length)*Math.random())];
};
/// handle writing the question, as stated
/// by @AvlinWong - don't use document.write()
var vraagQuestion = function(){
/// use our simple get random item from array function
var a = getRandomItem( opties );
/// set the expected answer
if ( a === vierdeNaamval ) {
antwoordVerwacht = '3';
}
else if ( a === derdeNaamval ) {
antwoordVerwacht = '4';
}
else if ( a === keuzevoorzetsel ) {
antwoordVerwacht = 'k';
}
/// choose a random question item from the list
var b = getRandomItem( a );
/// target the output element and change it's HTML
document.getElementById('antwoord').innerHTML = b;
};
/// a simple function to better explain the act of updating the score
/// in the GUI/HTML.
var zettenPartituur = function( a ){
document.getElementById('partituur').innerHTML = a;
};
/// clickOnTheButton --- hope the translation is right :)
var klikOpDeKnop = function(e){
/// because we are relying on pure javascript, different browsers
/// have different event objects - srcElement for old IE, target
/// for everything else...
var a = e.target ? e.target : e.srcElement;
var corrigeren = null;
/// because each button has a unique id, we can do this
switch ( a.id ) {
case 'derde':
corrigeren = ( antwoordVerwacht == '3' );
break;
case 'vierde':
corrigeren = ( antwoordVerwacht == '4' );
break;
case 'keuze':
corrigeren = ( antwoordVerwacht == 'k' );
break;
}
/// if they were correct, tell them so and update score
if ( corrigeren ) {
alert('good!');
antwordenPartituur++;
}
/// otherwise tell them not and downgrade score :(
else {
alert('wrong!');
antwordenPartituur--;
}
/// collect the answer
antwoordenAnswers.push( corrigeren );
/// output the score to the user
zettenPartituur( antwordenPartituur );
/// because we are storing an array of answers it's easy
/// to tell how many there have been by .length of the array
if ( antwoordenAnswers.length > 10 ) {
/// all done!
alert("Hoera! Je bent klaar!! / You're done!!");
} else {
/// generate a new question
vraagQuestion();
}
}
/// using a simple window.onload will mean we know that we can
/// start messing around with the HTML on the page. This could
/// be improved using addEventListener/attachEvent but as this
/// is your own app with bespoke code you don't need to worry.
/// Unless you start using any plugins or third-party libraries.
window.onload = function(){
/// target the button wrapper in the HTML
var wikkelWrapper = document.getElementById('buttons'),
/// find all buttons within wrapper
knoppenButtons = wikkelWrapper.getElementsByTagName('button'),
i, l = knoppenButtons.length, a;
/// step each button found and apply an event listener using the
/// more accepted and improved addEventListener/attachEvent methods
/// there are many reasons as to why these are better to use
/// just search StackOverflow for reasons as to why :)
for(i=0; i<l; i++){
a = knoppenButtons[i];
/// for all good browsers
if ( a.addEventListener ) {
a.addEventListener('click', klikOpDeKnop);
}
/// for good ol' Internet Explorer
else if ( a.attachEvent ) {
a.attachEvent('onclick', klikOpDeKnop);
}
};
/// set the ball rolling / stelt u de bal aan het rollen
/// first set the output of the score
zettenPartituur(antwordenPartituur);
/// then set the first question
vraagQuestion();
}
})(); /// this construction can be confusing, it basically just creates
/// a new anonymous function and then executes it straight away. we are
/// using the anon function for it's scope so that we keep our variables
/// and methods separated from other code.
