aol foodback app
TRANSCRIPT
![Page 1: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/1.jpg)
AOL Foodback AppPresented by: Florence Lau & Douglas
Wong
![Page 2: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/2.jpg)
Minor Improvements
![Page 3: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/3.jpg)
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
![Page 4: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/4.jpg)
Before:
![Page 5: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/5.jpg)
After:
![Page 6: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/6.jpg)
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
![Page 7: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/7.jpg)
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”
![Page 8: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/8.jpg)
![Page 9: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/9.jpg)
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
![Page 10: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/10.jpg)
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
![Page 11: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/11.jpg)
Before:
![Page 12: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/12.jpg)
After:
![Page 13: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/13.jpg)
Brand New Features
![Page 14: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/14.jpg)
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
![Page 15: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/15.jpg)
Before:
![Page 16: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/16.jpg)
After:
![Page 17: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/17.jpg)
Comment Required
Required for Bad and Meh
[Demo]
![Page 18: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/18.jpg)
Historical Votes
2 Days
Menu Change
Comment Change
Error Prevention (Duplicates, Edge Cases)
[Demo]
![Page 19: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/19.jpg)
Misc Feature
Full Menu Link Now Available
![Page 20: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/20.jpg)
Feature in Testing Branch
Back to Main Page
![Page 21: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/21.jpg)
What’s Next?
![Page 22: AOL Foodback App](https://reader035.vdocuments.us/reader035/viewer/2022062902/58ee85341a28aba0218b460f/html5/thumbnails/22.jpg)
What’s Next?
• Google Calendar API
• iPad
• Filters for reports page
• Rewards Integration
• Login authentication page for administrator to edit menu