Description

Assignment #3
JavaScript
CS193C Summer 2017, Young

As you can see the webpage features a table displaying information on Bay Area Colleges and Universities. At the right is a set of controls to allow searching. The Search Criteria allows the user to limit the display based on the Maximum Tuition, Maximum High (75 percentile) SAT score or the Minimum Low (25 percentile) SAT score. When the “Update” button is clicked the table is regenerated.
Note that the search criteria is combined as an “AND”, so universities listed must match all criteria.
Implementation Notes
If you’re looking for some help implementing, you might want to try implementing in the following order:
• Design the output table using static data, so you know what you want it to look like. In other words, write an HTML file without any JavaScript that displays data in the table format you want.
• Now try generating some sample data in the format of the output table, ignoring the search criteria. In other words, try generating the output table from the previous step by using JavaScript. Ignore the search criteria.
• At this point, you should have convinced yourself that you can dynamically create a table from JavaScript. Now set that work aside and work on making sure you can meet the search criteria. Develop a separate webpage that lists universities which match the search criteria in an “alert” dialog box.
• Now, put the two halves together by generating the output table based on the search criteria.
The data is from US News & World Report’s Best Colleges 2015 version.
Matching
For our last question we will develop a simple matching game with cards. This was originally a midterm question, so if you want to get a sense of how difficult midterm questions will be, here’s a good example.
In order to do this problem, you’ll need to get a set of image files from the assign3.zip file.
Here’s a description from the user’s perspective. We have a deck of six cards. The cards are from the hearts and the clubs suites. They are numbered 1, 2, and 3. The deck will be shuffled and laid face down on the webpage. The user will click on an initial card which will stay face up, the user will then click on a second card. Both cards will stay face up until 1.5 seconds after the second card is flipped. Then if both cards have the same value – say for example one is the 2 of hearts and one is the 2 of clubs, they will both disappear. If instead the cards have different values, they will both flip to face down. The user can then click another card and the process repeats itself until all matches have been found. To keep things simple, we don’t do anything special after all the matches have been discovered. Just leave the page with all the cards gone until the user hits the “Restart” button.
At the bottom of the page is a “Restart Game” button that can be used to reset the page – reshuffling the deck and laying out six cards face down again. The user can click this at any point in time and it should respond correctly.
Here are some screenshots of the website in action. Initial placement:

Flipping one card:

Flipping a second card. Both cards stay visible for 1.5 seconds after the second card is flipped before they both flip back over:

3
Here I’ve found a match. Both cards will be visible for 1.5 seconds after the second card is flipped, then instead of flipping back over they will both disappear. Here’s the full sequence:

Here are some additional notes for your implementation:
• We aren’t particularly concerned with exactly how you’ve laid out the webpage. The six cards should be placed neatly in a single line, leave a reasonable amount of space between them so they aren’t too crowded together.
• As previously noted, when two cards have been clicked on, they will both stay face up for 1.5 seconds after the second card has flipped. For full credit, you need to ignore the user clicking on other cards, while the initial pair is still faceup—you do not want to have a situation where the user is somehow able to have three cards flipped up at once. However, the user should still be able to click on the “Restart Game” button at any time.
• The card backs are shown by using the “back.png” file. I didn’t actually eliminate the cards when a match occurred, instead I replaced the card with the “clear.png” file which is an empty white square the same size as the card images. However, you’re welcome to solve this any way you like. Both the “back.png” and “clear.png” file are included with the assignment downloads. Do make sure clicking on the “clear.png” image doesn’t flip a card back faceup.

Implementation Suggestions
Here are some suggestions for how to go about implementing this. They are in order from what I view as the easiest to hardest, but you are welcome to go out of order if you want.
1. The first and simplest step is to just layout the webpage showing card backs and the reset button.
2. Next focus on getting some of the simpler game mechanics done before dealing with randomization and matching. Once you’ve got the webpage layout working, assign fixed cards to each of the card images. For example, assume that the left-most card is always the 1 of hearts, the second card is always the 2 of hearts and so on. When the user to click on any card flip it over by swapping in the appropriate card image. Leave that card face up.
3. Add the ability for the user to reset the cards to back side up using the “Reset Game” button.
4. If you’ve got steps 1-3 done, the next step is to get cards to flip back over to show their backs automatically. When a single card is flipped over, leave it face up for 1.5 seconds and then flip it back over.
5. Add blocking, so that while a card is temporarily flipped over, clicking on other cards will be ignored until the first card goes face down again.
6. Add randomization to the order of the cards, so that the user will get a different ordering
when they load the webpage and each time they hit the “Reset Game” button. You can use the Math.Random method described here:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
5
7. You’re almost done, now you just need to add matching.
Credits
The cards are by David Bellot and were found on the Wikimedia website. They are distributed under GNU Lesser General Public License.