Javascript - problem with mouse release outside scale not registering score? | XM Community
Skip to main content
Hi,



I am a psychology student designing a task for my final year project. From the screenshots, you will see the task relates to the popular one-shot Dictator Game task. In this task, the participant chooses how much they distribute from player 1 (who initially carries 10 tokens) to player 2. The amount they wish to share is their generosity score. As I require the task to appear as realistic as possible for the validity of the study, it needed a live and instantaneous feel - which is why player 1 and player 2 text fields update automatically when sliding across the scale. My only problem at present is that if you slide across and off the scale, it does not currently update the extreme ends, ii.e., if you start from 0 and wish to select 10, it will only register 10 if you precisely release the mouse click on 10 - if you go to the side of the extreme end slightly, it will not update with the latest number the slider is on. I hope the screen shots explain this.



I will add the visual aspects and the code at present. I would appreciate any help possible to resolve this matter.



Release within the scale (working fine)



!



Release outside of the scale (does not update)



!



Qualtrics task overview:



!



Code used in scale:



!



Code used in player 1:



!



Any assistance will be greatly appreciated.



Many thanks,



Mo
It's because you are using the wrong type of event. You are recording the state at 'click' but you really need to be using 'mouseup' after a 'mousedown'.
Whilst I understand conceptually what you mean, I am struggling to rectify this. How do you use the moseup/mousedown events for the following code?

---------------------------------------------------

Qualtrics.SurveyEngine.addOnload(function() {

/*Place your JavaScript here to run when the page loads*/

var result= 0;

var player2= 0;

var player1=10;



document.getElementById("player1").innerHTML=player1;

document.getElementById("player2").innerHTML=player2;

this.questionclick = function(event,element){

result = this.getChoiceValue(1);

endupdate();

xtraupdate();

document.getElementById("player2").innerHTML=player2;

document.getElementById("player1").innerHTML=player1;

}



function endupdate() {

player1=10-result;



}

function xtraupdate() {

player2=Number(result)+0;

}

});

---------------------------------------------------

Thank you so much for your help.
With `this.questionclick` the click event only fires if the mouseup occurs while still over the same element (the question). So, if you move off the question while dragging it doesn't fire the click event even though the value has changed.



I think you what you need to do is look for a mousedown on the slider handle followed by a mouseup on the document. It would be something like:

```

jQuery("#"+this.questionId+" div.handle").mousedown(function (e1) {

jQuery(document).mouseup( function(e2) {

jQuery(document).off('mouseup'); //remove the mouseup event

...the rest of your code...

});

});

```

Leave a Reply


Terms & Conditions