We Keep Coding

Track how long user views a slide of a online image slideshow

I am currently working on a project that requires the web application to track how long user stays on one slide of a slide show. Say the online slideshow has 5 (slide-1.png to slide-5.png) slides, user can navigate through the slideshow using "Next" and "Previous" button.
User will always start on slide-1.png, after 5 seconds user clicked on "Next" button and goes to slide-2.png. After 10 seconds the user clicked on "Previous" to go back slide-1.png and stayed there for 5 seconds.
This is basically event-based application. The time will start recording when user click on "Next" or "Previous", and stop recording the old session and start recording the new session when user click on "Next" or "Previous" again.
User does not go to a new html page after clicking on "Next"/"Previous". It is simply images changing src information.
Any ideas about how I should approach this? I am currently using PHP, Javascript, and Java in my web application.

You'll want to capture the time when they start viewing a slide:
var startTime = new Date();
Then capture the time when the slide goes away:
var endTime = new Date();
Then you can calculate the elapsed time.
var elapsed = endTime - startTime; // elapsed time in milliseconds
If you need to account for the case where a user opens a slide and then walks away from the computer you could also start a timeout timer that will log the user as having timed out for that slide.
setTimeout(function () {
endTime = 'Timed out.';
}, ((3 * 60) * 60) * 1000); // ((3hrs * 60mins) * 60secs) * 1000ms
After 3 hours it would set the endTime to 'Timed out.' and you could use that to know that the user walked away from that particular slide and didn't finish viewing the rest.

The JavaScript function that loops over and 'sniffs' for the set conditions that you define will work best for this scenario. The approach you should take is to assign each .png it's own ID attribute. Create variables via JavaScript and jQuery that specifically targets each image. Then attach a mousedown or click event to the slideshow that will detect which image is visible and trigger a timer for that specific image. Ofcourse, you will need input fields hidden on the page for each image for the counter to increment into.
In the link, you will see similar functionality whereby when a use clicks on the 'zoom in' component a timer will start. It will only stop when the user clicks out of the image.
The JavaScript function is call setInterval() and can be stopped with clearInterval(). For best results, create the setInterval() function as a variable.
Sample variable:
var firstSlide = jQuery('img#slide1');
Sample Condition 01:
if (firstSlide.length > 0)
{
//start counter with setInterval();
}
Sample Condition 02:
if (firstSlide.is(':visible'))
{
//start counter with setInterval();
}
To ensure minimal overlaps in the timer and ensure stricter behavior, I would suggest applying a unique CSS class to the slideshow container when it is visible on click and to remove it when it is not visible.
Sample Condition 03:
slideShow.click( function() {
slideShow.addClass('isClicked');
});
if (firstSlide.is(':visible') && jQuery('slideShow.isClicked').length > 0)
{
//start counter with setInterval();
}
http://www.alexldixon.com/clicktimerhelp.htm
Another example where the setInvertval can 'sniff' dynamic conditions, is making element heights equal even when the window resizes and text wraps.
https://jsfiddle.net/dixalex/ojoevj1k/
var makeSameHeight = setInterval( function() {
var currentTextHeight = $('div.myClass-content').height() + "px";
var imgDivHeight = $('div.imgUrl').height() + "px";
if (currentTextHeight === imgDivHeight)
{
var doNothing = "";
} else {
$('div.imgUrl, div.postImageUrl, a.myClass').css("height", currentTextHeight);
}
}, 50);
Lastly, you can also use the new Date() function.
I hope this helps.

How to keep scroll position independent of postback?

I have a regular time interval event in javascript which clicks an asp button. The application is a common chat room and I have to refresh the gridview (which is inside a panel) to check for new chats. But everytime the button is clicked and gridview is refreshed the panel scrolls up to the top (i.e., scrollTop value becomes 0). I have tried this but to no avail:-
<script type="text/javascript">
function refresh() {
setInterval(function () {
var xtop = document.getElementById("Panel1").scrollTop;
document.getElementById("Button2").click();
document.getElementById("Panel1").scrollTop = xtop;
}, 1000);
}
</script>

If you want to store the scroll position between postbacks, in your refresh() function you can store the scroll position value in a hidden field that you put somewhere in your HTML: <input type="hidden" id="scroll"></input> using JavaScript
document.getElementById("scroll").value = document.getElementById("Panel1").scrollTop;
There are other options to persist data such as cookies and the ASP.NET ViewState, but a hidden field is simplest for this purpose. You can then read this value from the hidden field upon loading the DOM and scroll the window to that position.
However, if you are posting back every second to check for new messages, you probably have a bigger problem. This kind of functionality is better done asynchronously with AJAX. It will need a bit of looking into as I'm not sure of your implementation here, but essentially you will use JavaScript to ask the server if there are new messages and load them from the server asynchronously, thereby eliminating the use of postbacks.
Here is Mozilla's introduction to AJAX.

Measure a Reaction Time in ms on a JSP webpage

I'm currently developing a website in Java/JSP and I would like one of its pages to include a reaction time measure.
To be more specific, that page would start displaying images and the user would have to react to the image's appearance by pressing one of two specific keys (like Ctrl left or Ctrl right, for example), depending of the image.
What I'd like to measure is the delay (aka Reaction Time, in ms) separating the moment the image appeared and the moment the user pressed one of the keys.
So what I would like to know is how to "tag" those two events (image appearance & key press) with a "time stamp" that would be enough precise to deduce a reaction time in milliseconds.
Here's an example of a website I found which offers a similar function :
http://www.humanbenchmark.com/tests/reactiontime/
For the curious ones, what I'm trying to acheive is a Lexical Decision task ;)

You need to do the calculation entirely in javascript. Otherwise the reaction time will be impossible to isolate from the time required to send your request to the server.
<script>
var startTime;
function imageLoaded()
{
startTime = (new Date()).getTime();
document.getElementById('mybutton').disabled = false;
}
function buttonClicked()
{
var endTime = (new Date()).getTime();
var elapsed = endTime-startTime;
alert("elapsed time: "+elapsed);
}
</script>
<img src='https://www.google.com/images/srpr/logo11w.png' onLoad='imageLoaded()'>
<input id='mybutton' type='button' value='click me' onClick='buttonClicked()' disabled>

Refreshing parts of div within a jquery loaded div every few seconds

Im making some sort of a slideshow system, and I use JavaScript/jQuery/PHP to loop through different slides. This is all working good, but within the slides (that are dynamically loaded into a fullpage div), I also want to refresh sections of the slide (the slides are split up in several boxes).
I use SetInterval to reload the sections every x seconds, however, when the slide changes, and after a while the same slide appears, these SetIntervals stack up, causing the sections to reload way too many times.
I've tried to confirm whether the element still existed with:
var refreshBox = setInterval(function(){
if ($('#box_<php id>').length > 0){
//Ajax/Refresh code
}else{
clearInterval(refreshBox);
}
}, ".$boxes_data['box_refresh']."000);
But that didnt work. The intervals still act up when the same slide reappears.
Any solutions?
Thanks!

Already managed to fix it by creating a global array:
window.refreshBox=new Array();
Create interval within array:
refreshBox[".($boxes_data['box_id'])."] = setInterval(function(){
Delete interval from array:
clearInterval(refreshBox[".($boxes_data['box_id'])."]);

Title-changing effect/window event listener does not work

I tried to search but could not find out anything useful. This is a piece of code for my Greasemonkey script. Basically, I want to have the same effect as Gmail. When the page loads and you have new messages, the title will change repeatedly and make you notice. The problem is it does not work for the first time.
For example, if the user opens the page on new tab and does not move to the page, it does not work. But if the user moves to the tab and then moves to another tab, the script works.
Can anyone point me the right direction?
function startBlink(){
window.blinkInterval = setInterval(function(){
if(document.title != "Message"){document.title = "Message";}
else{document.title = "Application";}
} , 1000);
}
function blink(){
document.addEventListener("blur",function(){setTimeout(startBlink(),1000);},false);
document.addEventListener("focus",function(){clearInterval(window.blinkInterval);},false);
}
window.addEventListener("load",blink,false);

have you thought about changing (iterating through multiple variants of) window title instead of blinking (blur/focus)? that also attracts an eye.