The challenge in your request, is that Javascript does not actually trigger an event when the mouse is NOT moved.
What you need to do is create a timer that triggers after 500ms, and reset it each time that the mouse is moved.
I would use a custom input in order to do this, following is an example of how this can be done.
{
input: [
{ on: 'click', handle: 'end' ,stimHandle:'clickButton'},
{
handle: 'nomove',
delay: 500, // set length of delay before warning
on: function(inputObj, canvas, stream){
var $listener = stream();
var timeoutID;
document.addEventListener('mousemove', onmove);
onmove();
$listener.end.map(function(){
clearTimeout(timeoutID);
document.removeEventListener('mousemove',onmove);
});
return $listener;
function onmove(e){
clearTimeout(timeoutID);
timeoutID = setTimeout(function(){
$listener(e);
onmove(); // reset the timer
}, inputObj.delay);
}
}
}
],
interactions: [
{
conditions: [{ type: 'begin'}],
actions: [{ type: 'showStim', handle: 'clickButton' }]
},
{
conditions: [{ type: 'inputEquals', value: 'nomove' }],
actions: [
{ type:'showStim', handle: 'warning'},
{ type:'removeInput', handle: 'hideWarning'}, // prevent blinking
{ type: 'trigger', handle: 'hideWarning', duration: 600 }
]
},
{
conditions: [{ type: 'inputEquals', value: 'hideWarning'}],
actions: [{ type: 'hideStim', handle: 'warning' }]
},
{
conditions: [{ type: 'inputEquals', value: 'end' }],
actions: [{type:'log'}, { type: 'endTrial' }]
}
],
stimuli: [
{ handle: 'clickButton', media: 'Click me!' },
{ handle: 'warning', media: 'Please move the mouse' , location: {bottom:20}, css: {color:'red'}}
]
}