// ## xtd:  Ondersteunt de namen raden functie ##
// ## xtd2: Ondersteunt weergave antwoorden: * extra id "questionsection" in parent html file, 
// ##       * Dynamische opbouw aantalVragen Select tag (options tags van aantalVragen Select tag uit parent html file.)

var sVersion = '04c.15.00'; // deze ophogen, komt onderaan in pagina
var bgcolorDefault = '#FFFFFF';
var bgcolorOK      = '#33CC00';
var bNaamraden;      // Naamraden (true) of Plaatsaanwijzen (false)
var iNiveauItems;    // actuele aantal items zoals geselecteerd
var arrAlGevraagd;   // de gestelde vragen (true of false)
var arrAntwoorden;	 // de ingevoerde antwoorden (string met itemnr (aanwijzen) of naam (naamraden)).
var iAantalVragen;   // aantal te stellen vragen
var iItemNr;         // betreffend plaats in array met topo items
var iPunten;         // aantal goedbeantwoorde vragen
var iVragen;         // aantal gestelde vragen
var arrTopoItems = new Array();
var oaV; // select form aantalvragen tbv uitlezen/zetten waarden

function test() {
	var sTxtVraag;     // gebruikt voor naamraden of plaatsaanwijzen tekst 
	//alert('in test: iNiveauItems =' + iNiveauItems);
	//alert('in test: iAantalVragen =' + iAantalVragen);
	
	// ophogen waarden volgende vraag
	iVragen++;
	document.getElementById('vak').style.background = bgcolorDefault;
	document.getElementById('doorgaan').disabled = true;
	document.getElementById('txtAntwoord').innerHTML = "&nbsp;<BR>&nbsp;<BR>&nbsp;";
	document.getElementById('txtAantalVragen').innerHTML = "Aantal vragen: " + iVragen;
	document.getElementById('txtPunten').innerHTML = "Aantal punten: " + iPunten +
						(iVragen > 1 ? "&nbsp;&nbsp;&nbsp;<button id=\"antwoorden\" onclick=\"geefAntwoorden()\" title=\"Geef overzicht van je antwoorden\">&nbsp;tussenstand&nbsp;</button>" : "");

	// kies volgende plaats
	iItemNr = rand(iNiveauItems);
	// todo: nog een loopdetectie in plaatsen.
	while (arrAlGevraagd[iItemNr]) { // zoek volgende als al gevraagd
		iItemNr++;
		if (iItemNr > iNiveauItems) iItemNr = 1; // einde van array set naar begin
	}
	arrAlGevraagd[iItemNr] = true;
	//alert('iItemNr=' + iItemNr);

	// stel vraag
	sTxtVraag = '';
	//alert(bNaamraden);
	if (bNaamraden) {
		//alert(bNaamraden)
		sTxtVraag += 'Wat is nummer <B>' + arrTopoItems[iItemNr][1] + '</B>:<BR>';
		sTxtVraag += '<FORM name="naamraden" id="naamraden">';
		// ORG: sTxtVraag += '<INPUT name="plaatsnaam" type="text" size="35" maxlength="40">';
		sTxtVraag += '<INPUT name="plaatsnaam" id="plaatsnaam" type="text" size="35" maxlength="40" onKeyPress="return submitenter(this,event)">';
		sTxtVraag += '<button id="testnaam" onclick="return submitButton(this,event)" title="Controleer antwoord">&nbsp;?&nbsp;</button>';
		sTxtVraag += '</FORM>';
	} else {
		sTxtVraag += 'Wijs aan: <SPAN class="txtPlaats">' + arrTopoItems[iItemNr][0] + '</SPAN>';
	}
	document.getElementById('txtVraag').innerHTML = sTxtVraag;
	document.getElementById('opnieuw').disabled = false;
	if (bNaamraden) {
		// focus hieronder gaat alleen goed als ik een alert doe (maar altijd wel na een goed antwoord:-((;
		document.getElementById('naamraden').plaatsnaam.focus(); // werkt nog niet
	}
}

