asked on javascript timer over multiple pages
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>
JavaScriptPHP
Last Comment
newmie22
ASKER
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>
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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?
Yes, they need to be form tags to get the hidden attribute added to the URL. The form itself is totally invisible and the a-href tag activates it, so the user is still clicking on a normal-looking link.
I think you can make it look the same on the page.
I think you can make it look the same on the page.
ASKER
Great, thanks for the help!
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.