USING HTML AND JAVASCRIPT CODRF PROVIDED ADDED THE FOLLOWING FEATURES LISTED IN
ID: 3794492 • Letter: U
Question
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>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);
}
Explanation / Answer
<!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" value="Submit">
</div>
<ol id="question">
<!--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>View Results</button>
</ol>
<div id="result">
</div>
<div id="stats">
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.