Skip to content

Instantly share code, notes, and snippets.

@samsmo

samsmo/project1.html

Created April 9, 2012 19:05
Show Gist options
  • Save samsmo/2345616 to your computer and use it in GitHub Desktop.
Save samsmo/2345616 to your computer and use it in GitHub Desktop.
Download ZIP
A Quiz made in Vanilla JavaScript
Raw
project1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta name="generator" content="BBEdit 9.5" />
<script type="text/javascript" src="myData.js"></script>
<script type="text/javascript" src="cookies.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
//<![CDATA[
var fin= false;
//var anArray;
//append xml to an array
//alert(xmlDoc);
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
function start(which)
{
//check if IE
if(document.attachEvent && document.getElementById)
{
//alert('Get a better browser - Mozilla.com');
if(document.userAgent) // to check for mac
{
alert('Get a better browser - Mozilla.com');
}
}
var compareArray = returnFinal();
var fin= false;
//alert(finers.length);
//alert(compareArray);
for(var i=0; i<=finalResults.length; i++)
{
//alert(finers[i]);
if(finalResults[i] == which)
{
//alert(i);
fin = true;
showResults(i);
//alert(xmlDocument.getElementsByTagName("Name")[0].childNodes[0].nodeValue);
}
}
if(!fin)
{
//alert(xmlDoc.getElementsByTagName("rockstar")[0].childNodes[0].nodeValue);
if(which !=='begin')
{
//attempt to
//alert(which.parentNode);
/*);
while(which !=which.parentNode.lastChild)
{
//remove child until which is the last parent.
which.parentNode.removeChild(which.parentNode.lastChild);
}
*/
//try a reset button instead
}
//alert(which);
//loop thru array with xml data, if it's last option // person's name print the results from xml
//if false, create next select
createMenu(which);
}
//}
//create a dynamic select box
}
function createMenu(choice)
{
if( choice !=null)
{
//make select
//check to see if null call getArray
var anArray = getArray(choice);
//create a select menu, by creating it in a div with an id corresponding to that in the array
var selectMenu = document.createElement('div');
selectMenu.setAttribute('id',anArray[0]);
document.body.appendChild(selectMenu);
document.getElementById(anArray[0]).innerHTML = anArray[1];
var menuSelect = document.createElement('select');
//ieSeven TEst
//disable old menus here
//test for ie7
if(document.attachEvent && document.getElementById)
{
menuSelect.onchange = function(){start(this.value);disableMenu(this)};
}else
{
menuSelect.setAttribute('onchange','start(this.value);disableMenu(this)');
//alert(this.value);
}
document.body.appendChild(selectMenu);
menuSelect.setAttribute('id', anArray[0]);
var blankChoice = document.createElement('option');
blankChoice.setAttribute('value','null');
menuSelect.appendChild(blankChoice);
for(var i=2; i<anArray.length; i++)
{
var menuOpt = document.createElement('option');
menuOpt.setAttribute('value', anArray[i]);
var text = document.createTextNode(anArray[i]);
menuOpt.appendChild(text);
menuSelect.appendChild(menuOpt);
//menuSelect.style.left = parseInt(menuSelect.style.left)+1+"px";
}
document.body.appendChild(menuSelect);
//attempt to move things with DHTML failed...
//document.getElementById('menuSelect')style.left=parseInt(document.getElementById('menuSelect').style.left)+1+"px";
//setTimeout('moveMe()',30);
//}
}
}
function disableMenu(which)
{
which.disabled = true;
}
function showResults(number)
{
var xmlDocument = loadXMLDoc('rockstar.xml');
var name = xmlDocument.getElementsByTagName("Name")[number].childNodes[0].nodeValue;
var instrument = xmlDocument.getElementsByTagName("instrument")[number].childNodes[0].nodeValue;
var type = xmlDocument.getElementsByTagName("Type")[number].childNodes[0].nodeValue;
var Band = xmlDocument.getElementsByTagName("Band")[number].childNodes[0].nodeValue;
var Pic = xmlDocument.getElementsByTagName("picture")[number].childNodes[0].nodeValue;
var showResult = document.createElement('div');
var showName = document.createElement('div');
var showInst = document.createElement('div');
var showStyle = document.createElement('div');
var showType = document.createElement('div');
var showBand = document.createElement('div');
//var breaker = document.createElement('BR');
showResult.setAttribute('id', 'result');
//var breaker = '<br />'
var textName = document.createTextNode('Name:' + name);
var textInst = document.createTextNode('instrument:' + instrument);
var textStyle = document.createTextNode('Style:' + type);
var textBand = document.createTextNode('Band:' + Band);
var img = document.createElement('img');
img.setAttribute('src', Pic);
showName.appendChild(textName);
showInst.appendChild(textInst);
showStyle.appendChild(textStyle);
showBand.appendChild(textBand);
showResult.appendChild(showName);
showResult.appendChild(showInst);
showResult.appendChild(showStyle);
showResult.appendChild(showBand);
showResult.appendChild(img);
if(GetCookie('userName'))
{
var sayHello = document.createElement('div');
sayHello.setAttribute('id', 'sayHi');
var text = document.createTextNode('Hey, ' + GetCookie('userName') +', your just like '+name+'?');
sayHello.appendChild(text);
showResult.appendChild(sayHello);
}
else{
createCookie();
}
document.body.appendChild(showResult);
//window.document.write('<div class="showResult"><p> Name:'+ name +'</p></div>');
//alert(xmlDocument.getElementsByTagName("Name")[number].childNodes[0].nodeValue);
//var resultPage = document.createElement('div');
//resultPage.setAttribute('id','result');
//document.write(xmlDoc.getElementsByTagName("rockstar")[0].childNodes[0].nodeValue);
}
function createCookie()
{
if(GetCookie('userName')==null)
{
var name = prompt('Hi, first time here...','put name here');
SetCookie('userName', name);
}
}
//]]>
</script>
</head>
<body onload="start('begin')">
<h2> What kind of rocker are you?</h2>
<FORM>
<INPUT TYPE="button" id="reset" VALUE="Start Over" onClick="history.go(0)">
</FORM>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment