• Assigned: W 10/10
• Due: W 10/17
• Possible points: 8

Description

In this course, we will use jQuery to create web pages on the fly, add behavior to a web page, change the HTML, and change the presentation of a page. Our tabs example (from class M 10/8) showed how to add tab behavior to a previously styled page. In this assignment, you will use jQuery and Javascript string processing to make substantial modifications to the HTML of a page.

There are two independent exercises in this assignment. They take short, abbreviated HTML code and translate it into a form that is much easier for the user to understand. This technique is commonly used both at the server side (often with PHP) and on the client side (with JS). Both problems are taken from web pages on the card game Bridge.

1. Bidding sequence. In the game of bridge, players bid for the contract by specifying how many tricks they think they can take and their preferred suit. The two partners communicate to each other describing their hands by a sequence of bids. For example, a bidding sequence between 2 partners may consist of the series of bids: "1h 1s 1N 2d ?" where the ? means it is the first bidders turn to bid again. A much clearer presentation of this same sequence is: 1 – 1,  1N – 2, ? In this problem, you will convert HTML for the first into the second. See the skeleton and notes for details. (The notes are in a txt file to make it easier for me to include (uninterrupted HTML).
2. Bridge hand. A hand of cards at bridge consists of 13 cards from the 4 suits: spades, hearts, diamonds and clubs. A shorthand representation of a bridge hand is aqt93#kt6#qj5#k8 where the suits are shown in the order spades, hearts, diamonds, clubs. A far more appealing presentation is
   AQT93 KT6 QJ5 K8
   See the skeleton and notes for details.

Requirements

You will not need to add any CSS for this assignment. Classes (such as biddingSequence and bridgeHand) can be used solely for JS without any associated CSS rules. For practice with jQuery and not just string processing, you must use either prepend or append in your code.

Fine points.

• Routinely use trim( ) to eliminate any whitespace at the start or the end of a string. This will be a common practice throughout the semester.
• Inserting the HTML entity ' ' requires the use of its unicode representation

      str = str + '\u2009';
      
      attempting
      
      str = str + ' ';
      
      results in the 8 individual characters being inserted. No. Don't ask why.
      No one knows. Javascript is just that way sometimes.
            

Turn in the following in the following order:

1. Cover page.
2. Javascript code. This is simpler if you put your JS/JQ in a file separate from the HTML.
3. The contents of the body after your Javascript runs. In Firefox, view the source. Cut and paste the relevant portion into a text document. Microsoft Word will cause problems since it want to format the text for you. Do not turn in the head element.
4. Screen shot of your output.

Grading

• 60% Correctness
• 40% Good programming style - indentation, clarity, descriptive names, simplicity, use of symbolic constants, etc.

Objectives

Write excellent code. Use of Javascript string functions: split, indexing, trim (not all of these need to be used in your assignment). Use of jQuery functions such as: each, append, prepend, text (not all of these need to be used in your assignment).