/*
 * Matching quiz script copyright 2008 by 
 * Jordan Hiller <jhiller@onlinetesting.net>. 
 *
 * Usage:
 * <script type="text/javascript" src="matchingquiz.js"></script>
 * <script type="text/javascript">
 * 	var quiz = new MatchingQuiz();
 * 	quiz.addQuestion(
 * 		"Term",
 * 		"Definition",
 * 		"Explanation"
 * 	);
 *
 *      // Must be listed highest to lowest score
 *	quiz.addRanking(numCorrect, "You scored an A");
 *
 * 	quiz.display();
 * </script>
 */


function quizAddQuestion(term, definition, explanation) {
	this.terms.push(term);
	this.definitions.push(definition);
	this.explanations.push(explanation);
	this.numQuestions++;
}


function quizAddRanking(score, comment) {
	this.rankingScores.push(score);
	this.rankingComments.push(comment);
}


function quizDisplay() {

	// Randomize the order of terms
	for(var i=0; i<this.numQuestions; i++) {
		this.order[i] = i;
	}

	for(var i=0; i<this.numQuestions; i++) {
		var rand = Math.floor(Math.random() * this.numQuestions);

		// Swap
		var tmp = this.order[i];
		this.order[i] = this.order[rand];
		this.order[rand] = tmp;
	}

	this.container = document.getElementById('quizContainer');
	var table = document.createElement('TABLE');
	var tbody = document.createElement('TBODY');
	
	for(var q=0; q < this.numQuestions; q++) {
		var cell1 = document.createElement('TD');
		var row = document.createElement('TR');
		
		// Term: Modified by this.order
		var input = document.createElement('INPUT');
		input.type = 'text';
		input.size = 1;
		input.maxLength = 1;
		input.name = q;
		input.style.marginRight = "2px";
		cell1.appendChild(input);
		this.formElements.push(input);
		
		cell1.appendChild(document.createTextNode(this.terms[this.order[q]]));
		
		// Definition: Always in the same order
		var cell2 = document.createElement('TD');
		cell2.style.paddingLeft = "20px";
		var letter = quizNumberToLetter(q);
		cell2.appendChild(document.createTextNode(letter + ". " + this.definitions[q]));

		row.appendChild(cell1);
		row.appendChild(cell2);
		tbody.appendChild(row);
	}
	
	table.appendChild(tbody);
	this.container.appendChild(table);

	var button = document.createElement('INPUT');
	button.type = 'button';
	button.value = 'Submit';
	
	var self = this; // variable for the closure below to work
	button.onclick = function() { self.quizSubmit() };
	
	this.container.appendChild(button);

	//document.body.appendChild(this.container);
}


function quizSubmit() {
	quizClearChildren(this.container);
	
	var instruction = document.createElement('P');
	instruction.style.fontWeight = "bold";
	instruction.appendChild(document.createTextNode("Scroll Down For Quiz Score"));
	this.container.appendChild(instruction);
		
	var letters = "abcdefghijklmnopqrstuvwxyz";
	var numCorrect = 0;

	for(var q=0; q < this.numQuestions; q++) {
		var realQ = this.order[q];
		
		var responseLetter = this.formElements[q].value;
		var responseIndex = (responseLetter == "") ? -1 : letters.indexOf(responseLetter);
		var isCorrect = (responseIndex == realQ);
		if(isCorrect) numCorrect++;
		
		var responseText;
		if(responseIndex < 0 || responseIndex >= this.numQuestions) {
			responseText = "(no response)";

		} else {
			responseText = quizNumberToLetter(responseIndex)
				+ ". " + this.definitions[responseIndex];
		}
		
		/*
		var img = document.createElement('IMG');
		img.src = "http://www.onlinetesting.net/images/" + ((isCorrect) ? "true.gif" : "false.gif");
		img.alt = "";
		img.style.float = "left";
		this.container.appendChild(img);*/
		
		var term = document.createElement('DIV');
		term.style.fontWeight = 'bold';
		term.appendChild(document.createTextNode(this.terms[realQ]));
		this.container.appendChild(term);
		
		var correctAnswer = document.createElement('DIV');
		correctAnswer.appendChild(document.createTextNode("The correct response was " + 
			quizNumberToLetter(realQ) + ". " + this.definitions[realQ]));
		this.container.appendChild(correctAnswer);
		
		var response = document.createElement('DIV');
		response.appendChild(document.createTextNode("You chose "));
		
		var responseInner = document.createElement('SPAN');
		responseInner.appendChild(document.createTextNode(responseText));
		responseInner.style.color = (isCorrect) ? "#00AA00" : "red";
		response.appendChild(responseInner);
		
		this.container.appendChild(response);
		
		var explanation = document.createElement('DIV');
		//explanation.appendChild(document.createTextNode(this.explanations[realQ]));
		explanation.innerHTML = this.explanations[realQ];
		this.container.appendChild(explanation);
		
		var hr = document.createElement('HR');
		hr.style.width = "100px";
		hr.align = "left";
		this.container.appendChild(hr);
	}
	
	var score = document.createElement('P');
	score.style.fontWeight = "bold";
	score.style.color = "blue";
	var percent = Math.round(numCorrect / this.numQuestions * 100);
	var scoreText = "You answered "+numCorrect+" of "+this.numQuestions+" questions correct ("+percent+"%).";
	score.appendChild(document.createTextNode(scoreText));
	this.container.appendChild(score);
	
	// Put their score in a group
	if(this.rankingScores.length > 0) {
		for(var i=0; i < this.rankingScores.length; i++) {
			if(percent >= this.rankingScores[i]) {
				// Found a match
				var rank = document.createElement('P');
				rank.style.fontWeight = "bold";
				rank.style.color = "blue";
				rank.appendChild(document.createTextNode(this.rankingComments[i]));
				this.container.appendChild(rank);
				break;
			}
		}
	}
	
	var quizFinished = document.getElementById("quizFinished");
	if(quizFinished) {
		quizFinished.style.display = "block";
	}
}


function quizClearChildren(obj) {
	while(obj.hasChildNodes())
		obj.removeChild(obj.firstChild);
}


function quizNumberToLetter(num) {
	return String.fromCharCode(97 + num);
}

// The quiz object
function MatchingQuiz() {
	// Properties
	this.terms = new Array();
	this.definitions = new Array();
	this.explanations = new Array();
	this.numQuestions = 0;
	
	this.rankingScores = new Array();
	this.rankingComments = new Array();

	this.order = new Array();
	
	this.formElements = new Array();
	this.container = null;
	
	// Methods
	this.addQuestion = quizAddQuestion;
	this.addRanking = quizAddRanking;
	this.display = quizDisplay;
	this.quizSubmit = quizSubmit;
}