CSC 343: The Week beginning Jan. 26

• Homework: HTML: Make a page that uses <cite>, <code>, <dl>, <dt>, <dd>, <figure>, <figurecaption>, and <footer>. See http://www.w3schools.com/tags/ for explanation and examples of how to use these HTML tags.
  
  CSS: Watch the CSS Display Property Tutorial and the Z-Index CSS Tutorial Then make a page with style (or separate style sheet) that shows you using the following four values for the display property: inline, block, inline-block, and none. It should also use the z-index. To demonstate the latter it must have two overlapping elements with the later one being positioned (partially) under the earlier one.
  
  JavaScript/jQuery: Do the following tutorial: jQuery Tutorial #5 - Building a jQuery Tab Panel Widget
  A head start: TabPanel.htm (He doesn't show his style, so I provided some.)
  
  Due: Feb. 3
  
  
• Tuesday:
  
  SelectCompare.htm compare old-fasioned JavaScript drop-down select and jQuery drop-down select.
  
  CheckBoxListCompare.htm compares old-fashioned JavaScript and jQuery array of checkbox inputs. It also uses the <label> element which extends the region of the document that the user can click on. (I edited last week's RadioButtonCompare.htm to include labels.)
  
  Arcimboldo.htm shows a jQuery image. (It also uses some of the styling found in this week's homework.)
  
  ImageCompare.htm Changing an image src versus adding an image.
  
  DiceRollTimer.htm uses Die1.gif, Die2.gif, Die3.gif, Die4.gif, Die5.gif and Die6.gif. Demonstrates two types of timer methods: setInterval/clearInterval and setTimeout
  
  Demo jQuery attr versus prop for checkboxes: CheckboxAttrVersusProp.html
  
  Lab A (Kolar)
  Make a page inspired by the work of Jiri Kolar.
  (KolarFiles.zip)
  
  
  
  
  • Use jQuery.
  • Design the page as shown in the screen captures. Two columns. Two image elements. Two drop-down selects. A button. And a div.
  • You can use Kolar_headstart.txt to make the options for the drop-down selects.
  • When the user changes the option in the drop down select, display the corresponding image.
  • When the user clicks the button create a loop that adds a series of img elements to the div alternating between the two images.
  
  
  Lab B (Yahtzee)
  
  
  
  
  • Use jQuery
  • Design a page like that shown with five images (of dice) and five checkboxes and a button.
  • When the button is clicked simulate a roll of the dice like done in the program above but only roll the dice that have their checkbox checked. If you are looking at an individual checkbox, use prop which will be true or false instead of attr which will be checked or undefined