Digital Media Tecnology, autumn 2007

Exercise 2 - solutions

1. (1 and 2): A solution with a very simple stylesheet may be found in http://www.cs.helsinki.fi/u/laine/dime/ratk/testi/firma.html. The solution is build in the folder http://www.cs.helsinki.fi/u/laine/dime/ratk/testi/ as follows:
   • folder css - stylesheet
   • folder testi - the pages in xhtml
   • folder kuvat - images and video clips
   • folders a,b,c,... - product group folders, menu and product data sheets
2. (3) One solution with some style definitions included is in http://www.cs.helsinki.fi/u/laine/dime/ratk/testi/h2_3.html

   This solution uses IE interpretation of screen co-ordinates.

3. (4) Lotto-coupon:

   There are many choises

   1) a table of checkboxes.

   1 2 3 4 5 6

   7 8 etc.

   Another way is to use images or some other elements to show the boxes and hidden checkboxes to register the selections. Javascript is needed to change the status of the checkboxes. Below the checkboxes are visible.

   1	2	3	4	5	6
   7	8

   ---

   The above uses the following javascript function:

   function valitse(obj) {
      if (obj.style.color=="black") {
         obj.style.color="red";
         cbid='c'+obj.id;
         cb= document.getElementById(cbid);
         cb.checked=true;
      }
      else {
         obj.style.color="black";
         cbid='c'+obj.id;
         cb= document.getElementById(cbid);
         cb.checked=false;
      }
      return;
   

   To check the number of selection we need a counter that should be tested before registering a selection. For example:

   counter=0;
   function valitse(obj) {
      if (obj.style.color=="black") {
         if (counter==7) alert('No more selections!);
         obj.style.color="red";
         counter++;
         cbid='c'+obj.id;
         cb= document.getElementById(cbid);
         cb.checked=true;
      }
      else {
         obj.style.color="black";
         counter--;
         cbid='c'+obj.id;
         cb= document.getElementById(cbid);
         cb.checked=false;
      }
      return;