COAP:COAP-2100/week7: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
Line 17: Line 17:
==== Classroom activities ====
==== Classroom activities ====


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]  
Open [http://tecfa.unige.ch/guides/js/ex/coap/week-3/simple-quiz.html simple-quiz.html] and save this file on your desktop. We will make some modifications to it, i.e. prepare homework 6.
 
<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 ====

Revision as of 20:41, 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

  • Use the Codeburner extension in Firefox for reference (if needed)

Classroom activities

Open simple-quiz.html and save this file on your desktop. We will make some modifications to it, i.e. prepare homework 6.

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) !!
Evaluation criteria
  • Ergonomics (does the quiz "make sense")
  • HTML and CSS code (is it valid)
  • Style and presentation
  • JavaScript (is your code running, does it compute ok)
Due
  • Before Wednesday week 8 class
Submission
  • Submit the file to the world classroom
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week7&oldid=23925"