AOL Foodback AppPresented by: Florence Lau & Douglas

Wong

Minor Improvements

Circle Graph → Bar Graph• Changed the way data is displayed for a more accurate depiction

• Circle graph implies that the votes represent how the entire company feels about the menu as a whole, even though it may only be the opinions of a few

• Bar graph explicitly shows how many people voted “Like”, “Meh”, and “Dislike”Procedure:

1. Changed data in graph to start counting at 0, instead of random numbers

2. Uncommented the code for the bar graph and commented out the code for the circle graph

3. Revised parts of the code to correspond to the variables for the bar graph

Before:

After:

Fixed Graph Colors

• Switched the green and red colors in the graph to correspond with the labels associated with them

Procedure: 1. Switched the rgba values for ‘Like’ and ‘Dislike’ in Javascript

Improved Reports Page Format• Allows user to see the details of every single vote

• Helps user identify trends (e.g. Many vegetarians disliked this restaurant)Procedure: 1. Commented out the existing table2. Assign a variable to a new table in HTML with the same headings

(“Diets” and “Allergies”), with the addition of the “Votes” category 3. Used a for loop in JS to go through each vote entry and convert each

variable received after a vote is sent into their corresponding strings through: a. Accessing the existing variable set (“LABELS”) by assigning

different variables to the categories within “LABELS”

Roadblocks Encountered

• Displaying multiple allergies with commas and spaces in between, instead of only one when a user checks more than 1 allergy box

• Displaying “Unknown” when a user does not check any box

Procedure Continued4. (For “Diets” and “Allergies” Only) - Used the logical or operator (||) to make sure that whenever a vote omits a category, “Unknown” is displayed5. (For “Allergies” Only) - If “Allergies” category exists, make an empty string and array, then another for loop to go through each letter listed in the “Allergies” category

a. Convert each letter individually into their respective strings based on the “LABELS” variable set

6. Add these strings to the empty array7. Join these strings with “, “ between them 8. Add all these string labels to the table variable

Before:

After:

Brand New Features

Confirmation Message After Submitting• Shows a short message after the user presses the “GIVE

‘FEED’BACK” button to confirm that their vote has been recordedProcedure: 1. Added a confirmation message to the HTML file2. Used Javascript to hide the message at first, then remove the hiding

function after the button is clicked to display the message

Before:

After:

Comment Required

Required for Bad and Meh

[Demo]

Historical Votes

2 Days

Menu Change

Comment Change

Error Prevention (Duplicates, Edge Cases)

[Demo]

Misc Feature

Full Menu Link Now Available

Feature in Testing Branch

Back to Main Page

What’s Next?

What’s Next?

• Google Calendar API

• iPad

• Filters for reports page

• Rewards Integration

• Login authentication page for administrator to edit menu