Created
February 19, 2014 14:35
-
-
Save slopeofhope81/9093298 to your computer and use it in GitHub Desktop.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
great work but css is missing so i can't fully see its functionality