COAP:COAP-2100/week7: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
| Line 12: | Line 12: | ||
* [[HTML5]] | * [[HTML5]] | ||
* [[HTML forms tutorial]] (includes JavaScript and server-side scripting) | * [[HTML forms tutorial]] (includes JavaScript and server-side scripting) | ||
* Use the Codeburner extension in Firefox for reference (if needed) | |||
==== Classroom activities ==== | ==== Classroom activities ==== | ||
Copy/paste this code: | Copy/paste this code into a new HTML file called hw6.html. Alternatively get it from [http://tecfa.unige.ch/guides/js/ex/coap/week-3/simple-quiz.html simple-quiz.html] | ||
<source lang="xml"> | <source lang="xml"> | ||
| Line 102: | Line 104: | ||
==== Homework ==== | ==== Homework ==== | ||
* Create a JavaScript program that can process a quiz made with simple radio buttons. Code above can serve as basis. | ; 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. | |||
* CS students familiar with HTML forms and JavaScript can use other HTML forms. | * 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 | |||
Revision as of 18:26, 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)
- 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.
- 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