COAP:COAP-2100/week7: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
Line 3: | Line 3: | ||
==== Topics Covered ==== | ==== Topics Covered ==== | ||
* | * [[HTML5]] for information ... | ||
* | * HTML forms | ||
* | * The concept of server-side scripting and web applications | ||
* Using JavaScript to process form | |||
==== Teaching materials ==== | ==== Teaching materials ==== | ||
* [[HTML5]] | |||
* [[HTML forms tutorial]] (includes JavaScript and server-side scripting) | |||
==== Classroom activities ==== | ==== Classroom activities ==== | ||
Copy/paste this code: | |||
<source lang="xml"> | |||
<!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> | |||
</source> | |||
==== Homework ==== | ==== Homework ==== | ||
* Create a JavaScript program that can process a quiz made with simple radio buttons. Code above can serve as basis. | |||
* CS students familiar with HTML forms and JavaScript can use other HTML forms. |
Revision as of 18:21, 4 October 2009
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)
Classroom activities
Copy/paste this code:
<!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
- Create a JavaScript program that can process a quiz made with simple radio buttons. Code above can serve as basis.
- CS students familiar with HTML forms and JavaScript can use other HTML forms.