Designing scroll boxes that are not continuous and tracking the time spent in each section

Question

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them.

Specifically, I aim to design a scroll box featuring two paragraphs where only one is visible at a time (non-continuous scrolling) for integration into a Qualtrics survey. While I've come across HTML tutorials on creating scroll boxes (), they primarily cover continuous scrolling methods.

In addition, I require a method to quantify the duration each paragraph is displayed on the screen. Even if a reader switches between paragraphs multiple times, I need accurate time measurements for individual paragraph visibility. Although resources exist on tracking scroll amounts (), there's limited information on tracking the time spent within specific sections of a scroll box.

I'd greatly appreciate any guidance or support on this matter!

javascript jquery html css

Answer 1

Answer №1

There is no defined method for determining when a user enters or exits a scroll box, but one approach to measuring the time spent in each scroll box involves the following technique:

var scrollBox1Time = 0;
var scrollBox2Time = 0;

//When user enters scroll box 1
var startTime1 = new Date().getTime();

//When user exits scroll box 1
var endTime1 = new Date().getTime();
scrollBox1Time += (endTime1-startTime1);

//When user enters scroll box 2
var startTime2 = new Date().getTime();

//When user exits scroll box 2
var endTime2 = new Date().getTime();
scrollBox2Time += (endTime2-startTime2);  //Adding time for scroll box 2

The time is recorded in milliseconds.

Answer 2

There is no defined method for determining when a user enters or exits a scroll box, but one approach to measuring the time spent in each scroll box involves the following technique:

var scrollBox1Time = 0;
var scrollBox2Time = 0;

//When user enters scroll box 1
var startTime1 = new Date().getTime();

//When user exits scroll box 1
var endTime1 = new Date().getTime();
scrollBox1Time += (endTime1-startTime1);

//When user enters scroll box 2
var startTime2 = new Date().getTime();

//When user exits scroll box 2
var endTime2 = new Date().getTime();
scrollBox2Time += (endTime2-startTime2);  //Adding time for scroll box 2

The time is recorded in milliseconds.

Designing scroll boxes that are not continuous and tracking the time spent in each section

Answer №1

Similar questions

The tabs are visible in the drawer, but the transition is not occurring

Tips for correcting boolean checks and verification for undefined variables

Elements featured in the header: logo, tagline, graphics, and more

Ajax encounters difficulty in parsing JSON data

Save a randomly generated string in the Session, which will be replaced when accessed through a different PHP file

Are there any reliable PHP classes available to generate HTML tables efficiently?

Find the variance between the initial time and the present time, as well as the final time and the current time

The CSS focus-within and hover properties are not functioning as expected

Sharing parameters between functions in JavaScript

Using React Higher Order Components to transmit data attributes to the initial child/element within the encapsulated component

Is React.js susceptible to XSS attacks through href attributes?

I am interested in scraping a webpage, how should I go about it?

Iterate through a collection of nested objects and check them against an object contained within an array

Utilize the `npm ls somepackage` command to adhere to version range specifications

Conceal a child div through the use of AJAX technology

Setting the Disabled and Checked attributes on HTML Elements based on certain conditions

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

JavaScript has issues with undefined array elements

Interacting with local data using Express server

Tips for positioning a label at the top of a table row in an asp.net C# application