Learn event handling, element offset, data manipulation, timers, and lots of JavaScript/jQuery!
- Add a fixed button (use Bootstrap to make it look nice) that a user can click to view analytics about their browser viewing behavior.
- On the button click, the data collection must pause while the end user is viewing the analytics. Use a modal or a light-box to display the data. Make it look nice! Add another event to re-trigger the collection of data after the user is done viewing the analytics.
- You should display the following data:
- Percentage of the page viewed
- Total distance scrolled
- Time before clicking the green "Sign Up" button
- Time spent on page
- Time spent on each section of the page
You should be able to add the script to any web page!
- Display the results in a chart or graph
- Add unit tests.
- Add a heat-map that visually shows how long a user spent looking at different parts of the page.