The Quiz
ID: 3665776 • Letter: T
Question
Web Page Programming Challenge
Create a Web page named quiz.html that can be used to conduct multiple choice quizzes over the Web. The page should contain at least 10 potential quiz questions, each with three possible answers (A, B, and C). When loaded, the page should first prompt the person for the number of desired questions in the quiz, with a default of 3 questions. The page should then randomly select questions and prompt the user with each question and possible answers. Each answer entered by the user should be compared with the correct answer, and the result displayed within the page (either CORRECT or INCORRECT). At the end, the number and percentage of correct guesses should be displayed in the page.
-It must display each question and all three potential answers as part of the prompt, and make it clear to the user how their answer should be formatted.
-The question, user's answer, and correctness of that answer must be displayed in the page. In the case of an incorrect answer, the correct answer must be identified.
-The number of correct answers, total number of questions, and correctness percentage must be displayed in a readable format.
-Ensure that no question appears more than once in a specific quiz. Of course, this requires enough potential questions to complete the quiz.
I don't know how to have the user select the number of question they want (3-10) and I don't know how to have any question randomly generated from a bank.
What I have (this can be edited or a different answer I can use as an example would be great):
HTML
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Quiz </title>
<link href="qstyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="quizscript.js">
</script>
<div id="frame" role="content"></div>
</body>
</html>
JavaScript (quizscript.js)
var quiztitle = "Quiz";
/**
* Set the information about questions here. The correct answer string needs to match
* the correct choice exactly, as it does string matching. (case sensitive)
*
*/
var quiz = [
{
"question" : "Q1: Who came up with the theory of relativity?",
"image" : "http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Albert_Einstein_Head.jpg/220px-Albert_Einstein_Head.jpg",
"choices" : [
"Sir Isaac Newton",
"Nicolaus Copernicus",
"Albert Einstein",
"Ralph Waldo Emmerson"
],
"correct" : "Albert Einstein",
"explanation" : "Albert Einstein drafted the special theory of relativity in 1905.",
},
{
"question" : "Q2: Who was the second president of the United States?",
"image" : "",
"choices" : [
"Sir Isaac Newton",
"Nicolaus Copernicus",
"John Adams",
"Ralph Waldo Emmerson"
],
"correct" : "Albert Einstein",
"explanation" : "Albert Einstein drafted the special theory of relativity in 1905.",
}
{
"question" : "Q3: Who is on the two dollar bill?",
"image" : "http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/US_%242_obverse-high.jpg/320px-US_%242_obverse-high.jpg",
"choices" : [
"Thomas Jefferson",
"Dwight D. Eisenhower",
"Benjamin Franklin",
"Abraham Lincoln"
],
"correct" : "Thomas Jefferson",
"explanation" : "The two dollar bill is seldom seen in circulation. As a result, some businesses are confused when presented with the note.",
},
{
"question" : "Q4: What event began on April 12, 1861?",
"image" : "",
"choices" : [
"First manned flight",
"California became a state",
"American Civil War began",
"Declaration of Independence"
],
"correct" : "American Civil War began",
"explanation" : "South Carolina came under attack when Confederate soldiers attacked Fort Sumter. The war lasted until April 9th 1865.",
},
];
var currentquestion = 0, score = 0, submt=true, picked;
jQuery(document).ready(function($){
/**
* HTML Encoding function for alt tags and attributes to prevent messy
* data appearing inside tag attributes.
*/
function htmlEncode(value){
return $(document.createElement('div')).text(value).html();
}
/**
* This will add the individual choices for each question to the ul#choice-block
*
* @param {choices} array The choices from each question
*/
function addChoices(choices){
if(typeof choices !== "undefined" && $.type(choices) == "array"){
$('#choice-block').empty();
for(var i=0;i<choices.length; i++){
$(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
}
}
}
/**
* Resets all of the fields to prepare for next question
*/
function nextQuestion(){
submt = true;
$('#explanation').empty();
$('#question').text(quiz[currentquestion]['question']);
$('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length);
if(quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion]['image'] != ""){
if($('#question-image').length == 0){
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question');
} else {
$('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question']));
}
} else {
$('#question-image').remove();
}
addChoices(quiz[currentquestion]['choices']);
setupButtons();
}
/**
* After a selection is submitted, checks if its the right answer
*
* @param {choice} number The li zero-based index of the choice picked
*/
function processQuestion(choice){
if(quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']){
$('.choice').eq(choice).css({'background-color':'#50D943'});
$('#explanation').html('<strong>Correct!</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
score++;
} else {
$('.choice').eq(choice).css({'background-color':'#D92623'});
$('#explanation').html('<strong>Incorrect.</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
}
currentquestion++;
$('#submitbutton').html('NEXT QUESTION »').on('click', function(){
if(currentquestion == quiz.length){
endQuiz();
} else {
$(this).text('Check Answer').css({'color':'#222'}).off('click');
nextQuestion();
}
})
}
/**
* Sets up the event listeners for each button.
*/
function setupButtons(){
$('.choice').on('mouseover', function(){
$(this).css({'background-color':'#e1e1e1'});
});
$('.choice').on('mouseout', function(){
$(this).css({'background-color':'#fff'});
})
$('.choice').on('click', function(){
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({'border-color':'#222','font-weight':700,'background-color':'#c1c1c1'});
if(submt){
submt=false;
$('#submitbutton').css({'color':'#000'}).on('click', function(){
$('.choice').off('click');
$(this).off('click');
processQuestion(picked);
});
}
})
}
/**
* Quiz ends, display a message.
*/
function endQuiz(){
$('#explanation').empty();
$('#question').empty();
$('#choice-block').empty();
$('#submitbutton').remove();
$('#question').text("You got " + score + " out of " + quiz.length + " correct.");
$(document.createElement('h2')).css({'text-align':'center', 'font-size':'4em'}).text(Math.round(score/quiz.length * 100) + '%').insertAfter('#question');
}
/**
* Runs the first time and creates all of the elements for the quiz
*/
function init(){
//add title
if(typeof quiztitle !== "undefined" && $.type(quiztitle) === "string"){
$(document.createElement('h1')).text(quiztitle).appendTo('#frame');
} else {
$(document.createElement('h1')).text("Quiz").appendTo('#frame');
}
//add pager and questions
if(typeof quiz !== "undefined" && $.type(quiz) === "array"){
//add pager
$(document.createElement('p')).addClass('pager').attr('id','pager').text('Question 1 of ' + quiz.length).appendTo('#frame');
//add first question
$(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');
//add image if present
if(quiz[0].hasOwnProperty('image') && quiz[0]['image'] != ""){
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame');
}
$(document.createElement('p')).addClass('explanation').attr('id','explanation').html(' ').appendTo('#frame');
//questions holder
$(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
//add choices
addChoices(quiz[0]['choices']);
//add submit button
$(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Check Answer').css({'font-weight':700,'color':'#222','padding':'30px 0'}).appendTo('#frame');
setupButtons();
}
}
init();
});
CSS (qstyle.css)
html,body,div,span,h1,h2,h3,h4,h5,h6,
p,code,small,strike,strong,sub,sup,b,u,i
{
border:0;
font-size:100%;
font:inherit;
vertical-align:
baseline;
margin:0;
padding:0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{
display:block;
}
body
{
line-height:1;
font:normal 0.9em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ol,ul
{list-style:none;
}
strong
{
font-weight:700;
}
#frame
{
max-width:620px;
width:auto;
border:1px solid #ccc;
background:#fff;
padding:10px;
margin:3px;
}
h1
{
font:normal bold 2em/1.8em "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align:left;
border-bottom:1px solid #999;
padding:0;
width:auto
}
h2
{
font:italic bold 1.3em/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;
padding:0;
text-align:center;
margin:20px 0;
}
p.pager
{
margin:5px 0 5px;
font:bold 1em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#999;
}
img.question-image
{
display:block;
max-width:250px;
margin:10px auto;
border:1px solid #ccc;
width:100%;
height:auto;
}
#choice-block
{
display:block;
list-style:none;
margin:0;
padding:0;
}
#submitbutton
{
background:#5a6b8c;
}
#submitbutton:hover
{
background:#7b8da6;
}
#explanation
{
margin:0 auto;
padding:20px;
width:75%;
}
.choice-box
{
display:block;
text-align:center;
margin:8px auto;
padding:10px 0;
border:1px solid #666;
cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;
}
Explanation / Answer
]> The Quiz In which continent is the country Japan located? Asia Europe Africa America Which one cannot swim? Tuna Cow Whale Lobster How many points are on a hexagon? 5 6 7 8 A new question here. An answer choice here. Another answer choice here also. Yet another answer choice here. This is the correct answer. Which number is < than 3? 1 & 2. 5. 8. 777. ]> Sample Quiz (2/20/2002) In which continent is the country Japan located? Asia Europe Africa America Which one can fly? A pigeon A rabbit A pig A lobster How many points are on a hexagon? 5 6 7 8 Which number is the largest? 2 20 200 2000 function QuizItem(question) { this.question=question; this.answers=new Array(); // reset statistic this.numOfAnswers=0; this.correctAnswer=0; // this function returns the question of this item this.getQuestion=function() { return this.question; } // add answer to multiple choice items this.addAnswer=function(answer, isCorrectAnswer) { this.answers[this.numOfAnswers]=answer; if (isCorrectAnswer) this.correctAnswer=this.numOfAnswers; this.numOfAnswers++; } // this function returns the n-th answer this.getAnswer=function(answerNumberToGet) { return this.answers[answerNumberToGet]; } // this function returns the index of the correct answer this.getCorrectAnswerNumber=function() { return this.correctAnswer; } // this function checks if the passed number is the // correct answer index this.checkAnswerNumber=function(userAnswerNumber) { if (userAnswerNumber==this.getCorrectAnswerNumber()) gotoAndPlay("Correct"); else gotoAndPlay("Wrong"); } } // this function parses the XML data into our data structure function onQuizData(success) { var quizNode=this.firstChild; var quizTitleNode=quizNode.firstChild; title=quizTitleNode.firstChild.nodeValue; var i=0; // follows var itemsNode=quizNode.childNodes[1]; // go through every item and convert it into our data structure while (itemsNode.childNodes[i]) { var itemNode=itemsNode.childNodes[i]; // consists of and one or // more . // always comes before s // (Ie: is the node 0 of ) var questionNode=itemNode.childNodes[0]; quizItems[i]=new QuizItem(questionNode.firstChild.nodeValue); var a=1; // Go through every answer and add them // to our data structure. // follows var answerNode=itemNode.childNodes[a++]; while (answerNode) { var isCorrectAnswer=false; if (answerNode.attributes.correct=="y") isCorrectAnswer=true; quizItems[i].addAnswer( answerNode.firstChild.nodeValue, isCorrectAnswer); // goto the next answerNode=itemNode.childNodes[a++]; } i++; } // We're done decoding, now we can start gotoAndStop("Start"); } var myData=new XML(); myData.ignoreWhite=true; myData.onLoad=onQuizData; myData.load("quiz.xml"); stop(); // I'm telling Flash not to continue until the XML is loaded. In which continent is the country Japan located? Asia Europe Africa AmericaRelated Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.