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>
Related
So I have a variable that is constantly changing (num) and it's controlled by other page, but to get the value from other page to another, I need to refresh the page. I tried auto refresh, but I have a youtube video playing and it would stop every refresh. Is there any way to refresh the variables only? Or constantly doing the javascript of the file so the values are always being updated.
EDIT: I am not using any server side or server language. Just HTML and JS
I believe the function you are looking for is setInterval(). This function will call a child function every time a certain period of time passes. In a limited use case, you can register a variable in a script and also register an interval timer to update it periodically. Depending on your use case, you may need to also write some JS to bind the new value of the number to the DOM.
Here is an example of using the intervals. In this example, clicking the button once begins the timer. After that, the interval (1000ms) will fire an event automatically to update the x variable and bind the new value to the DOM.
<!DOCTYPE html>
<html>
<body>
<button id="eventBtn" onclick="myFunction()">X = 0</button>
<script>
var x = 0;
function myFunction() {
setInterval(function(){
x++;
var btn = document.getElementById("eventBtn");
btn.innerHTML = 'X = ' + x;
}, 1000);
}
</script>
</body>
</html>
Interactive JS Fiddle for example
W3Schools - "Window setInterval() Method"
I am trying to create a button that sends users through a 'loop' of links, and keeps going through it anywhere, perhaps with its own 'memory'.
(REFERENCE CODE BELOW) For example, I want the first click to go to the first item, /roles/mafia, then the second click (from another tab, browser, or device) to go to the second one, /roles/doctor, and so on. When the button has been clicked six times (so the list has finished), the seventh time should loop back to the first one.
So if Bob clicks on the button with his Mac, it will take him to /roles/mafia.
But then seconds later, if Jill clicks on it with her iPhone, it will link to /roles/doctor, and so forth.
Here is my JS, but this doesn't work since this is a pseudo-random system, rather than forming a loop.
<script type="text/javascript">
var urls = [
"/roles/mafia",
'/roles/doctor',
'/roles/cupid',
'/roles/mafioso',
'/roles/pimp',
'/roles/detective'
];
function goSomewhere() {
var url = urls[Math.floor(Math.random()*urls.length)];
window.location = url; // redirect
}
</script>
And then the HTML button:
JOIN SERVER
I am aware this won't have a quite simple solution, and I'm very new to the concept of JavaScript and memory, so any help, even just a snippet to inspire another coder to find the answer, is enough.
Thanks for any help in advance :)
I would like to implement a slider on top of every page of my website.
however this might be disturbing and annoying when a user starts browsing from page to page, since the slideshow will start over and over again.
I though the solution could lay in the builtin date function:
var d = new Date();
var n = d.getSeconds();
if(n%10 == 0)
{
rotate
}
Or perhaps I could set a cookie with the values from the slider when a user leaves that page (name=topSlider value=1 time=300), so the new page could pick it up and go further in it's sequence.
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.
At the moment I am using ajax requests every 10 minutes to update certain content and other time intervals for others.
I do this using jQuery by:
On mouse move, the active page is checked
If the active page has not be updated within the given time interval, the page is updated
I'm doing this because although i want the content to stay up to date, I don't want it to be sending requests in the background (when the user is not using the application). Doing this also means that if the user has not used it for more than the time period, when they start to use it again it will automatically update.
I'm wondering just how efficient this is as whenever the mouse moves the checks are called (and has slowed down performance a bit - especially when trying to click links) - is the a more efficient way to do this?
Thanks!
I would rather activate/reset a timer, on say, 60 seconds, on movement of the mouse, and set your fixed-interval checks to only run if that timer is above zero.
That way, checks aren't made every time the mouse moves, and if the user becomes inactive, update checks stop after 60 seconds.
Another possible solution would be to use the window blur and focus events to determine if the window is active:
var checkForContentUpdates = true;
$(window).focus(function() {
checkForContentUpdates = true;
});
$(window).blur(function() {
checkForContentUpdates = false;
});
Your AJAX routine would then key off of the checkForContentUpdates bool.
I'm sure that there are scenarios where this isn't fool-proof, so you'd likely have to combine this method with other logic.