function validateInput(arg1) {
	// alleen valideren bij Aanwijzen
	// of Naamraden met als invoer een naam met een lengte > 1 (a..z onderdrukken)
	// Onderdrukt niet 'II' en hoger ) om te voorkomen dat namen met lengte 2 worden onderdrukt.
	// Onderdrukt ook input naamraden welke begint met een cijfer, zoals 9peize.

	suppressIntroText();
	if ( !bNaamraden 
			 || ( bNaamraden && isNaN(parseInt(arg1)) && arg1.length > 1 )
		 )
	{
		//alert('validateInput(' + arg1 + '), iItemNr=' + iItemNr); // test purposes
		if (document.getElementById('doorgaan').disabled == false) return;
		if (bNaamraden) {
			document.forms['naamraden'].plaatsnaam.disabled = true;
		}
		//alert('arg1 ==  arrTopoItems[' + iItemNr + '][1] \n' + arg1 + '    ==     ' + arrTopoItems[iItemNr][1]);
		arrAntwoorden[iItemNr] = arg1;
		if ( (bNaamraden && arg1 == arrTopoItems[iItemNr][0]) 
				|| (!bNaamraden && arg1 == arrTopoItems[iItemNr][1]) ){
			//alert('OK');
			document.getElementById('vak').style.background = bgcolorOK;
			document.getElementById('txtAntwoord').innerHTML = "<BR>Goed zo!<BR>&nbsp;";
			document.getElementById('txtVraag').innerHTML = "<B>" + arrTopoItems[iItemNr][0] + "</B>";
			iPunten++;
			document.getElementById('txtAantalVragen').innerHTML = "Aantal vragen: " + iVragen;
			document.getElementById('txtPunten').innerHTML = "Aantal punten: " + iPunten + 
				"&nbsp;&nbsp;&nbsp;<button id=\"antwoorden\" onclick=\"geefAntwoorden()\" title=\"Geef overzicht van je antwoorden\">&nbsp;tussenstand&nbsp;</button>";
			document.getElementById('doorgaan').disabled = false;
			document.getElementById('opnieuw').disabled = true;
		} else {
			var sFout = "Fout, dit was <br>";
			if (!bNaamraden) {
				//alert('NOK');
				var gevonden = false;
				// Uitzoeken welk array item werd geselecteerd ?
				//for (var n=0; (n <= iTotalItems && !gevonden); n++) {
				for (var n=0; (n <= arrAantalInNiveau[3] && !gevonden); n++) {
					if (arrTopoItems[n][1] == arg1) gevonden = true;
				}
				//alert('n=' + n);
				// todo: dubbele code opschonen in if lus :-(
				//alert(sFout);
				sFout += arrTopoItems[n-1][0];
			}	else {
				sFout += arrTopoItems[iItemNr][0];
			}
			//alert(sFout);
			sFout += "<br>Probeer volgende!";
			//alert(sFout);
			document.getElementById('txtAntwoord').innerHTML = sFout;
			document.getElementById('txtAantalVragen').innerHTML = "Aantal vragen: " + iVragen;
			document.getElementById('txtPunten').innerHTML = "Aantal punten: " + iPunten +
								"&nbsp;&nbsp;&nbsp;<button id=\"antwoorden\" onclick=\"geefAntwoorden()\" title=\"Geef overzicht van je antwoorden\">&nbsp;tussenstand&nbsp;</button>";
			document.getElementById('doorgaan').disabled = false;
			document.getElementById('opnieuw').disabled = false;
		}
		// controleer of max aantal vragen is gesteld (of aantal elementen op basis van niveau
		//iAantalVragen = 4; // moet worden uitgecommentarieerd is nl. alleen voor testdoeleinden!
    if (iVragen >= iAantalVragen || iVragen >=iNiveauItems ) {
			alert('Je hebt alle vragen beantwoord!');
			document.getElementById('txtAantalVragen').innerHTML = "Aantal vragen: " + 
				iVragen + ". Je bent klaar!";
			document.getElementById('doorgaan').disabled = true;
			document.getElementById('opnieuw').disabled = false;
			geefAntwoorden(); // laat de eindscore zien.
		}
		else {
			document.getElementById('doorgaan').focus();
		}
	}
}

// deze functie onderdrukt de inleidende tekst met keywords welke alleen tot de start van
// de test mag worden getoond ivm afkijken. Wordt aangeroepen in ValidateInput()
function suppressIntroText() {
	if (document.getElementById('introkeytekst').innerHTML.length > 0) {
		 document.getElementById('introkeytekst').innerHTML = '';
	}	
}

function setLevel(iLevel) {
	//var oaV = document.forms["faantalVragen"].aantalVragen;
	//alert('setLevel(' + iLevel + ')');
	iNiveauItems = arrAantalInNiveau[iLevel];
	//alert('1. iNiveauItems= ' + iNiveauItems  + ', iAantalVragen= ' + iAantalVragen);
	// pas eventueel het aantal vragen aan, want kan nooit meer zijn dan het aantal items bij dit niveau.
	if (iNiveauItems < iAantalVragen) {
		iAantalVragen = iNiveauItems;
		oaV.options[iLevel-1].selected=true;
	}
	//alert('2. iNiveauItems= ' + iNiveauItems  + ', iAantalVragen= ' + iAantalVragen);
}

// intiële startwaarden toekennen aan weergegeven waarden en onderliggende values
// http://docs.sun.com/source/816-6408-10/option.htm
function initAantalVragen() {
  //var oaV = document.forms["faantalVragen"].aantalVragen;

  var option0 = new Option(arrAantalInNiveau[1], arrAantalInNiveau[1]);
  var option1 = new Option(arrAantalInNiveau[2], arrAantalInNiveau[2]);
  var option2 = new Option(arrAantalInNiveau[3], arrAantalInNiveau[3]);
  // fyi: in geval van strings: var option0 = new Option("weergave", "value");
  
  for (var i=0; i < 3; i++) {
  	eval("oaV.options[i]=option" + i);
  	if (i==1) { oaV.options[i].selected=true;	}
  }
}

// Aanpassen aantalvragen variabele bij wijziging in select box.
function setAantalVragen(form) {
	//var oaV = document.forms["faantalVragen"].aantalVragen;
  //alert('setAantalVragen was ' + iAantalVragen);
  iAantalVragen = form.aantalVragen.options[form.aantalVragen.selectedIndex].value;
	// Alleen aantal vragen aanpassen als dat aantal ook past binnen het geselecteerde level.
	if (iNiveauItems < iAantalVragen) {
		iAantalVragen = iNiveauItems;
		alert('Je kunt niet meer vragen kiezen, dan binnen het geselecteerde niveau beschikbaar zijn.');

		// bepaal welke option tag hoort bij vastgestelde aantal vragen en die slecteren.
	  for (var i=0; i < 3; i++) {
	  	if (oaV.options[i].value == iAantalVragen) {
		  	//alert('option ' + i + ' wordt geslecteerd');
		  	oaV.options[i].selected=true;
			}
	  }
	}
  //alert('setAantalVragen is ' + iAantalVragen);
}

// presenteert overzicht van gestelde vragen en gegeven antwoorden
var strHtmlOrg; // globale variabele
function geefAntwoorden() {
	var strHtml = '';
	//alert(iVragen);
	strHtml += '<TABLE width="280" cellpadding="0"><TR><TD width="140">Gevraagd</TD>' +
    '<TD width="140">' +
		(bNaamraden ? 'Jouw antwoord' : 'Jij wees aan') + 
    '</TD><TD width="25">&nbsp;</TD></TR>';
	for (var i=1; i<=iNiveauItems ;i++ ) {
		if (arrAlGevraagd[i] && (arrAntwoorden[i] != null)) {
			strHtml += '<TR><TD class="answers">'
			strHtml += arrTopoItems[i][0] + ' ('+ arrTopoItems[i][1] + ')';
			strHtml += '</TD><TD class="answers">';
			//strHtml += (bNaamraden ? arrAntwoorden[i] : arrTopoItems[arrAntwoorden[i]][0] + ' ('+arrAntwoorden[i]+')');
			//strHtml += arrAntwoorden[i];
			strHtml += (bNaamraden ? arrAntwoorden[i] : findLocation(arrAntwoorden[i])+' ('+arrAntwoorden[i]+')' );
      strHtml += '</TD>';
			strHtml += '<TD align="center"><IMG src="img/smiley-';
			if (bNaamraden) {
				strHtml += (arrTopoItems[i][0] == arrAntwoorden[i] ? 'ok' : 'nok');			
      } else {
      	strHtml += (arrTopoItems[i][1] == arrAntwoorden[i] ? 'ok' : 'nok');
      }
			strHtml += '.gif">"';
      strHtml += '</TR>';
		}
	}
	
	strHtml += '<TR><TD colspan="3">'
  strHtml += '<BR><HR><BR><CENTER>';
	strHtml += '<button id="terug" onclick="terugNaarVragen()">Terug</button>&nbsp;&nbsp;';
	//strHtml += '<button id="stoppen" onclick="javascript:if (confirm(\'weet je zeker dat je wilt stoppen?\')) location.href=\'index.htm\';">Stoppen</button>';
	strHtml += '</CENTER></TD></TR>';

	//if (strHtml != '') writeConsole(strHtml);
	strHtml += '</TABLE>';

  strHtmlOrg = document.getElementById('questionsection').innerHTML;
  //alert(strHtml2);
  //document.getElementById('questionsection').innerHTML = '';
  //alert('leeg?');
  document.getElementById('questionsection').innerHTML = strHtml;
  //alert('en weer terug?');
	//document.getElementById('questionsection').innerHTML = strHtmlOrg;
  //writeConsole(strHtml);
}

function terugNaarVragen() {
  document.getElementById('questionsection').innerHTML = strHtmlOrg;
  strHtmlOrg = ''; // leegmaken niet meer nodig.
}


function init() {
	// reset alle tellers
	iPunten = 0;
	iVragen = 0;
	iItemNr = 0;
	arrAlGevraagd = new Array();
	arrAntwoorden = new Array();
	oaV = document.forms["faantalVragen"].aantalVragen;

	// bepaal het vraagtype (naamraden of aanwijzen)
	bNaamraden = ('naamraden' == getCheckedRadioButton(document.forms["fvraagtype"].vraagtype));

	// set aantalvragen per select optie.
	initAantalVragen();
		
	// bepaal het ingestelde aantal vragen
	iAantalVragen = getSelectedOption(document.forms["faantalVragen"].aantalVragen);
	//iAantalVragen = 5 // for test purposes only
	//alert('iAantalVragen selected = '+ iAantalVragen); // [dev]]


	// bepaal het ingestelde niveau en daarmee de lengte van de plaatsen array
	setLevel(getCheckedRadioButton(document.forms["level"].niveau));
	//setLevel(1); // for test purposes only

	// reset de array die aangeeft welke plaatsen al zijn gevraagd.
	for (var i=0; i<=iNiveauItems ;i++ ) {
		arrAlGevraagd[i] = false;
	}

	// reset tekst en buttons
	document.getElementById('txtAantalVragen').innerHTML = "Aantal vragen: " + arrAlGevraagd.length;
	document.getElementById('txtPunten').innerHTML = "Aantal punten: " + iPunten;
	document.getElementById('doorgaan').disabled = true;
	document.getElementById('opnieuw').disabled  = true;
	
	// start de test
	test();	
}


