We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Solved
javascript timer over multiple pages
Posted on 2011-03-09
I was shown the code below by another expert, and it's worked wonderfully for the parts where i needed to just send the time spent on one page to the database.
However, there are a few pages where it would be easiest that it keeps the time over a number of pages. I have a learning section for this module/quiz where there are different pages of information they can review before taking the test questions. I want to know how long they spend looking at those pages, they can move freely between the 5 pages until they click the finished link in the navigation.
Is there a way to accomplish what i'm looking to do? Thanks for any help.
However, there are a few pages where it would be easiest that it keeps the time over a number of pages. I have a learning section for this module/quiz where there are different pages of information they can review before taking the test questions. I want to know how long they spend looking at those pages, they can move freely between the 5 pages until they click the finished link in the navigation.
Is there a way to accomplish what i'm looking to do? Thanks for any help.
<script>
var currentTime = new Date();
var startTime = currentTime.getTime();
function getElapsedTime()
{
var endTime = new Date();
var elapsedTime = (endTime.getTime() - startTime);
form1.elapsedTime.value = elapsedTime;
}
</script>
<form id=form1 target=_blank>
<input type=hidden name=elapsedTime>
<input type=submit onclick="getElapsedTime()">
</form>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3-
3
6 Comments
How are you saving the partial answers from each page within the set of five until the user finally clicks the finished link? Cookies?
Related question - How do you gather up the answers from all five pages into one form?
We need to (essentially) save the startTime variable along with the other partial answers.
Need to see more of your code.
Related question - How do you gather up the answers from all five pages into one form?
We need to (essentially) save the startTime variable along with the other partial answers.
Need to see more of your code.
the 5 pages that i want to gather time info for are just teaching pages, they is no user interaction besides reading, but for the purposes of comparison for the study, i want to see how long it takes the user to absorb the information.
Essentially there 4 pages with information like the code below and the navigation has a finished button/page where they'll leave the learning section and proceed to the 'test'
Essentially there 4 pages with information like the code below and the navigation has a finished button/page where they'll leave the learning section and proceed to the 'test'
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1;">
<title>Digital Natives Testing Module</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if IE]>
<style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]-->
</head>
<body>
<section id="page"> <!-- Defining the #page section with the section tag -->
<div class="header"> <!-- Defining the header section of the page with the appropriate tag -->
<h1>Test A</h1>
<p> </p>
<nav> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li><a href="testA-overheat.html">OVERHEAT</a></li>
<li><a href="testA-jammed.html">JAMMED</a></li>
<li><a href="testA-continue.html">CONTINUE</a></li>
<li><a href="testA-stop.html">STOP</a></li>
<li><a href="testA-finished.html">FINISHED</a></li>
</ul>
</nav>
</div>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<div class="article" id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>jammed</h2>
<div class="line"></div>
<div class="articleBody clear">
<div class="figure"> <!-- The figure tag marks data (usually an image) that is part of the article -->
<img src="img/a_jammed.png" alt="jammed" />
</div>
<p>If the machine gets a part stuck in the belt, this may damage the machine. When the machine displays a triangle, this indicates that it is jammed and the belt needs to be cleared.</p>
</div>
</div>
<!-- Article 1 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
</footer>
</section> <!-- Closing the #page section -->
</body>
</html>
I think I have the answer. It is a little hard to explain, but not really that complicated.
Here's my suggestion. As the user goes from page to page, we pass the cumulative elapsed time as part of the URL (CGI argument). So the links are dynamically patched to look like this:
testA-overheat.html?st=144
The trick is, that the CGI argument is actually client-side only (browser) and can be tacked onto a plain old HTML page's URL without bothering the server. Each of the four pages has javascript that looks to see if there is a "st" switch, and, if so, starts with that as the elapsed time instead of zero.
Then, when the "FINISH" link is taken, there is a CGI parameter ("st") that communicates the total elapsed time for the whole set of pages to the Finish CGI script, which logs it and goes onto the next part of the test.
To try this out, save multiple copies of this code as "testA-overheat.html", "testA-jammed.html", and so on for your four pages. The Finish page is going to be different since that is when you want to record the total elapsed time.
Starting with any one of the pages, click the links to go from page to page and watch the URL in the address field. It should show the cumulative elapsed time.
Here's my suggestion. As the user goes from page to page, we pass the cumulative elapsed time as part of the URL (CGI argument). So the links are dynamically patched to look like this:
testA-overheat.html?st=144
The trick is, that the CGI argument is actually client-side only (browser) and can be tacked onto a plain old HTML page's URL without bothering the server. Each of the four pages has javascript that looks to see if there is a "st" switch, and, if so, starts with that as the elapsed time instead of zero.
Then, when the "FINISH" link is taken, there is a CGI parameter ("st") that communicates the total elapsed time for the whole set of pages to the Finish CGI script, which logs it and goes onto the next part of the test.
To try this out, save multiple copies of this code as "testA-overheat.html", "testA-jammed.html", and so on for your four pages. The Finish page is going to be different since that is when you want to record the total elapsed time.
Starting with any one of the pages, click the links to go from page to page and watch the URL in the address field. It should show the cumulative elapsed time.
<script>
var currentTime = new Date();
var startTime;
var loc = window.location+"";
var xx = loc.split("?");
if (xx[1] != null) { startTime = currentTime.getTime() - xx[1].substr(3,10); }
else { startTime = currentTime.getTime(); }
function chainToPage()
{
var endTime = new Date();
var elapsedTime = (endTime.getTime() - startTime);
form1.st.value = elapsedTime;
form1.submit();
}
</script>
<form id=form1 action="testA-overheat.html"><input type=hidden name=st></form><a href=# onclick="chainToPage()">OVERHEAT</a>
<form id=form1 action="testA-jammed.html"><input type=hidden name=st></form><a href=# onclick="chainToPage()">JAMMED</a>
<form id=form1 action="testA-continue.html"><input type=hidden name=st></form><a href=# onclick="chainToPage()">CONTINUE</a>
<form id=form1 action="testA-stop.html"><input type=hidden name=st></form><a href=# onclick="chainToPage()">STOP</a>
<form id=form1 action="testA-finished.html"><input type=hidden name=st></form><a href=# onclick="chainToPage()">FINISHED</a>
ok, i think i get what you're saying. I see you have the code in the form tags. The links i have in my code are <nav> tags with ul lists, would i need to change them to be form tags to get the timer results i'm looking to achieve?
Featured Post
A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article discusses four methods for overlaying images in a container on a web page
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month9 days, 9 hours left to enroll
722 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.