Web Page Programming Challenge Create a Web page named quiz.html that can be use
ID: 3665852 • Letter: W
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 USER 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.
Explanation / Answer
Answer
Based on question I have created web page at quiz.html having 3 questions, with percentage of answer, its performance displayed on the page.
I have attached Screen shots here and also send the code with each file.
You can arrange the files in Quiz folder , I have send the folder structure in this document and place files as mentioned with names.
Put the two .js files and .html file and images in the quiz folder.
1. Creates Quiz.html
<html>
<head>
<h3 align ="center">QUIZ</h3>
<script type="text/javascript" src="quiz_functions.js"></script>
<script type="text/javascript" src="quiz_config.js"></script>
</head>
<script type="text/javascript">
<!--
renderQuiz();
//-->
</script>
<p><div align="center">
</div><p>
</html>
2. Create quiz_function.js file
var useranswers = new Array();
var answered = 0;
function renderQuiz() {
for(i=0;i<questions.length;i++) {
document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" alt="" /></span></p>');
for(j=0;j<choices[i].length;j++) {
document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />');
}
}
document.writeln('<p><input type="submit" value="Show Score" /> <input type="submit" value="Reset Quiz" /></p><p
style="display:none"><img src="correct.gif" alt="Correct!" /><img src="incorrect.gif" alt="Incorrect!" /></p>');
}
function resetQuiz(showConfirm) {
if(showConfirm)
if(!confirm("Are you sure you want to reset your answers and start from the beginning?"))
return false;
document.location = document.location;
}
function submitAnswer(questionId, obj, classId, labelId) {
useranswers[questionId] = obj.value;
document.getElementById(labelId).style.fontWeight = "bold";
disableQuestion(classId);
showResult(questionId);
answered++;
}
function showResult(questionId) {
if(answers[questionId] == useranswers[questionId]) {
document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" alt="Correct!" />';
} else {
document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" alt="Incorrect!" />';
}
}
function showScore() {
if(answered != answers.length) {
alert("You have not answered all of the questions yet!");
return false;
}
questionCount = answers.length;
correct = 0;
incorrect = 0;
for(i=0;i<questionCount;i++) {
if(useranswers[i] == answers[i])
correct++;
else
incorrect++;
}
pc = Math.round((correct / questionCount) * 100);
alertMsg = "You scored " + correct + " out of " + questionCount + " ";
alertMsg += "You correctly answered " + pc + "% of the questions! ";
if(pc == 100)
alertMsg += response[0];
else if(pc >= 90)
alertMsg += response[1];
else if(pc >= 70)
alertMsg += response[2];
else if(pc > 50)
alertMsg += response[3];
else if(pc >= 40)
alertMsg += response[4];
else if(pc >= 20)
alertMsg += response[5];
else if(pc >= 10)
alertMsg += response[6];
else
alertMsg += response[7];
if(pc < 100) {
if(confirm(alertMsg))
resetQuiz(false);
else
return false;
} else {
alert(alertMsg);
}
}
function disableQuestion(classId) {
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++) {
if (alltags[i].className == classId) {
alltags[i].disabled = true;
}
}
}
3. Create Quiz_config.js
<!-- Paste this code into an external JavaScript file named: quiz_config.js -->
var questions = new Array();
var choices = new Array();
var answers = new Array();
var response = new Array();
// To add more questions, just follow the format below.
questions[0] = "1) JavaScript is ...";
choices[0] = new Array();
choices[0][0] = "the same as Java";
choices[0][1] = "kind of like Java";
choices[0][2] = "different than Java";
answers[0] = choices[0][2];
questions[1] = "2) JavaScript is ...";
choices[1] = new Array();
choices[1][0] = "subjective";
choices[1][1] = "objective";
choices[1][2] = "object based";
answers[1] = choices[1][2];
questions[2] = "3) To comment out a line in JavaScript ...";
choices[2] = new Array();
choices[2][0] = "Precede it with two forward slashes, i.e. '//'";
choices[2][1] = "Precede it with an asterisk, i.e. '*'";
choices[2][2] = "Precede it with a forward slash and an asterisk, i.e. '/*'";
answers[2] = choices[2][0];
// response for getting 100%
response[0] = "Excellent, top marks!";
// response for getting 90% or more
response[1] = "Excellent, try again to get 100%!"
// response for getting 70% or more
response[2] = "Well done, that is a good score, can you do better?";
// response for getting over 50%
//response[3] = "Nice one, you got more than half of the questions right, can you do better?";
// response for getting 40% or more
response[4] = "You got some questions right, you can do better!";
// response for getting 20% or more
response[5] = "You didn't do too well, why not try again!?";
// response for getting 10% or more
response[6] = "That was pretty poor! Try again to improve!";
// response for getting 9% or less
response[7] = "Oh dear, I think you need to go back to school (or try again)!";
Folder Structure Create in your machine
Output Screens
All Questions
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.