Skip to content

Instantly share code, notes, and snippets.

@Shchvova

Shchvova/index.html

Created December 22, 2011 15:48
Show Gist options
  • Save Shchvova/1510753 to your computer and use it in GitHub Desktop.
Save Shchvova/1510753 to your computer and use it in GitHub Desktop.
Download ZIP
My fist javascript thing
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function shuffle(v){
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
};
var resp = null;
var test = { questions:[]};
var state = {cur:0, answers:[], form:null}
function loadQuiz(quiz)
{
var client = new XMLHttpRequest();
client.onreadystatechange = loadHandler;
client.open("GET", quiz);
client.send();
}
function loadHandler()
{
if(this.readyState == 4)
{
setQuiz(this.responseXML);
}
}
function setQuiz(data)
{
if(data!=null)
{
test.title = data.evaluate("/Quiz/Title/text()",data, null, XPathResult.ANY_TYPE, null).iterateNext().textContent;
test.description = data.evaluate("/Quiz/Description/text()",data, null, XPathResult.ANY_TYPE, null).iterateNext().textContent;
questions = data.evaluate("/Quiz/Question",data, null, XPathResult.ANY_TYPE, null);
var q=questions.iterateNext();
while (q)
{
var question = {expl:"", answers:[]};
var answerNodes=q.getElementsByTagName("Answer");
for(var i=0;i<answerNodes.length;i++)
{
var node = answerNodes[i];
question.answers.push([node.textContent, node.getAttribute("correct")=="true"]);
}
question.answers = shuffle(question.answers);
question.expl = q.getElementsByTagName("Explanation")[0].textContent;
test.questions.push(question);
state.answers.push(-1);
q=questions.iterateNext();
}
test.questions = shuffle(test.questions);
navigateToQuestion(0);
}
else
{
}
}
function navigateToQuestion(n)
{
state.cur = n;
c = document.getElementById("quiz");
c.innerHTML="";
var e = document.createElement('h1');
e.appendChild(document.createTextNode(test.title));
c.appendChild(e);
e = document.createElement('h2');
e.appendChild(document.createTextNode(test.description));
c.appendChild(e);
var f = document.createElement('form');
state.form = f;
e = document.createElement('p');
var q = test.questions[n];
e.appendChild(document.createTextNode( (1+n)+") "+ q.expl));
c.appendChild(e);
answers = [];
for(var i=0;i<q.answers.length;i++)
{
var node = q.answers[i];
e = document.createElement('input');
e.type = "radio";
e.name = "q";
e.value = i;
if(state.answers[n]==i)
e.checked = "true";
answers.push([e,document.createTextNode(node[0])]);
}
for(var i in answers)
{
f.appendChild(answers[i][0]);
f.appendChild(answers[i][1]);
f.appendChild(document.createElement("br"));
}
c.appendChild(f);
if(n>0)
{
e = document.createElement("a");
e.appendChild(document.createTextNode("Previous"))
e.href="javascript:void(0)";
e.onclick = navigatePrev;
c.appendChild(e);
c.appendChild(document.createTextNode(" "));
}
if(n<test.questions.length-1)
{
e = document.createElement("a");
e.appendChild(document.createTextNode("Next"))
e.href="javascript:void(0)";
e.onclick = navigateNext;
c.appendChild(e);
}
if(n==test.questions.length-1)
{
e = document.createElement("a");
e.appendChild(document.createTextNode("Finish"))
e.href="javascript:void(0)";
e.onclick = navigateDone;
c.appendChild(e);
}
}
function navigateNext(e) {
if(checkAndSave())
navigateToQuestion(state.cur+1);
else
alert("Please, select answer!")
}
function navigatePrev(e) {
checkAndSave();
navigateToQuestion(state.cur-1);
}
function checkAndSave() {
var ans = null;
for(var i in state.form.q)
{
if(state.form.q[i].checked)
{
ans = state.form.q[i].value;
break;
}
}
if(ans==null)
{
return false;
}else
{
state.answers[state.cur] = ans;
return true;
}
}
function navigateDone(e) {
if(checkAndSave()) {
showFinalPage();
}
}
function showFinalPage() {
var correct = 0;
var total = 0;
for(var i in state.answers)
{
total++;
if(test.questions[i].answers[state.answers[i]][1])
correct++;
}
c = document.getElementById("quiz");
c.innerHTML="";
var e = document.createElement('h1');
e.appendChild(document.createTextNode(test.title));
c.appendChild(e);
e = document.createElement('h2');
e.appendChild(document.createTextNode(test.description));
c.appendChild(e);
e = document.createElement('p');
e.appendChild(document.createTextNode("Done. Correct " + correct + " of " +total));
c.appendChild(e);
for(var i in state.answers)
{
e = document.createElement('p');
var q = test.questions[i].answers[state.answers[i]];
if(q[1])
{
e.appendChild(document.createTextNode( (+i+1) + ") Correct" ));
}else
{
e.appendChild(document.createTextNode( (+i+1) +") Incorrect" ));
}
c.appendChild(e);
}
}
</script>
</head>
<body onload="loadQuiz('questions.xml')">
<div id="quiz">
</div>
</body>
</html>
Raw
questions.xml
<?xml version="1.0" encoding="UTF-8" ?>
<Quiz>
<Title>Test quiz</Title>
<Description>Test quiz demo</Description>
<Question>
<Explanation>2+2</Explanation>
<Answer>3</Answer>
<Answer correct="true">4</Answer>
<Answer>1</Answer>
<Answer>6</Answer>
</Question>
<Question>
<Explanation>2*3</Explanation>
<Answer>3</Answer>
<Answer correct="true">6</Answer>
<Answer>4</Answer>
<Answer>9</Answer>
</Question>
<Question type="multiple">
<Explanation>Select prime numbers</Explanation>
<Answer>4</Answer>
<Answer correct="true">7</Answer>
<Answer>21</Answer>
<Answer correct="true">19</Answer>
</Question>
</Quiz>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment