COAP:COAP-2100/week7
Jump to navigation
Jump to search
Week 7
Topics Covered
- HTML5 for information ...
- HTML forms
- The concept of server-side scripting and web applications
- Using JavaScript to process form
Teaching materials
- HTML5
- HTML forms tutorial (includes JavaScript and server-side scripting)
- Use the Codeburner extension in Firefox for reference (if needed)
Classroom activities
Copy/paste this code into a new HTML file called hw6.html. Alternatively get it from simple-quiz.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>XHTML form example</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso8859-1" />
<script type="text/javascript" language="Javascript">
window.onload = init;
// Init code executed when the page loads
function init () {
document.getElementById("quiz").onsubmit = give_feedback;
}
function give_feedback() {
// f is variable that points to the form, just a shortcut
var f = document.forms["quiz"];
// ---------------- Compute a score --------------------
// Initially, score is 0
var score = 0;
for (var i=0; i < (f.length); i++) {
// if the user selected a radio button it is checked
// In this case we add its value to the score (see the HTML form)
if (f.elements[i].checked) {
score = score + parseInt(f.elements[i].value);
}
}
// ---------------- Provide feedback --------------------
// Let's check if the user answered at least one question
if (!score) {
alert ("Hey you have to fill in at least something");
return "lazy user";
}
// Now provide feedback
// Of course, this is a rather dumb test ... as example code tends to be
// If you plan to reuse this code, you certainly MUST change this
if (score > 6) feedback = "Wow, you are a really active person"
else if (score > 4) feedback = "You are quite an active person"
else if (score > 3) feedback = "You are an active person"
else feedback = "You are not too active";
alert ("Here are some test results: " + feedback);
}
</script>
</head>
<body>
<h1>XHTML form example</h1>
<p>Below is a simple quiz, please fill it in.</p>
<form id="quiz" action="#" method="get"> <br/>
<p>
Among those three choices, what do you prefer to do to relax ? <br/>
Watching TV <input type="radio" name="question1" value="1"/> <br/>
Playing computer games <input type="radio" name="question1" value="2"/> <br/>
Reading books <input type="radio" name="question1" value="3"/> <br/>
</p>
<p>
What do you prefer to do on Saturday nights ? <br/>
Staying at home <input type="radio" name="question2" value="1"/> <br/>
Going out alone <input type="radio" name="question2" value="2"/> <br/>
Inviting friends <input type="radio" name="question2" value="3"/> <br/>
Going out with friends <input type="radio" name="question2" value="4"/> <br/>
</p>
<input type="submit" value="Hit me"/>
</form>
</body>
</html>
Homework
- Task
Create a JavaScript program that can process a quiz made with simple radio buttons. Code above can serve as basis. However, you should change the two questions and add at least a third one. In other words:
- You must change something in the HTML forms code. Make sure that each group of radio buttons has a different name. E.g. when you add a question, use name="question3"
- You must change something in the JavaScript Provide feedback section. I.e. change the score values and the feedback messages.
Note: CS students familiar with HTML forms and JavaScript can use other HTML forms.
- Tips
- Validate your HTML code
- Make sure to open the error console (in Firefox: Tools-> error console) !!
- Due
- Before Wednesday week 8 class
- Submission
- Submit the file to the world classroom