We will continue working on the Brain Age exercise on Wednesday and the code will be due on Monday, March2 @9am. Note that you do not need to draw the lines between the boxes. You only need to keep track of the last box the user clicked on, and keep the timer going.
Monday, February 23, 2009
jQuery from Jose Vidal on Vimeo.
- You display the set of numbers 0 thru 9 and the set of letters A thru J, each one in a box and each one in a random location. Make sure that they all fit within the viewable window. Make sure that none of the boxes overlap.
- The game then begins, you will show a clock that counts the number of seconds that have elapsed. The clock is updated every second.
- The user must click on the boxes in the order A, 1, B, 2, C, 3.... When he gets to 9 the clock stops and the game ends.
- If the user clicks on a wrong box, say A then B, you will make the background of the box red, for one second, then turn it back to transparent. Also, 3 seconds will be added to the clock for every wrong click.
One thing you will need to use is the
onclick attribute, which we have not discussed yet. Just note that you can add this attribute to an
a as follows:
Wednesday, February 18, 2009
Monday, February 16, 2009
- Create a
Card(suit, number)constructor with data members
suitand number. Make it so that it is impossible to change the suit and number of a card (yes, you will need to use closures). Create the following functions for this prototype:
toString(): returns a string representation of the card, for example: AD, 4C, 2D.
equal(otherCard): returns true if this card equals
cmp(otherCard): returns -1 if the number of this card is less than otherCard, 1 if it is greater, and 0 if they are the same.
constructor with data members
cardswhich is initially an empty array. It should also have the following member functions:
shuffle: shuffles the cards. Extra credit: what is the minimum number of swaps required to ensure that a deck is shuffled?
addCards(x): takes as input
xwhich can either be an array of Cards, or a Deck, or just a Card, and adds it to the deck.
deal(): returns a card from the top of the deck and removes it from the deck.
Saturday, February 14, 2009
So, go sign up and play with it! In case you are still unsure about what I mean by web applications: Bespin is a web application. This class is about learning to write software such as Bespin.
Thursday, February 12, 2009
Wednesday, February 11, 2009
This week's lecture is broken up the two videos below, which you must watch by Monday, Feb. 16
- Implement the function
isPalindrome(x)which returns true if and only if x is a string that is a palindrome, that is, it reads the same forward an backwards: A man, a plan, a canal, Panama!
- Implement a function called
chechISBN(id)which takes as input a string (
id) and returns true if and only if the
idis a valid ISBN number. Please read wikipedia section which gives you the equation for verifying the check digit in an ISBN number.
Implement a function called
isNPI(x)which takes as input a 10-digit number
xand returns true if that number is an NPI number. There procedure for checking if a number is an NPI number is described here, see the "Example of Check Digit Calculation" section. Note that the check bit is the last (10th) digit in the number.
- Implement a function
createDeckwhich returns a JSON object that represents all the cards in a deck of cards. The object return should be an array with 52 object, each one of which should have a
valueproperty. The suits are: hearts, diamonds, clubs, spades. The values are, Ace, 2, 43, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King.
Friday, February 6, 2009
Wednesday, February 4, 2009
There is also a version formatted for the iphone.
Monday, February 2, 2009
The required lecture for this week is Wednesday's guest lecture by Jason Beaird. However, I also found the video below which is a presentation by Steve Krug author of the excellent Don't Make Me Think.
The video emphasizes how you should always do user testing. This applies equally to web design and to web application development. You can either convince yourself that you know how your users will use your website (you are deluding yourself), or you can bring a few of your friends over and watch them as use your website/application. Your friends will always do some things that you did not expect. Always test!
In this exercise we will explore the power of CSS by changing the look of a plain XHTML without modifying any of its XHTML, only by using a style sheet. The exercise is inspired by css zen garden, but we will keep it simpler and build it step by step.
You will need to download css-exercise.html to your public_html. Open that file in your editor and you will see that it uses a style sheet file called
mystyle.css. You will write that file. You cannot modify css-exercise.html, only add information to your
mystyle.css in order to achieve the following effects:
- Lets start by giving it some color. Change the background color of the page to a nice off-white and change all the headers to a contrasting color. You can also use a background image if you feel inspired.
- Make the
quickSummarya separate box on the left such that all the rest of the text flows around it.
- The contents of the
quickSummaryshould stand out from the rest of the text. Change the text in there to italics and use a different font. Also, change the color to a really dark color and the text color to a light color (so we can read it!).
participationare still boring. Change their titles to a sans-serif font. Change the background of the titles to a different color so the titles stand out. Spread out the letters in the titles.
- The previous three elements should be separated from each other, and their headers should have some extra whitespace on top of them, but not on the bottom.
footershould not draw attention to itself. Make the text small, and make it flush with the right margin. Also, draw a horizontal line before the text.
linklistis really a menu that should appear at the top-left of the page, move it there. Change its style so it is clearly recognized as a menu and the hyperlinks look like buttons that change color when the user hovers over them.
- Finish up your design with whatever flourishes you need to make the page look nice. The final page must look nice.