Newer
Older
Import / web / www.xiaofrog.com / content / learning-chinese.js

var initRequest = null;
var waitingForNewQuestion = true;


function newQuestion()
{
    initRequest = null;
    if (window.XMLHttpRequest)
        initRequest = new XMLHttpRequest();
    else if (window.ActiveXObject)
        initRequest = new ActiveXObject("Microsoft.XMLHTTP");
    if (initRequest != null) {
        initRequest.onreadystatechange = requestStateChanged;
        initRequest.open("GET","learning-chinese-a.php",true);
        initRequest.send(null);
    } else
        alert("Your browser doesn't support AJAX.")
}

function requestStateChanged()
{
    if (initRequest.readyState == 4) { // Loaded
        if (initRequest.status == 200) { // Okay
            if (ScoreDenom == 0) {
                document.getElementById("score").innerHTML = "<p>Score: 0 / 0 = 0% <br>";
            } else {
                document.getElementById("score").innerHTML = "<p>Score: " + ScoreNum + " / " + ScoreDenom + " = " + Math.round(100 * ScoreNum / ScoreDenom) + "% <br>";
            }
            document.getElementById("question").innerHTML = initRequest.responseText;
	        //document.getElementById("answer").style.display = 'none';
		    document.getElementById("answer").innerHTML = "<p><div style='font-size: 24px; font-weight: 900;'>&nbsp;</div><br>&nbsp;<br>";
		    
            document.getElementById("answer0").style.color = "#102654";
            document.getElementById("answer1").style.color = "#102654";
            document.getElementById("answer2").style.color = "#102654";

            waitingForNewQuestion = false; // We can click the check boxes now and something will happen
        } else {
            alert("There was a problem getting a new game. Try again later.")
        }
    }
}

function reset()
{
	for (var i=0; i < document.ChineseQuizForm.form_answer.length; i++)
	{
	   document.ChineseQuizForm.form_answer[i].checked = false;
	}
//	document.location.reload();
    newQuestion();
}

// http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	} else {
        var expires = "";
    }
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

var ScoreNum = readCookie("QuizQuestionsCorrect");
var ScoreDenom = readCookie("QuizQuestionsAsked");

if (ScoreNum == null || ScoreDenom == null) {
	createCookie("QuizQuestionsCorrect",0,-1);
	createCookie("QuizQuestionsAsked",0,-1);
	ScoreNum = 0;
	ScoreDenom = 0;
}

window.onload = newQuestion;

function check_answer()
{
    var answer = '0';

    if ( waitingForNewQuestion )
        return;
    waitingForNewQuestion = true;

	for (var i = 0; i < document.ChineseQuizForm.form_answer.length; i++) {
        if (document.ChineseQuizForm.form_answer[i].checked)
            answer = document.ChineseQuizForm.form_answer[i].value;
	}

	ScoreDenom++;

    var hidden_answer = document.getElementById("hidden-answer").innerHTML;
    
    if ( answer == hidden_answer ) {
        document.getElementById("answer" + hidden_answer).style.color = "green";
		document.getElementById("answer").innerHTML = "<p><div style='font-size: 24px; font-weight: 900; color: green;'>Correct</div><br>&nbsp;<br>";
		ScoreNum++;
		setTimeout("reset()",400);
	} else {
        document.getElementById("answer" + answer).style.color = "red";
        document.getElementById("answer" + hidden_answer).style.color = "green";
		document.getElementById("answer").innerHTML = "<p><div style='font-size: 24px; font-weight: 900; color: red;'>Incorrect</div><br>"
                + "The correct answer is <div style='font-weight:900; color: #7F0000; display: inline;'>"
                + document.getElementById("answer" + hidden_answer).innerHTML + " </div><br>"
                + "(countdown: <div id='countdown' style='display: inline;'>4</div>)<br>";
        
        //countdown = document.getElementById("countdown");
		setTimeout("reset()",4000);
		setTimeout("document.getElementById('countdown').innerHTML = '3';",1000);
		setTimeout("document.getElementById('countdown').innerHTML = '2';",2000);
		setTimeout("document.getElementById('countdown').innerHTML = '1';",3000);
	}
	document.getElementById("answer").style.display = 'block';

	createCookie("QuizQuestionsAsked",ScoreDenom,7);
	createCookie("QuizQuestionsCorrect",ScoreNum,7);
}