Store all you work in a folder called project3.
No spaces. No capital letters.
The instructor will setup private FTP accounts so students can test and submit their work. The instructor will email each student account details. However, most of the project can be implemented and tested locally, so start immediately.
Download the following zip file that contains a starter project that you must use.
This framework follows best practices using Bootstrap with the
CSS and JavaScript files stored in css and js subfolders.
Remember to right-click, select Save Link As..
and then unzip the file, which contains the sub-folders with starter css and js files.
The JavaScript file in the starter framework
has detailed comments that will help you get started. After downloading,
immediately open js/script.js and read the comments
from top to the bottom and then read them again from the bottom
to the top. Before coding it is important to understand how
the different functions work together.
Implement and customize the following application:
Note that the JavaScript in the solution is obfuscated. You must write your own JavaScript code that is properly indented with meaningful variable names. If you submit this solution or try to un-obfuscate it and claim that it is your own, you will get a zero and a full letter grade reduction in the course.
This application allows a user to select items and then rank them using pair-wise selection. The items the user selects are added to an array. Then, two items are selected at random and the user can select which item they "like" better. The item they did not select is then replace with another randomly selected item and they are asked to select again. This loop continues until all the user's selected items have been shown.
All the user's selections are sent via AJAX/JSON to server-side scripts that accumulate the data in text files. All of your client-side applications will append to these files, so it will be very interesting to see your items get added.
In project 4, you will store your data separately and process it to create a histogram of the most selected items and an overall ranking of the items using a simple variation of the PageRank algorithm.
To make this project more interesting, pick items that interest you and pick your own selection criteria.
You are more than welcome to implement this application in your own unique way, but if you are not comfortable getting started, you can simply follow the structure and the detailed hints in the comments of the starter file. The comments will encourage you to create separate functions that you can test independently.
The AJAX code will not work unless you upload your JavaScript and the following PHP script to your virtual server.
The instructor will email each students information on how to connect to private FTP accounts that will be used for both testing and submission.
| # | Component | Points | Description |
|---|---|---|---|
| 1 | Setup | 20 | Display the initial message, the next button and all the items as checkboxes |
| 2 | Checkboxes | 10 | Clicking the checkboxes properly adds the highlight class to the item and adds the value to the selected items array |
| 3 | Messages | 10 | Clicking a checkbox updates a properly formatted message to the message area |
| 4 | nextButton | 25 | Clicking the next button properly updates the message, button and list area, and properly sends the selected items using the sendJSON function |
| 5 | Item Buttons | 10 | The two initial item buttons are properly displayed after clicking the next button |
| 6 | Ranking | 20 | Clicking one of the item buttons, properly changes the value and color of the other button, sends the ranking to the server using the sendJSON function, and removes the item from the selected items array |
| 7 | Termination | 5 | When the selected items array is empty, the message area, button area, and list area are update properly |
Upload your project3 folder to your private FTP account.
This project is individual. You should not share your code with anyone in the class. You must protect you private FTP account.