Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 7

536/539

Department of Information Sciences & Technology

Client-Side & Server-Side Programming


Rochester Institute of Technology

Project 3: Jeopardy! Part A (server)


Goal for Part A: Create the back-end of client/server application that will allow people to play a Jeopardy-like game in their web browser.

Requirements
1. Major navigational pages: a. admin.php i. If the user has not logged in, redirects to login.php ii. Has a logout link that logs the user out by calling logout.php iii. Has controls that allow an authenticated admin user to create, read, update, and delete records in all tables listed below iv. Sanitizes all data before inserting into the database b. index.php i. Has no viewable content ii. If a user is authenticated, redirects to admin.php iii. If a user is not authenticated, redirects to login.php c. login.php i. Displays a login form with fields for username (email address) and password ii. Upon successful authentication against the database, creates session variable(s) that will be used to keep the user logged in iii. Uses a cookie to store the logged-in user's username (email address) d. public.php i. Exists only to help with debugging and visualizing the categories and questions ii. Displays all questions and answers in all categories in all rounds in all games such that it's obvious which category, round, and game each question and answer are in 2. Public "service" pages: a. get_games_list.php i. Returns all needed information about all available games, including: 1. Game titles 2. Round titles 3. Category titles ii. Returns a well-formed XML document (you decide on the format) created with DomDocument or another PHP class b. get_game_instance.php?game=xxx&round=yyy i. Returns all needed information required to play a round of the game, including: 1. Question 2. Answer 3. Question value ii. Returns a well-formed XML document (you decide the format) created with DomDocument or another PHP class

736/739 Project 3: Jeopardy!

Page 1 of 7

536/539
Department of Information Sciences & Technology

Client-Side & Server-Side Programming


Rochester Institute of Technology

3. "Helper" pages: a. Database.class.php i. Handles connecting to and querying the database ii. Provided to you in class b. Page.class.php i. Handles the display of the navigational pages ii. Provided to you in class, but you'll want to expand its functionality c. logout.php i. Called when the logout button is clicked ii. Unsets and destroys the appropriate session variables, deletes the cookie storing the username, and redirects to login.php d. config.inc.php i. Defines your database credentials and should be included before Database.class.php ii. Provided to you in class e. possibly several others 4. Coding: a. Your code will be well structured, with re-usable classes and functions. Comments will be abundant. b. MySQLi (or PDO) must be used for all database calls. Any queries that accept user input must use prepared statements (bound parameters). 5. Data model: j_game int primary, auto-increment id varchar(30) title j_round int varchar(20) j_category int int int varchar(100) j_value id value int int j_question id category_id value_id question answer int int int text text j_user varchar(30) text int primary, auto-increment #foreign key #foreign key primary

id title

primary, auto-increment

id game_id round_id title

primary, auto-increment #foreign key #foreign key

email password privileges 736/739 Project 3: Jeopardy!

primary #md5 or sha1 hash #0=none; 1=admin Page 2 of 7

536/539
Department of Information Sciences & Technology

Client-Side & Server-Side Programming


Rochester Institute of Technology

6. Content a. You must have at least one game with two rounds, and five categories and 25 questions and answers in each round. The topic can be whatever you would like. The categories and questions must be meaningful and not merely placeholder content. b. You must have at least two user accounts with admin privileges: one for yourself and one for the professor. Be sure to include the login information for the professor in the dropbox comments when you submit the project. 7. Hints a. Before echoing out the XML with get_games_list.php and get_game_instance.php, include the following commands: // tells the browser to render the page as XML header( 'Content-Type: text/xml' ); // allows AJAX to retrieve the file from a different domain header( 'Access-Control-Allow-Origin: *' ); b. Making a single database call that retrieves a lot of data is much quicker than making several database calls that each retrieve small amounts of data. Consider this when writing the queries for get_games_list.php, get_game_instance.php, and public.php. c. When logging the user out, be sure to use unset() to remove each session variable, session_destroy() to remove the session instance on the server, and setcookie() to remove the cookie storing the user's email address. d. Much of the functionality on admin.php is repeated for each database table. This means that this functionality is the perfect candidate for functions!

736/739 Project 3: Jeopardy!

Page 3 of 7

536/539
Department of Information Sciences & Technology

Client-Side & Server-Side Programming


Rochester Institute of Technology

Grading Rubric
Requirements Peer Evaluations admin.php Checks for login and redirects if necessary Logout link Controls for creating, reading, updating, deleting records in all tables Sanitizes all input index.php Redirects to admin.php, if logged in Redirects to login.php, if not logged in login.php Authenticates user against database Creates session variable(s) Creates cookie to store username public.php Displays all information in all games get_games_list.php get_game_instance.php Database.class.php Page.class.php logout.php config.inc.php Content (game with two rounds; two admin user accounts) Total Lost points for Not located on nova Use of original MySQL API functions (not MySQLi) User input queries without prepared statements Poor coding (comments, indentation, structure, etc) Extras Ability to edit games (rounds) in tabular format (contenteditable attribute?) Content for more than one game Final Jeopardy* Questions with images* Multi-player (users log in to game, allow users to 'buzz' in for answer, 'host' awards points for correct answer to first 'buzzer', score maintained for each user)* Possible Points: 10 2 1 13 3 2 2 3 3 3 7 6 6 3 6 4 2 9 85 Possible Deductions: (10) (20) (20) (20) Possible Points: 15 6 10 8 40

736/739 Project 3: Jeopardy!

Page 4 of 7

536/539
Department of Information Sciences & Technology

Client-Side & Server-Side Programming


Rochester Institute of Technology

Project 3: Jeopardy! Part B (client)


Goal for Part B: Create the front-end of a client/server application that will allow people to play a Jeopardy-like game in their web browser.

Requirements
1. Required files: a. index.html i. Located on gibson ii. Obtains all data dynamically from the server application (on nova) iii. Presents the user with a list of all available games (which also shows the rounds and categories) iv. Allows the user to select which game to play v. When the user has made a choice of which game to play, requests all data for the first round of that game and stores that data (in an array/object) vi. Keeps track of game state (In this case, game state means displaying all of the available categories and questions. If a question is available to be chosen, the point value will be visible. If a question has already been chosen, there should be a visual indicator that the question is not available.) vii. When the round is over, gives the user the option of continuing to the next round or going back to the main menu viii. Includes a reset button that allows the user to go back to the main menu at any time ix. All content is created and appended dynamically with JavaScript/jQuery x. Detects which browser is being used, and if the content doesn't display correctly in that browser, redirects to an error page or presents an error message xi. Uses jQuery extensively for dynamic creation, animation, form validation, browser detection and redirection, etc xii. Uses at least two jQuery plugins that augment your project (they should not be gratuitous additions!) xiii. Uses AJAX to retrieve data from the server application b. submit.html i. Presents a form to the user to submit a new question and answer ii. Lets the user select which game, round, and category (and maybe even value) the suggestion is for iii. Uses extensive HTML5 and jQuery form validation iv. Submits the data to a PHP script on the server that does something with it, e.g. emails you (the developer), saves it to the database, etc c. help.html i. Gives a brief summary of the rules for the user as you have adapted them for your application (the rules for the 'real' game show can be found at http://en.wikipedia.org/wiki/Jeopardy!) ii. Lists any sources that you used when writing your questions and answers

736/739 Project 3: Jeopardy!

Page 5 of 7

536/539
Department of Information Sciences & Technology

Client-Side & Server-Side Programming


Rochester Institute of Technology

Grading Rubric
Requirements Peer Evaluations index.html Obtains all data from server User selects game from list of available games Game state is maintained and properly displayed (both rounds!) Option for next round or main menu Reset button Browser detection and redirection At least 2 jQuery plugins Retrieves data via AJAX submit.html Form with options for selecting game, round, and category Extensive form validation PHP script handles submission help.html Summary of rules and resources Total Lost points for Not located on gibson All content not created dynamically jQuery not used extensively Poor coding (comments, indentation, structure, etc) Extras WYSIWYG editor on submit form Captcha on submit form Mobile version Outstanding design Final Jeopardy* Questions with images* SVG 'splash' page Other SVG additions (not gratuitous!) Multi-player (see description above)* Possible Points: 10 5 4 18 4 3 5 8 8 5 5 6 4 85 Possible Deductions: (10) (30) (30) (20) Possible Points: 4 4 10 8 10 8 8 8 20

736/739 Project 3: Jeopardy!

Page 6 of 7

736/739

Graduate Client-Side & Server-Side Programming


Rochester Institute of Technology

Department of Information Sciences & Technology

Project 3: Jeopardy! Graduate Students


Graduate students must complete all requirements listed above, in addition to the following:

Server Application (739)


Graduate students must include an AJAX proxy for all calls from the client application to the server application. All user interactions in the client application (on gibson) will result in a call to a proxy script on gibson, which will forward the request on to the server application (on nova). The proxy will also handle the server response and make it available to the client application. Without the proxy, the client application will require the end user to have the RIT VPN client connected. If the proxy is functioning correctly, the VPN will not be required.

Client Application (736)


Graduate students must include the ability to edit each round in tabular format. Note that this functionality will actually be built into the server application on nova, but will use clientside techniques. All questions and answers for a round must be shown in a table (or stacked divs), and the admin user must be able to click on any question or answer and edit it in place (i.e. clicking on a question or answer should not bring the user to a new page to edit the data). When the user has completed changing a question or answer, an AJAX call must be sent to the server application, which will add/update the data in the database.

Grading
Both the server application and client application grades will be out of 115 points. Graduate students must complete all of the requirements listed on previous pages, plus the requirements on this page. Doing so will result in 100 out of 115 points. Students must also complete an additional 15 points of extras for a perfect score.

736/739 Project 3: Jeopardy!

Page 7 of 7

You might also like