// ### ondersteunende functies ###


// bepaal welke optie en bijbehorende waarde in de select form is geselecteerd
function getSelectedOption(form) {
	//alert('return getSelectedOption= ' + form.options[form.selectedIndex].value);
	return form.options[form.selectedIndex].value;
}

// bepaal welke radiobutton en bijbehorende waarde is geselecteerd
function getCheckedRadioButton(radiobuttons) {
	var checkedButtonValue = '';
	for (var i=0; i < radiobuttons.length; i++) {
		if (radiobuttons[i].checked) {
			checkedButtonValue=radiobuttons[i].value;
			i = radiobuttons.length;
		}
	}
	//alert('checkedButtonValue=' + checkedButtonValue);
	return checkedButtonValue;
}

// afvangen van een enter in het invoer veld om te voorkomen dat MSIE het form submit
function submitenter(myfield,e) {
	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	else return true;

	if (keycode == 13) {
		validateInput(document.forms['naamraden'].plaatsnaam.value);
		return false;
	}
	else {
		 return true;
	}
}

// afvangen van een submit event waardoor firefox reload met ?formnaam.
function submitButton(myfield,e) {
		validateInput(document.forms['naamraden'].plaatsnaam.value);
		return false;
}

// deze functie retourneert de naam van de lokatie op basis van de ingevoerde lokatie-id
function findLocation(lokatieId) {
  //alert('lokatieId='+lokatieId);
  var lokatieNaam = '';
  for(var i=0; arrTopoItems[i][1] != lokatieId; i++ ) {
  }
  lokatieNaam = arrTopoItems[i][0];
  //alert('i='+i+', lokatieNaam='+lokatieNaam);
  return lokatieNaam;
}

<!--
// The Central Randomizer 1.3 (C) 1997 by Paul Houle (houle@msc.cornell.edu)
// See:  http://www.msc.cornell.edu/~houle/javascript/randomizer.html
// aanroepen door rand(waarde), met waarde als integer getal.
// zou ook moeten kunnen met: parseInt(multiplier*Math.random() + 1)
rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
        rnd.seed = (rnd.seed*9301+49297) % 233280;
        return rnd.seed/(233280.0);
}

function rand(number) {
        return Math.ceil(rnd()*number);
}
// end central randomizer. -->

// ###################################################
// ### ONDERSTAANDE wordt NIET gebruikt, is tbv layers

// ondersteunende functie om content naar een new window te schrijven
// http://www.javascripter.net/faq/writingt.htm
// http://www.irt.org/script/906.htm
function writeConsole(content) {
 top.consoleRef=window.open('','myconsole',
  'width=350,height=250'
   +',menubar=0'
   +',toolbar=0'
   +',status=0'
   +',scrollbars=1'
   +',resizable=1')
 top.consoleRef.document.writeln(
  '<html><head><title>Console</title></head>'
   +'<body bgcolor=white onLoad="self.focus()">'
   +content
   +'</body></html>'
 )
 top.consoleRef.document.close()
}

// functies t.b.v. de layer
// Returned de laag als object om daarna te kunnen bewerken, bijv.
// getStyle('mijnlayer').visibility='hidden';
function getStyle( layer ) {
	if( document.getElementById ) {
		return document.getElementById( layer ).style
	} else if( document.all ) {
		return document.all[layer].style
	} else {
		return document[layer]
	}
}

// schrijven van tekst naar de layer
// voorbeeld aanroep: writeLayerText('mijnlayer', 'Dit is een andere tekst')
function writeLayerText( layer,text ) {
	if( document.getElementById ) {
	  //alert('1');
		document.getElementById( layer ).innerHTML = text;
	} else if( document.all ) {
		document.all[layer].innerHTML = text;
	} else {
		document[layer].document.open();
		document[layer].document.write( text );
		document[layer].document.close();
	}
}