// animalgame.js
// JavaScript code for Animal Game lecture example
// INFO 343, Autumn 2012
// Morgan Doocy
// (From CSE 190 M, Marty Stepp)
// ID numbers to fetch if 'yes' or 'no' are clicked.
var yesId;
var noId;
// When the page is ready, attach click handlers to #yes and #no buttons, and
// fetch the first question.
$(document).ready(function() {
// Attach click handlers.
$('#yes').click(yesClick);
$('#no').click(noClick);
// Fetch the first question, nodeid = 1.
fetchNode(1);
});
// Fetch the node with the given ID.
function fetchNode(id) {
$.ajax('/lectures/ajax-with-xml/animalgame.php', {
data: { "nodeid": id },
success: injectNode,
error: ajaxError
});
}
// Inject the question/answer node into the page, and remember the next yes/no
// ID for when #yes or #no are clicked.
function injectNode(xmldoc) {
// Get the <question> node, if any, from the XML returned.
var questionNode = xmldoc.getElementsByTagName('question')[0];
// Check to see whether there was a <question> element present.
if (questionNode) {
// This is a question - remember the yes/no IDs and inject the question
// into the page.
$('#questionparagraph').text(questionNode.firstChild.nodeValue);
// remember the 'yes' id
yesId = xmldoc.getElementsByTagName('yes')[0].getAttribute('nodeid');
// remember the 'no' id
noId = xmldoc.getElementsByTagName('no')[0].getAttribute('nodeid');
} else {
// This is an answer - guess the animal, and clear the yes/no IDs to
// indicate there are no further questions to fetch.
var answerNode = xmldoc.getElementsByTagName('answer')[0];
$('#questionparagraph').text("Is your animal: " + answerNode.firstChild.nodeValue + "?");
yesId = noId = null;
}
}
// If there's a yesId to fetch, fetch it; otherwise, display a "won" message.
function yesClick() {
if (yesId) {
fetchNode(yesId);
} else {
$('#questionparagraph').text("Yay I won!");
}
}
// If there's a noId to fetch, fetch it; otherwise, display a "lost" message.
function noClick() {
if (noId) {
fetchNode(noId);
} else {
$('#questionparagraph').text("Boo I lost :(");
}
}
// Alert a useful debugging message based on information provided by jQuery.
// (Provided ajaxError function from lecture slides.)
function ajaxError(jqxhr, type, error) {
var msg = "An Ajax error occurred!\n\n";
if (type == 'error') {
if (jqxhr.readyState == 0) {
// Request was never made - security block?
msg += "Looks like the browser security-blocked the request.";
} else {
// Probably an HTTP error.
msg += 'Error code: ' + jqxhr.status + "\n" +
'Error text: ' + error + "\n" +
'Full content of response: \n\n' + jqxhr.responseText;
}
} else {
msg += 'Error type: ' + type;
if (error != "") {
msg += "\nError text: " + error;
}
}
alert(msg);
}