summaryrefslogtreecommitdiffstats
path: root/mainpage.html
blob: d198ed460212edd4b4cc1b24e0b71418449bab71 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>
<head>
<title>Framed</title>
<script language="JavaScript">
var requestObj = null;
var answerObj = null;
var questions = new Array();
var hasLoadedFirst;
var thumbnail = null;
var title = null;
var optionBox = null;
var currentQuestion = null;

function fillQuestionQueue() {
	requestObj.open("GET", "/newquestion");
	requestObj.onreadystatechange = function() {
		if (requestObj.readyState != 4)
			return;
		if (requestObj.responseText == "") {
			fillQuestionQueue();
			return;
		}
		var question =  eval("(" + requestObj.responseText + ")");
		var preloadImage = new Image();
		preloadImage.src = question.frame;
		question.frame = preloadImage;
		questions.push(question);
		if (!hasLoadedFirst) {
			showNextQuestion();
			hasLoadedFirst = true;
		}
		if (questions.length < 5)
			fillQuestionQueue();
	};
	requestObj.send(null);
}

function showNextQuestion() {
	if (questions.length == 0) {
		hasLoadedFirst = false;
		fillQuestionQueue();
		return;
	}
	currentQuestion = questions.shift();
	thumbnail.src = currentQuestion.frame.src;
	title.innerHTML = currentQuestion.title;
	var checkBoxes = "";
	for (var i = 0; i < currentQuestion.cast.length; i++) {
		checkBoxes += "<label><input type=\"checkbox\" id=\"cast" + i.toString() + "\" \\>"+ currentQuestion.cast[i][0] + " as " + currentQuestion.cast[i][1] + "</label><br \\>";
	}
	optionBox.innerHTML = checkBoxes;
	fillQuestionQueue();
}

function answerQuestion() {
	var castInFrame = new Array();
	for (var i = 0; i < currentQuestion.cast.length; i++) {
		if (document.getElementById("cast" + i.toString()).checked)
			castInFrame.push(i);
	}
	if (castInFrame.length == 0) {
		alert("Please select the characters in the frame. If you do not know, press skip. If there are none, press none.");
		return;
	}
	answerObj.open("GET", "/answerquestion?code=" + currentQuestion.code + "&inframe=" + castInFrame.toString());
	answerObj.send(null);
	showNextQuestion();
}
function emptyAnswer() {
	answerObj.open("GET", "/answerquestion?code=" + currentQuestion.code + "&inframe=-1");
	answerObj.send(null);
	showNextQuestion();
}

function init() {
	if (navigator.appName == "Microsoft Internet Explorer")
		answerObj = requestObj = new ActiveXObject("Microsoft.XMLHTTP");
	else
		answerObj = requestObj = new XMLHttpRequest();
	thumbnail = document.getElementById("thumbnail");
	title = document.getElementById("title");
	optionBox = document.getElementById("options");
	hasLoadedFirst = false;
	fillQuestionQueue();
}

</script>
</head>
<body onLoad="init();">
<h1>Framed <i>by AnyClip</i></h1>
<table>
<tr>
<td valign="top" width="500">
<div id="title" style="font-size:14pt;font-weight:bold;"></div>
<img width="480" id="thumbnail" />
</td>
<td valign="top" width="300">
<div id="options">
</div>
</td>
<td valign="top" width="200">
<button onClick="answerQuestion()"><h2>Answer &amp; Next</h2></button><br />
<button onClick="emptyAnswer()">None of the Above</button><br />
<button onClick="showNextQuestion()">Skip Question</button><br />
</td>
</tr>
</table>
</body>
</html>