Develop Reference

Ending a reaction game Javascript

Here is the related link: http://jsbin.com/cebisoqovo/edit?html,output
I just started on code learning and recently created a game called Reaction Tester with my limited knowledge. However, I am faced with a minor problem at the end.
Question:
So whenever there is random square or circle shown, all you have to do is click and the time taken to click & the point will be shown on the right side. However, I do not know how to set the ending time of the game and it just keeps continuously popping out the shapes. I have the try again and result (under css) set as display:none in order to only have these popped out at the end of the game. However, i do not know how to end it. Please help! Thank you!
p/s: There was something wrong with the insertion of code directly here. If it's okay for you, please go to the jsbin link and copy the code and paste on your respective application to have a better look at it since jsbin isn't really showing it clearly. Sorry for the inconvenience.

create a global variable named gameRunning, set it to true. create a timeout function set for 30 seconds that sets gameRunning to false. In your function that creates shapes, first check if gameRunning is true. If gameRunning is true, then create shapes as normal. If gameRunning is false, then do nothing.
^ the above solution works, but you would get 1 last box created after the game has ended because of the way boxes are created.
https://jsfiddle.net/vmo5x2vz/3/
After working with it for a while, I found a different and better way of doing it for your particular situation.
I create a global variable named makeBoxTO, the 'TO' meaning timeout.
var makeBoxTO;
Then I assign the timeout found in makeBox() to this makeBoxTO variable. This is so that we can refer to that timeout outside of the makeBox() function.
makeBoxTO = setTimeout(function()...
Then I set a 10 second timer to end the game.
setTimeout(function(){
clearTimeout(makeBoxTO);
document.getElementById("Box").style.display = "none";
alert('game over');
},10000);
It clears our makeBox timeout, hides any box's on screen, and lets the user know the game is over.

Increment when element becomes visible?

I am working with the skrollr plugin.
I have a set of arrows. One points down and the other up. When you click the down arrow it takes you to the next section/chapter of the animation. Right now it works great. But my issues is lets say the user does the following:
He/she scrolls half way through the page(lets say section 5). They then decided to see how much of the animation is left. So they click the next section arrow.
This user will be put to section 2 even though they are at section 5 because I have no way to detect when the user hits each section so I can update the arrow #hrefAnchor.
What I was thinking is adding an interval/ event listener that would detect when the section is visible on the DOM and update the arrows to take you to the previous and next sections.
Does anyone know how I can approach this idea?... and will work in ie >= 9

If you're willing to modify the Skrollr library, something I had done was add:
else if(prop === 'javascript') {
eval(val);
}
as an option in skrollr.setStyle which allows then for you to add a hook for arbitrary JavaScript code on elements like each section here using data-XXX="javascript:myFunction();" and I believe Skrollr will even still interpolate numbers in your arguments for you.

If you have control of what gets executed when "next" is clicked, can you check the scroll value at that time to determine which section it is between and switch on that to send them to the appropriate section? Essentially, rather than trying to keep the target current at all times which is wasteful/difficult/error prone, just calculate it when it matters - when the click occurs.

If you give your element a class like "visible", you could select all the visible elements by using jQuery:
$(".element.visible:last-of-type").on("click", function() {
});

JQuery namespace/code acting funny

First off, here is my jsfiddle.
I have two click listeners. One on a Next button and one on a Back button. The listener on the Back button works great, but the one on the Nextbutton does not, despite them being in the same area of code.
The line of code in question is:
wizard.goTo($('#wizard-pages span[class="selected"]').next().index());
Strangely enough, if I run:
$('#wizard-pages span[class="selected"]').next().index();
I get the right index value. Also, if I run,
wizard.goTo(x);
(x being whatever number). I get the right page back.
It's only when they are combined that it does not work.
I've also tried making the parameter a variable and then passing it through but I get the same results. I also tried adding (+1) to the index, rather than calling .next() before it. Any ideas?

Here's an updated fiddle: http://jsfiddle.net/7v8Xx/1/
You werent going far enough ahead in this line:
wizard.goTo($('#wizard-pages span[class="selected"]').next().index());
Add 1 to the index!!
wizard.goTo($('#wizard-pages span[class="selected"]').next().index()+1);

jQuery/JavaScript program breaks after completion number is changed

In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.
if (score.right == 3) {
................
................
}
Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.
setTimeout(function() {
jQuery('.next-question').trigger('click');
}, 1500);
I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?
At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.
Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/
Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)

First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.
Next thing, at the beginning you have var definitions like
var hintPic = $("#hintPic")[0];
This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it
hintPic.show();
It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.

Mouse Behavior on a WebPage – I don't want text being marked

I am working on a web-Based Kalendar Application (multi-user). The Application is nearly ready, but one thing is not so good. I want to give the User the chance, to mark several times at one time. That's why, i made a mousedown-function, on every field, and a mouseup-function as well. That way, I get the first marked field, and the last. All fields in the middle can be calculated by the id!
Now the problem: While I am moving the mouse, the browser marks the text. I want another mouse behavior. I want the mouse to draw a rectangle, so that the user sees, where he started, an so that no text within the document gets marked! This is very important. Do you know, how to solve the problem? I already deactivated the right-Click Menu, an set my own menu, but this is to hard for me :(. I have already searched the web with google, but actually I do not really know, which keywords could help here.
PS: I am using jQuery, maybe it could help in this situation.

Here's a script to disable text selection:
http://www.dynamicdrive.com/dynamicindex9/noselect.htm
If you have jQuery, you can use bind like:
$('#demo').bind('selectstart',function(e) {
e.preventDefault();
});
Here's a JSFiddle:
http://jsfiddle.net/Nk9ec/2/

OK, i found out, what was wrong. Your Code is for IE only. I am using Firefox, and I optimize my Application to Firefox! Well now, i managed disabling selecting text, with that function:
$(document).ready(function() {
$(document)[0].oncontextmenu = function() {return false;}
$('#id').mousedown(function(event) {
checkClk(event);
return false;
});
});
The function checkClk(event) controls the Clicking-Behavior.
Beside I managed to make the mouse-Pointer standart-Pointer with css:
body {
cursor: default;
}
All I need is now, to figure out, how I can draw a rectangle, when I move the mous, holding the left Button clicked. I want the Application look like the operating-System.
If you click and hold the mouse down, there is an Rectangle (like this: http://img21.imageshack.us/i/markiert.png/). Does anyone know, wheather this is possible without making a div, which size depends on the Mouseposition?