// javascript stuff for the admin systems quiz
// by Chris Pappas <chris_pappas@umanitoba.ca>
// 2007-10-24
//==============================================================================

var fileName;	// global xml file name

var options;
var question;
var image;
var answer;

var replace_buttons = false;

// set the default custom buttons
var imgTrue = 'buttons/true.png';
var imgFalse = 'buttons/false.png';

var radio_container = '';

function quiz_startup(xmlFileName) {
	
	fileName = xmlFileName;
	
	options = new Array();
	question = '';
	image = '';
	answer = '';
	
	var xml = loadXML();
	
	// if the xml couldn't be loaded then just exit
	if (xml == null) {
		return false;
	}
	
	var buttons = xml.getElementsByTagName('buttons')[0];
	replace_buttons = ((buttons != null && buttons.getAttribute('replace') == 'true') ? true : false);

	displayQuiz(xml);
	
	if (replace_buttons) {
		t = buttons.getElementsByTagName('imgTrue')[0].childNodes[0].nodeValue;
		f = buttons.getElementsByTagName('imgFalse')[0].childNodes[0].nodeValue;
		
		if (t != '') imgTrue = buttons.getElementsByTagName('imgTrue')[0].childNodes[0].nodeValue;
		if (f != '') imgFalse = buttons.getElementsByTagName('imgFalse')[0].childNodes[0].nodeValue;
		radio_init();
	}
	
}

// returns null if opening the file failed, xmlDoc if successful
function loadXML() {
	
	var xmlDoc = null;
	
	if (window.ActiveXObject) { 	// code for IE
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	} else if (document.implementation && document.implementation.createDocument) { 	// code for Mozilla, Firefox, Opera, etc.
		xmlDoc = document.implementation.createDocument("","",null);
	} else {
		alert('Your browser doesn\'t support javascript with XML');
	}

	xmlDoc.async = false;
	xmlDoc.load(fileName);

	return xmlDoc;
}

function displayQuiz(xml) {

	var items = xml.getElementsByTagName('item');
	
	var item_num = Math.floor(Math.random() * items.length);
	
	// if the item num is out of range default to 0
	if (item_num >= items.length || item_num < 0) {
		item_num = 0;
	}
	
	var item = items[item_num];
	
	// get the elements of this question
	question = item.getElementsByTagName('question')[0].childNodes[0].nodeValue;
	answer = item.getElementsByTagName('answer')[0].childNodes[0].nodeValue;

	// the available images
	var imgs = item.getElementsByTagName('images')[0].getElementsByTagName('image');
	image_num = Math.floor(Math.random() * imgs.length);
	image = imgs[image_num].childNodes[0].nodeValue;
	
	// the available options
	var opts = item.getElementsByTagName('options')[0].getElementsByTagName('option');
	for (x = 0; x < opts.length; x++) {
		var opt = new Array();

		opt[0] = opts[x].childNodes[0].nodeValue;
		var a = opts[x].getAttribute('correct');
		opt[1] = ((a == 'yes' || a == 'true' || a == '1') ? true : false);
		
		// put the option into the answers array
		options[x] = opt;
	}
	
	// now we need to actually create the html and the options
	// our radio buttons will all have an onClick method that will evaluate 
	// whether or not this was the correct response
	
	var out = '';
	out += '<table cellspacing="0" cellpadding="0" border="0" class="quiz-table">\n';
	out += '<tr>\n\t<td class="image" align="center"><img src="' + image + '" /></td>\n</tr>\n';
	out += '<tr>\n\t<td class="question">' + question + '</td>\n</tr>\n';
	out += '<tr>\n\t<td class="options" id="options">\n';
	out += '\t\t<div id="answers">\n';
	
	for (i = 0; i < options.length; i++) {
		ans = 'answer' + i;
		label = options[i][0];
		value = options[i][1];
		
		if (replace_buttons) {
			radio_container = 'answers';
			out += '\t\t\t<div class="option" name="option" id="option_'+i+'" onClick="updateRadios(\'option_'+i+'\'); checkAnswer(\''+value+'\');">\n';
			out += '\t\t\t\t<img src="' + imgFalse + '" id="option_img_'+i+'" align="absbottom" />\n';
			out += '\t\t\t\t<span>' + label + '</span>\n';
			out += '\t\t\t</div>';
		} else {
			onClick = " onClick=\"checkAnswer('" + value + "');\"";
			out += '\t\t\t<div><input type="radio" name="question" id="' + ans + '" value="' + value + '" ' + onClick + '/><label for="' + ans + '">' + label + '</label></div>\n';
		}

	}

	out += '\t\t</div>\n';
	out += '\t\t<div id="response"></div>\n';
	out += '\t</td>\n';
	out += '</tr>\n</table>\n';
	
	document.getElementById('quiz-container').innerHTML = out;
	
}

function checkAnswer(value, id) {

	if (!window.ActiveXObject) { 	// code for FF
		response = document.getElementById('response');
	}
	
	if (value == 'true') {
		
//		document.getElementById('answers').style.display = 'none';
		
		response.style.display = 'block';
		
		out = '';
		out += '<i>Correct!</i><br />\n' + answer + '<br />\n';
		out += '<div style="padding-top: 0.5em; cursor: pointer; color: blue; text-decoration: none;" onClick="quiz_startup(\'' + fileName + '\');">Play again!</div>';
		response.innerHTML = out;

	} else {
		
		// unhide the response div element
		response.style.display = 'block';
		response.innerHTML = '<i>Incorrect, please try again!</i>';
	}
}

function radio_init() {
	
	var c = document.getElementById(radio_container);
	
	if (c != null) {
		var nodes = c.childNodes;
	
		for (var x = 0; x < nodes.length; x++) {
			var node = nodes[x];
		
			if (node.nodeType != 3) {
				node.getElementsByTagName('img')[0].src = imgFalse;
			}
		}
		return true;
	} else {
		alert('init:\nInvalid radio_container: ' + radio_container);
	}
}

function updateRadios(id) {
	
	var c = document.getElementById(radio_container);

	if (c != null) {
		var nodes = c.childNodes;

		for (var x = 0; x < nodes.length; x++) {
	
			var node = nodes[x];
		
			if (node.nodeType != 3) {	// text node
				if (node.id == id) {
					node.getElementsByTagName('img')[0].src = imgTrue;
				} else {
					node.getElementsByTagName('img')[0].src = imgFalse;
				}
			}
		}
		return true;
	} else {
		alert('update:\nInvalid radio_container: ' + radio_container);
	}
}