StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The following should work - excuse the Google translate translations ;)</p> <p><a href="http://jsfiddle.net/Tbg6G/" rel="nofollow">http://jsfiddle.net/Tbg6G/</a></p> <p>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.</p> <h3>markup</h3> <pre><code><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> </code></pre> <h3>javascript</h3> <pre><code>/// 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. </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload