Hi I have a code in qualtrics written with jquery. I need to implement delay function for event listening. My code enables key press as inputs. there should be a delay function...
I should disable the keys for the first 2000ms then enable them.
My task has 3 different parts and all parts are dipslayed or hid according to the time.
so here is my code;
function disableMouse(event) {
event.stopPropagation()
}
window.disableMouseFunction = disableMouse
Qualtrics.SurveyEngine.addOnload(function() {
document.body.style.cursor = 'none'; // hide cursor
setTimeout(function() {
document.addEventListener('keydown', function keydownCallback(e) {
var that = this;
var aa = null;
switch (e.keyCode) {
case 37: // left arrow key
that.setChoiceValue(1, true) //pic a
aa = 1;
break;
case 39: // right arrow key
that.setChoiceValue(2, true) //pic B
aa = 1;
break;
}
if (aa) {
document.removeEventListener('keydown', keydownCallback, true);
//move to the next page after delay
that.clickNextButton();
}
});
}, 1000);
});
Qualtrics.SurveyEngine.addOnReady(function() {
setTimeout(function() {
jQuery('#showfirst').delay(500).hide(1);
jQuery('#hideafter').delay(500).show(1);
jQuery('#hideafter').delay(2000).hide(1);
jQuery('#reveallater').delay(2550).show(2);
})
});
You have to listen to the document, since there is no input at all in this...
I have you a function for that, have a try.
function disableSurveyArrows(delay){ // delay is in seconds
var ArrowsDisabled = true;
setTimeout(function(){
ArrowsDisabled = false;
$("#onoff").html("Arrows enabled now.")
},5000);
$(document).on("keydown",function(e){
console.clear();
if(ArrowsDisabled){
console.log(".");
return false;
}
if(e.which==37){
console.log("Left");
}
if(e.which==39){
console.log("Right");
}
});
}
// Call the function. 5 seconds is passed here.
disableSurveyArrows(5);
span{
margin:calc(25% - 50px);
}
#onoff{
font-size:4em;
text-align:center;
width:100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="font-size:100px">←</span><span style="font-size:100px">→</span>
<div id="onoff">Arrows disabled</div>
I could not disable the input for first 2 seconds, so I just hide the choices and make them appear after 2 seconds. People do not try to answer when the selections are not visible. Not the perfect solution but it works.
<style> .QuestionBody { display: none;} </style> //in qualtrics
This can be a helpful trick for those who have similar problems.
Related
here is my situation,
I'm triggering some functions on click like this:
on first click, trigger function A.
On second click, trigger function B,
On third click, trigger function C,
etc
etc
All the click are on the same div ( body).
However, I would like the second click to trigger only one the first function is finish. ( all the functions are some animations)
Then the thrid click, to trigger only when the second function is finish, etc, etc.
I'm using the code below to have multi click:
var clickCounter = 0;
$("#body").click(function() {
clickCounter++;
switch (clickCounter) {
case 1:
showpanel();
setTimeout(function() {
hidepanel();
}, 1820);
setTimeout(function() {
movetotop();
}, 1820);
setTimeout(function() {
movetotopheight();
}, 1820);
setTimeout(function() {
nav();
}, 1820);
break;
case 2:
centralbutton();
break;
case 3:
footerarea();
break;
case 4:
side();
break;
}
});
Any pointers / help to achieve this will be really fantastic !!
Thanks so much
You can do something like this by updating the counter in the functions when the function is done, while running set counter to 0 so no action will be triggered.
<div id="body">
<h1>Demo</h1>
</div>
var clickCounter = 1;
function showpanel() {
//Set counter 0 so no action is started
clickCounter = 0;
//Do animation and stuff and after set counter to the right step.
setTimeout(function(){
clickCounter = 2;
}, 5000);
}
function centralbutton() {
//After 5 seconds this function can be used
alert('STEP 2');
}
$("#body").click(function() {
console.log('test');
switch (clickCounter){
case 1:
showpanel();
break;
case 2:
centralbutton();
break;
case 3:
footerarea();
break;
case 4:
side();
break;
}
});
https://jsfiddle.net/3u177cs3/
In each function you could attach a specific CSS class to the div, e.g. named by the last function executed. For example at the end of function A append the class "aFinished". Then when performing a click check for the existing classes on the div and by that pick the right function to be executed.
This way you would not even need a clickcounter variable.
var clickCounter = 1;
function showpanel() {
console.log("pan")
//Set counter 0 so no action is started
clickCounter = 0;
//Do animation and stuff and after set counter to the right step.
setTimeout(function(){
clickCounter = 2;
}, 5000);
$("#body").addClass("aFinished")
}
function centralbutton() {
console.log("cen")
//After 5 seconds this function can be used
alert('STEP 2');
$("#body").removeClass("aFinished")
$("#body").addClass("bFinished")
}
$("#body").click(function() {
console.log('click');
if ($("#body").hasClass("aFinished")) {
centralbutton();
}
else if ($("#body").hasClass("bFinished")) {
footerarea();
}
else if ($("#body").hasClass("cFinished")) {
side();
}
else {
showpanel();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
<h1>Demo</h1>
</div>
I currently have a slide show for my website and i am trying to loop through each radio button. I tried doing it multiple ways, but nothing seems to work. can somebody help please.
here is my code:
/*This function is called when the window is done loading*/
window.onload = function() {
//Each of these buttons should call the Change Image Function, passing a differet parameter.
document.getElementById("button1").onclick = function(){
changeImage("formbackground1.jpg");
}
document.getElementById("button2").onclick = function(){
changeImage("formbackground2.jpg");
}
document.getElementById("button3").onclick = function(){
changeImage("background2.jpg");
}
}
var step=1
function slideit() {
document.images.slide.src=eval(document.getElementById("button"+step).onclick)
if (step < 3){
step++
}
else{
step = 1
setTimeout("slideit()", 2500)
}
slideit();
}
/*This function changes the picture when one of the 3 buttons is pressed*/
function changeImage(source) {
document.getElementById("myImage").src=source;
}
function popup(){
}
Instead of using setTimeout() I used setInterval() instead.
var slideTimer = setInterval(slideIt, 3000);
With setInterval(), we can call clearInterval() on a function in order to stop it from executing. This prevents the slideshow from jumping to the next image immediately after the user clicks on a certain image.
document.getElementById("button1").onclick = function(){
clearInterval(slideTimer);
slideTimer = setInterval(slideIt, 3000);
changeImage("background1.jpg");
}
document.getElementById("button2").onclick = function(){
clearInterval(slideTimer);
slideTimer = setInterval(slideIt, 3000);
changeImage("background2.jpg");
}
document.getElementById("button3").onclick = function(){
clearInterval(slideTimer);
slideTimer = setInterval(slideIt, 3000);
changeImage("background3.jpg");
}
The slideIt() function checks which radio button is currently selected, then selects the next radio button and slideshow image. This check occurs every 3 seconds due to setInterval(slideIt, 3000).
function slideIt() {
if (document.getElementById('button1').checked == true) {
document.getElementById('button2').click();
changeImage("background2.jpg");
}
else if (document.getElementById('button2').checked == true) {
document.getElementById('button3').click();
changeImage("background3.jpg");
}
else if (document.getElementById('button3').checked == true) {
document.getElementById('button1').click();
changeImage("background1.jpg");
}
else {
//do nothing
}
}
live example:
https://jsfiddle.net/kkdaily/oLed4em1/
Hi I am trying to track the time spent by user on a webpage. So I have written the following javascript to do so.
The script starts tracking the time when the window becomes focused and then pauses if the user moves to some other tab or minimises the window.
here is the fiddle:
following is the code:
$(function(){
var count = 0;
var interval;
var ispaused=false;
function setPause(){
ispaused=true;
}
function unpause(){
ispaused=false;
}
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
setPause();
clearInterval(interval);
break;
case "focus":
unpause();
var interval = setInterval(
function(){
if(!ispaused) {
$('#timer').text(count += 1);
}
},1000
);
break;
}
}
$(this).data("prevType", e.type);
});
});
The timer starts when you focus the area and pauses when you blur out, but the timer becomes faster after every cycle of focus and blur. No idea why that is happening. Please help !
I checked the fiddle you provided and found out that you are storing the interval variable on a local variable i had tried to fix the problem to see if it is working and had updated the fiddle here:
http://jsfiddle.net/9fzd1dap/1/
This is the updated Script
$(function () {
var count = 0;
var interval; //This is the global interval variable
var ispaused = false;
function setPause() {
ispaused = true;
}
function unpause() {
ispaused = false;
}
$(window).on("blur focus", function (e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
setPause();
break;
case "focus":
unpause();
clearInterval(interval);
//I removed the var keyword from the line below to prevent dual declarations.
interval = setInterval(
function () {
if (!ispaused) {
$('#timer').text(count += 1);
}
}, 1000
);
break;
}
}
$(this).data("prevType", e.type);
});
});
What happened is that the global interval variable is not being populated and the local interval (inside the function) variable is the one that gets populated. I've already tested it on the updated fiddle and seems to work fine ;)
The game is quite simple you click on the start button to begin then move your mouse along the track until you reach the end then the timer stops and shows you the score. If you go out of the track you get a score of zero.
Why don't my mouseOver functions work?
Link to my full code: http://www.codecademy.com/TictacTactic/codebits/AQBK4L/edit
Thank you in advance!
var score = 1000;
var timer = setInterval(countDown(), 1000);
$(document).ready(function() {
$('#start').click(function() {
$('#game').mouseover(function() {
stopTimer();
score = 0
$('#points').html(score)
});
$('#end').mouseover(function() {
stopTimer()
$('#points').html(score)
});
});
});
function countDown() {
score = score - 1;
}
function stopTimer() {
clearInterval(timer);
}
Most events are in lowercase, like mouseover, mouseout etc. There are also others that have capitals, like DOMContentLoaded. Most (if not all) programming languages are case-sensitive, watch out for these.
Try this
var clicked = false;
$('#start').click(function() {
if(!clicked){
clicked = true;
}
});
$("#game").hover(function(){
if(clicked){
stopTimer();
score = 0;
$("#points").html(score);
}
});
$("#end").hover(function(){
if(clicked){
stopTimer();
$("#points").html(score);
}
});
Then later if you don't want the hover event to work just set clicked to false I.E : clicked = false;
HTML Code:
<div id="slick-slidetoggle">wxyz</div>
<div id="slickbox" >abcd</div>
JavaScript:
var hoverVariable=false;
var hoverVariable2=false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2=true;
$('#slickbox').slideToggle(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2=false;
hoverVariable=true;
})
CSS Code:
#slickbox {
background: black;
width:100px;
height: 135px;
display: none;
cursor:pointer;
color:white;
}
#slick-slidetoggle{
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
Now the desired behaviour is that when mouse is slide over yellow div("wxyz") black div("abcd") should slide down and if mouse is moved out of yellow without moving on to black div, the black div should hide after two seconds.
This is happening. If mouse is moved over black div immediately after moving out of yellow div the black div should not hide as long as the mouse is on the black div. This is also happening.
Next steps are bit difficult to explain but I'll try, when mouse is moved over yellow div and black div comes out then mouse is moved over black div and within two seconds if it moved out of it(black div) then the whole animation goes haywire. Its behaviour is reversed. But if the mouse is kept on black div for more than two seconds and then it is moved out then the whole script runs fine.
This is the link to explain better. http://jsfiddle.net/HAQyK/381/
Try replacing slideToggle() with the appropriate slideUp() and slideDown() calls. http://jsfiddle.net/tppiotrowski/HAQyK/386/
var hoverVariable = false;
var hoverVariable2 = false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2 = true;
$('#slickbox').slideDown(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2 = false;
setTimeout(function() {
if (!hoverVariable && !hoverVariable2) {
$('#slickbox').slideUp(600);
return false;
}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable = false;
setTimeout(function() {
if (!hoverVariable && !hoverVariable2) {
$('#slickbox').slideUp(600);
return false;
}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2 = false;
hoverVariable = true;
})
I re-coded a solution. Checkout the fiddle here
var hideB;
var $black = $('#slickbox');
var $yellow = $('#slick-slidetoggle');
function showBlack() {
if( hideB ) window.clearTimeout( hideB );
$black.stop( true, true );
$black.slideDown(600);
}
function hideBlack() {
hideB = setTimeout( function( ) {
$black.stop( true, true );
$black.slideUp( 600 ); }
, 1000 );
}
$black.hide();
$yellow.mouseenter(function() {
showBlack();
})
$yellow.mouseleave(function() {
hideBlack();
});
$black.mouseleave( function( ) {
hideBlack();
});
$black.mouseenter( function( ) {
showBlack();
});
Your problem seems to be that the slideToggle in firing twice in quick succession because of your duplicate timeout functions. The cleanest way to deal with timeouts or intervals is to store them in a variable to give you the control of removing them when not needed:
// Defined in global scope
var timer;
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
// Timer set as function
timer = setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
// Timer no longer need and so cleared
clearTimeout(timer);
return false;}
}, 1000);
});
EDIT: Neglected to add the slideUp/slideDown instead of Toggle as per the correct answer above. See the updated jsFiddle which is now correct: http://jsfiddle.net/HAQyK/390/
Another way you could approach your script is to use jQuerys delay funciton and the stop(); method for animation. Wrap the divs in a container and you've got a much simpler block of code:
$('#slick-container').mouseenter(function() {
$('#slickbox').stop().slideDown(600);
}).mouseleave(function(){
$('#slickbox').stop().delay(1000).slideUp(600);
});
Check it out here: http://jsfiddle.net/HAQyK/387/