JSFiddle: https://jsfiddle.net/nathan127/dorm3cch/127/

A client hired me to create a webpage for Qualtrics for a survey to be taken by ~60,000 participants. The page presents the user with 4 nutrition bars and the survey asks which one they would purchase, after they move over a nutrition bar to see it’s nutritional facts. The client requested a way to keep track of the number of times a user views the nutrition label and the total time the user was looking at the nutrition label. I was provided template HTML to get started and was limited to HTML and Javascript.

I used the onmouseover and onmouseoff events to switch between pictures, add to count, and to start and stop a timer. The timer was created with the setinterval() function and we learned it needed to be set to at least 15ms due to browser limitations.

Later, the client requested switching from hovering the mouse over the picture for their nutrition to clicking on the picture instead. This took changing the event listener from onmouseover/onmouseoff to onmousedown/onmouseup respectively.

It was then requested that the webpage randomize every time the page loads. This was the offset participates more likely to look at the upper left option simply because it was “first”. To accomplish this, I shuffled a small array to provide randomization. Then, I associated each position on that shuffled array with a nutrition bar. This shuffled each nutrition bar and its data together every time the page loaded.

Basic site with place holder images