Hide mouse/cursor during trials

[wuaham]

Hi,
I am new bee in JsPsych. How can I hide the cursor (mouse) during stimuli presentation and then un-hide the cursor please? I tried as follows:

            var trial = {
                on_start: function() {$('body').css('cursor', 'none')},
                timeline: [...],
                timeline_variables: ...,
                randomize_order: ...,
                repetitions: ...,
                on_finish: function() {$('body').css('cursor', 'default')}
            }
            timeline.push(trial);

It seems cursor does hide (with on_start:) but doesn't un-hide (with on_finish:) after the trial is completed

Thank you in advance.

[jodeleeuw]

Do you have another on_finish function in your stimulus presentation trial on the timeline? That parameter could be overriding this one.

[wuaham]

Thank you for the reply and comments. Yes, I have on_finish function in another variable (this variable is used to save data).

Sorry I believe it is better to explain a bit further, timeline of my experiment is like that:
Instruction (cursor required) --> Demo trial (cursor hide) --> Instruction (cursor required) --> Test trials (cursor hide) --> Debriefing (cursor required)

How do I hide/unhide the cursor please?

Thank you once again.

[jodeleeuw]

You could use the call-function plugin to add a trial to the timeline when you want to hide/show the cursor. Here's an example of how to define these trials without using jQuery, in case someone else who isn't using jQuery finds this solution.

var hide_cursor = {
	type: 'call-function',
	func: function(){
		document.querySelector('head').insertAdjacentHTML('beforeEnd', '<style id="hide-cursor">body { cursor: none; }</style>');
	}
}

var show_cursor = {
	type: 'call-function',
	func: function(){
		document.querySelector('#hide-cursor').remove();
	}
}

[wuaham]

Excellent - well done - it works fine - thank you.