Skip to content

Instantly share code, notes, and snippets.

@slopeofhope81

slopeofhope81/gist:9093298

Created February 19, 2014 14:35
Show Gist options
  • Save slopeofhope81/9093298 to your computer and use it in GitHub Desktop.
Save slopeofhope81/9093298 to your computer and use it in GitHub Desktop.
Download ZIP
I made this quiz app that has following: 1)radio button choices 2)it will show score upon completion 3)can show any # of questions and choices4)tally the user's score and remove everything else in the form
Raw
gistfile1.txt
<html>
<head><!--html-->
<title>example1</title>
<link rel="stylesheet" type="text/css" href="do.css">
</head>
<body>
<div id="point"></div>
<div id="question"></div>
<form name="radioAnswers">
<input type="radio" name="choice" value="0"><label id="label0"></label></input>
<input type="radio" name="choice" value="1"><label id="label1"></label></input>
<input type="radio" name="choice" value="2"><label id="label2"></label></input>
<input type="radio" name="choice" value="3"><label id="label3"></label></input>
</form>
<input type="button" value="next" id="next"></input>
<script src="do.js"></script>
</body>
</html><!--html-->
var allQuestions = [{question: "Q1: What is your name?", <!-- javascript -->
choices: ["Steve", "kevin", "peter", "jimmy"],
correctAnswer:0},
{question: "Q2: when were you born?",
choices: ["1970", "1982", "1985", "1980"],
correctAnswer:1},
{question: "Q3, where were you born?",
choices: ["Seoul", "New York", "Tokyo", "LA"],
correctAnswer:0},
{question: "Q4: what is your passion?",
choices: ["scientist", "bus driver", "programmer", "teacher"],
correctAnswer:2},
{question: "Q5: how many kids do you have?",
choices: ["1", "2", "0", "none of above"],
correctAnswer:0}];
var score=0;
var currentNumber = 0;
function createQuestion(){
for (var i=0; i < allQuestions[this.currentNumber].choices.length;i++){
document.forms.radioAnswers.elements.choice[i].checked = false;
}
var question=document.getElementById("question");
question.innerHTML = allQuestions[this.currentNumber].question;
var point = document.getElementById("point");
point.innerHTML="<span>score: "+score+"</span>";
createChoices();
}
function createChoices(){
for (var i = 0; i < allQuestions[this.currentNumber].choices.length; i++){
var option=document.getElementById("label"+i);
option.innerHTML=allQuestions[this.currentNumber].choices[i];
}
}
function nextQuestion(){
for (var i =0; i < allQuestions[this.currentNumber].choices.length; i++){
if (document.forms.radioAnswers.elements.choice[i].checked == true){
var userAnswer = document.forms.radioAnswers.elements.choice[i].value;
if (userAnswer == allQuestions[this.currentNumber].correctAnswer){
this.score++;
}
}
}
this.currentNumber++;
if (this.currentNumber==allQuestions.length){
showScore();
}
else{
createQuestion();
}
}
function showScore(){
document.forms.radioAnswers.style.display="none";
var question=document.getElementById("question");
question.style.display = "none";
var elt=document.getElementById("point");
elt.style.display = "block";
var button = document.getElementById("next");
button.style.display="none";
}
window.onload= createQuestion();<--javascript-->
@stevtymz
Copy link

great work but css is missing so i can't fully see its functionality

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment