Develop Reference

TweenJs - rotate rectangle on click runs only once

I am trying to create simple animation on "click" event in JavaScript library called TweenJs (part of CreateJs suite), but it seems that animation updates the display only the first time when I click on the rectangle. After animation is over for the first time, on every next click it seems that code is running, but the display stands still (or doesn't update). You can see in the console that it logs start and the end of animation.
Can someone please help me and explain what is the problem with my code, and also, in general is this the right approach to use stage.update() ?
Here is my code:
https://codepen.io/milan_d/pen/rNaJEKY?editors=1111
Thank you very much!

The issue is that once you rotate it, it is already rotated to the angle you specify in subsequent clicks.
An easy solution is to just add a zero-duration to() call when you click it that resets it.
createjs.Tween.get(square)
.to({rotation:0}) // This one has no duration, so it is immediate
.to({rotation:360},3000)
.call(squareRotationComplete);
Another option is to always rotate it based on the initial tween
createjs.Tween.get(square)
.to({rotation:square.rotation + 360},3000)
.call(squareRotationComplete);
Lastly, you could use the RelativePlugin. First install it, and then just use "+360" in your to() call.
createjs.RelativePlugin.install(); // Run once
createjs.Tween.get(square)
.to({rotation:"+360"},3000) // Note the value.
.call(squareRotationComplete);
Cheers!

Performing a Simple Math Operation in Real Time with Runtime Data in Qualtrics

I have a single slider on a survey in Qualtrics, and need to present the value on the slider from both "ends" (so if the respondent has placed the handle at the value 55, I need to have a box with "55" and "45" shown below the slider, since the maximum value is 100, i.e. 100-55=45).
I've managed to show the value of the slider with the user's input (in the above example, the "55") with this following snippet of HTML in the text question, which places a box somewhere on the page with the slider's value:
<input class="SumInput InputText QID29 QWatchTimer" data-runtime-value="runtime.Choices.1.Value" id="QID29" name="QID29" type="text" value="" />
However, I can't get the other box that displays essentially 100 minus whichever the runtime.Choices.1.Value is to work (the "45"). I've tried simply "100-runtime.Choices.1.Value", "100"-"runtime.Choices.1.Value", the same without any quotations, and just about every possible math function for CSS/HTML. I know that technically HTML only displays and doesn't really do this kind of runtime calculation (I'm a novice so this is as far as I've gleamed), so if there was any Javascript snippet or some other piece of code that would show in real time 100 minus wherever the user has moved the handle on the slider to, that'd be fantastic. I'm assuming some sort of addOnClick function but have no clue how to refer to anything on the slider to do this.
It's such a simple task but for some reason has taken so far quite a bit. Any help is appreciated; thanks!

I've managed to figure this out for the particular example of the slider, though I think the following Javascript should work for presumably many question types, given using the correct getChoiceValue (i.e. changing the "1" to the number corresponding to the element on the page whose answer value you want to obtain):
Qualtrics.SurveyEngine.addOnload(function() {
/*Place your JavaScript here to run when the page loads*/
var result=0;
var otherend= 0;
this.questionclick = function(event,element){
result = this.getChoiceValue(1);
endupdate();
document.getElementById("otherend").innerHTML=otherend;
document.getElementById("result").innerHTML=result;
}
function endupdate() {
otherend=100-result;
}
});
I then added the following in the HTML of the question text, wherever I wanted it to show up (I personally put it in a table so I could center things nicely on the page, along with some explanatory text):
<span id="result">0</span>
<span id="otherend">0</span>
Hope this saves somebody else some time and energy!

Display loading icon when transitioning between divs

I have a form, that when the "Next" button is clicked, a new div appears in place of the old one with this code:
function showDiv() {
document.getElementById('2').style.display="block";
document.getElementById('1').style.display="none";
}
I am then, once the form is submitted, sending my data to a server so that it is emailed to me. The problem is that the previous action, the transition between divs after the button click, is being performed far too quickly. People have told me that it would look a lot better with some sort of transition or a quick loading icon, and that it doesn't look authentic.
Is there any way to have my second div "slide" into the position of the new one? Or some sort of transition? Keep in mind, this is just switching two divs out for one another. No actual data is being processed yet, and no new page is being loaded. Or is there any way to create a loading icon on this action to last for 1second?
Thank you for your help.

Try this
// send data
// show loading gif
setTimeout(function () {
// hide loading gif
// show other div
}, 2000);
You get a 2 second delay this way. Hope it helps.

I assume you're open to using jQuery based on your tags. jQuery offers a number of ways to animate changes to divs. .animate() provides a way to do custom animations, or your can use one of the provided options. In your case, perhaps something like .fadeToggle() would work?
Detailed information here: https://api.jquery.com/category/effects/

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() {
});