CSE 390 - Fall 2013 - Final Exam

Instructions

Complete the following 5 questions. Be sure to write your name at the top of all source files you edit. Note that it is best if you work on the questions you are most familiar with first so that you do not get stuck on one question for a long period of time. Please sit in your assigned seat. You'll have 2 1/2 hours to complete the exam's 5 questions.

Setup

  1. Download the exam file and save it to the C://Users/exam4 directory.
  2. Go to Start --> Computer and navigate to that directory to unzip the file. To do so, right-click on the zip file and select Extract All, you likely won't need to change the location, which should be C://Users/exam4/CSE390FinalExam. Extract it to that directory and then navigae there. Note that there is a zipped up project for each question. Also note that there is a Projects directory, where you should import the projects to.
  3. Start NetBeans by going to Start --> All Programs --> NetBeans 7.3.1
  4. Go to File --> Import Project
  5. One at a time, import each of the 5 NetBeans projects to the Projects directory.
  6. For each project, you'll want to choose the launch browser to run your Web app on. To do so, right-click on each project and select Properties, go to the Run tab and select your Browser from the drop down list. Chrome's debugger is nice, so I recommend that one.
  7. Finally, we'll need to setup Node.js. For this exam, we'll run it from the command line. So, go to Start and in the Search programs and files field type cmd. This is your command window. You should now navigate to your Question3 project, which will use Node.js. To navigate, dir is to ask what's in the current directory and cd let's you change your directory. Naviage to Question3's public_html/js folder. This is where you'll need to be to run the Node.js server for that question. Note, some computers will first need to setup socket.io, so before you even get started just type npm install socket.io. This should install the needed libraries. When you're ready to start the server for question 3 just type node Question3Server.js

Use of the Internet

Note that you will be permitted select sites on the Internet during the exam. You are not permitted to communicate with anyone during the exam, whether via email, texts, IMs, or message boards. Note that all Internet activity is being monitored and recorded during the exam, so please be sure to follow the rules laid out here. The following are the sites you are permitted to visit:


Question 1 - The Pulsating Square (20%)

The Question1 project contains an HTML file and a JavaScript file. Add the necessary code such that when the page loads, a filled red square alternately grows and shrinks continuously from a square with a length of 0 up to the length of the canvas itself. Note that if we were to change the dimensions of the canvas to a different sized square, it should still max out at that size. Your demo should use a frame rate of 50 Frames Per Second. Note that you may only use HTML and JavaScript in your solution.



Question 2 - My To Do List (20%)

The Question2 project contains an HTML file and two JavaScript files, one being jQuery. Add the necessary code such the user may type in a task into the text field and press the Add Task button, which will add the typed task to the ordered todo list. Note that you should use jQuery to do so. In addition, should the user click on one of the tasks in the list, it should turn red, while all other tasks in the list should be rendered in black. Again, you should make use of jQuery to accomplish this.



Question 3 - Chat Room (20%)

The Question3 project contains an HTML file and two JavaScript files, one for a Node.js client and one for a server. Add the necessary code such that the user may type in a name and message into the provided text fields and that message will then be displayed inside the chat_room_log table for all connected clients. Note that in the table, the user name should be in the left column, while the message is in the right. Also note that the user name should be colored blue in bold face type. Finally, note that pressing the Clear button should clear all messages in the table for all users. Note the demo below which shows users (Jack and Jill) chatting in two different browsers.



Question 4 - Even Odd Wiki (20%)

The Question4 project contains a JavaEE Web Application that employs use of JSF and a managed session bean but no database. Add the necessary code such that the user may add text into the text field and press the Add Wiki Entry button, which should then add a numbered entry to the wiki display. Note that this must be done through the bean, not client-side JavaScript. Also note that when there are an even number of messages the banner image should read Even, and when there are an odd number of messages the banner image should read Odd. The images below demonstrate both states.



Question 5 - The Favorite NYC Team Poll (20%)

The Question5 project contains a JavaEE Web Application that employs use of JSF, a managed session bean, and a Derby database. Note that before getting started on this question, all students must first do the following setup:

  1. Make the TeamVotes Database
    1. Go to NetBeans' Services Tab
    2. Open Databases
    3. Right click on Java DB
    4. Select Create Database
    5. Specify the new database using the following settings:
      • Database Name: TeamVotes
      • User Name: Q5
      • Password: Q5

  2. Populate the TeamVotes Database
    1. Go to NetBeans' Projects Tab
    2. Go to Question5/Source Packages/question5.entities
    3. Right-click on NyTeamsDBSetup.sql and select "Run File"
    4. Select TeamVotes as the Database Connection
    5. Enter Q5 as the User Name and Password

  3. Verify the populated Database
    1. Go back to NetBeans' Services Tab
    2. Open jdbc:derby://localhost:1527/TeamVotes[Q5 on Q5]
    3. Open Q5
    4. Open Tables
    5. Right-click on VOTES
    6. Select "View Data"

  4. Make Entity Classes
    1. Go back to NetBeans' Projects Tab
    2. Go to Question5/Source Packages/question5.entities
    3. Right-click on the question5.entities package
    4. Select New --> Entity Classes From Database
    5. Select New Data Source
    6. Create a new data source using the following settings:
      • JNDI Name: jdbc/TeamVotes
      • Database Connection: jdbc:derby://localhost:1527/TeamVotes [Q5 on Q5]
    7. Select and Add the VOTES Table
    8. Click Next and then Finish without changing any further settings

Now if you look at the project you should find the Facelet, the bean, and an entity class, which is all you should need for this question. Add code such that the user is asked to choose their favorite of the 9 NY Metro Area professional sports teams. The page should have a button for each one. Should the user press one, it should tally a vote for that team, which should be stored permanently in the database. Note that the database would be shared by all users. Note that once the user has voted during a session (which has been set to 1 minute without interaction), the user should only the voting results so far. The image below displays the initial UI presented to the user when a session starts, providing the voting options.


Once a vote has been cast during a session, the results screen is displayed, as shown below.


Submission

When you completed all of your work, zip up the directory containing all the projects into a ZIP file named LastNameFirstNameFinal.zip, where you put your last and first names in the file name. Then open a browser window and go to Blackboard to submit.