Homework SourseUSING HTML AND JAVASCRIPT CODRF PROVIDED ADDED THE FOLLOWING
USING HTML AND JAVASCRIPT CODRF PROVIDED ADDED THE FOLLOWING FEATURES LISTED IN BOLD:
1. Provide the following information: First Name, Last Name, and Email for Assessment. (validate input).
2. Take a Test/Quiz (minimum 5 multiple choice questions).
3. Submit the result of the Test/Quiz.
Note: The following information should be available on the different document/window:
a. Information about student,
b. Total grade (%)
c. Statistics (Example: Q1 – wrong /correct).
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Round trip</title>
<script type=\"text/javascript\" src=\"quiz.js\"></script>
</head>
<body>
<ol>
<!--answer: Hypertext markup language-->
<li>
<h3>What does HTML stand For</h3>
<input type=\"radio\" name=\"question0\" value=\"A\">Home took Markup Language<br>
<input type=\"radio\" name=\"question0\" value=\"B\">Hypertext Markup Language<br>
<input type=\"radio\" name=\"question0\" value=\"C\">Hyperlinks and Text Markup Language<br>
<input type=\"radio\" name=\"question0\" value=\"D\">I don\'t know<br>
</li>
<!--answer: World wide web consortium-->
<li>
<h3>Who is making Web Standards</h3>
<input type=\"radio\" name=\"question1\" value=\"A\">Mozilla<br>
<input type=\"radio\" name=\"question1\" value=\"B\">The World Wide Web Consortium<br>
<input type=\"radio\" name=\"question1\" value=\"C\">Google<br>
<input type=\"radio\" name=\"question1\" value=\"D\">Microsoft<br>
</li>
<!--answer: h1-->
<li>
<h3>Choose the correct HTML element fo the largest heading:</h3>
<input type=\"radio\" name=\"question2\" value=\"A\">heading<br>
<input type=\"radio\" name=\"question2\" value=\"B\">h1<br>
<input type=\"radio\" name=\"question2\" value=\"C\">head<br>
<input type=\"radio\" name=\"question2\" value=\"D\">h6<br>
</li>
<!--answer: strong-->
<li>
<h3>Choose the correct HTML element to define important text:</h3>
<input type=\"radio\" name=\"question3\" value=\"A\">important<br>
<input type=\"radio\" name=\"question3\" value=\"B\">i<br>
<input type=\"radio\" name=\"question3\" value=\"C\">strong<br>
<input type=\"radio\" name=\"question3\" value=\"D\">b<br>
</li>
<!--answer: ol-->
<li>
<h3>How can you make a numbered list?</h3>
<input type=\"radio\" name=\"question4\" value=\"A\">ul<br>
<input type=\"radio\" name=\"question4\" value=\"B\">list<br>
<input type=\"radio\" name=\"question4\" value=\"C\">dl<br>
<input type=\"radio\" name=\"question4\" value=\"D\">ol<br>
</li>
</ol>
<button onclick=\"returnScore()\">View Results</button>
</body>
</html>
JAVASCRIPT CODE:
var answers = [\"A\",\"C\",\"B\"],
tot = answers.length;
function getCheckedValue( radioName ){
var radios = document.getElementsByName( radioName );
for(var y=0; y<radios.length; y++)
if(radios[y].checked) return radios[y].value;
}
function getScore(){
var score = 0;
for (var i=0; i<tot; i++)
if(getCheckedValue(\"question\"+i)===answers[i]) score += 1;
return score;
}
function returnScore(){
alert(\"Your score is \"+ getScore() +\"/\"+ tot);
}
Solution
<!DOCTYPE html>
<html>
<head>
<title>Round trip</title>
<script type=\"text/javascript\">
var firsname;
var lastname;
var email;
function submitdetail (argument) {
firsname=document.getElementById(\"firstname\").value;
lastname=document.getElementById(\"lastname\").value;
email=document.getElementById(\"email\").value;
if(firsname!=\"\" && lastname!=\"\" && email!=\"\")
{
var verifyEmail=validateEmail(email);
if(verifyEmail!=false)
{
document.getElementById(\"personalinfo\").style.display = \'none\';
document.getElementById(\"question\").style.display = \'block\';
}
else
{
alert(\"Plz Enter Valid Email\");
}
}
else
{
alert(\"Plz Enter All Fields\");
}
}
function validateEmail(email) {
var re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
var answers = [\"B\",\"B\",\"B\",\"C\",\"D\"],
tot = answers.length;
var correctanswer=0;
var radios;
function getCheckedValue( radioName ){
for (var i = 0; i < tot; i++) {
var radios = document.getElementsByName( \"question\"+i );
for(var j=0;j<radios.length;j++)
{
if(radios[j].checked) {
if(radios[j].value==answers[i])
{
correctanswer=correctanswer+1;
}
}
}
}
}
function returnScore(){
getCheckedValue(\"question\");
var stats;
document.getElementById(\"question\").style.display = \'none\';
document.getElementById(\"result\").innerHTML =\"FirstName: \"+firsname+\"<br/>LastName: \"+lastname+\"<br/>Email: \"+email+\"<br/>Total Grade: \"+(correctanswer/tot)*100;
}
</script>
</head>
<body>
<div id=\"personalinfo\">
<h4><span>FirstName:<input type=\"text\" id=\"firstname\"/></span></h4>
<h4><span>LastName:<input type=\"text\" id=\"lastname\"/></span></h4>
<h4><span>Email:<input type=\"email\" id=\"email\"/></span></h4>
<input type=\"button\" onclick=\"submitdetail()\" value=\"Submit\">
</div>
<ol id=\"question\" style=\"display:none;\">
<!--answer: Hypertext markup language-->
<li>
<h3>What does HTML stand For</h3>
<input type=\"radio\" name=\"question0\" value=\"A\">Home took Markup Language<br>
<input type=\"radio\" name=\"question0\" value=\"B\">Hypertext Markup Language<br>
<input type=\"radio\" name=\"question0\" value=\"C\">Hyperlinks and Text Markup Language<br>
<input type=\"radio\" name=\"question0\" value=\"D\">I don\'t know<br>
</li>
<!--answer: World wide web consortium-->
<li>
<h3>Who is making Web Standards</h3>
<input type=\"radio\" name=\"question1\" value=\"A\">Mozilla<br>
<input type=\"radio\" name=\"question1\" value=\"B\">The World Wide Web Consortium<br>
<input type=\"radio\" name=\"question1\" value=\"C\">Google<br>
<input type=\"radio\" name=\"question1\" value=\"D\">Microsoft<br>
</li>
<!--answer: h1-->
<li>
<h3>Choose the correct HTML element fo the largest heading:</h3>
<input type=\"radio\" name=\"question2\" value=\"A\">heading<br>
<input type=\"radio\" name=\"question2\" value=\"B\">h1<br>
<input type=\"radio\" name=\"question2\" value=\"C\">head<br>
<input type=\"radio\" name=\"question2\" value=\"D\">h6<br>
</li>
<!--answer: strong-->
<li>
<h3>Choose the correct HTML element to define important text:</h3>
<input type=\"radio\" name=\"question3\" value=\"A\">important<br>
<input type=\"radio\" name=\"question3\" value=\"B\">i<br>
<input type=\"radio\" name=\"question3\" value=\"C\">strong<br>
<input type=\"radio\" name=\"question3\" value=\"D\">b<br>
</li>
<!--answer: ol-->
<li>
<h3>How can you make a numbered list?</h3>
<input type=\"radio\" name=\"question4\" value=\"A\">ul<br>
<input type=\"radio\" name=\"question4\" value=\"B\">list<br>
<input type=\"radio\" name=\"question4\" value=\"C\">dl<br>
<input type=\"radio\" name=\"question4\" value=\"D\">ol<br>
</li>
<button onclick=\"returnScore()\">View Results</button>
</ol>
<div id=\"result\">
</div>
<div id=\"stats\">
</div>
</body>
</html>
