Slider marker and ticks not showing Firefox, but works on Chrome

Online experiments
1

I programmed an online experiment using the standalone PsychoPy builder and custom Python and JS code. I have a trial with a slider, where they have to click on the slider and then press space to end the routine. When I run the online experiment in a Google Chrome browser, it works perfectly. However, when I run the online experiment in Firefox, the slider shows up, but the numbers under the slider are missing, and the marker does not draw when pressed.

Here is the custom code I used in every frame

Python:
keys = event.getKeys()

if ‘escape’ in keys:
core.quit()

if ‘space’ in keys:
if CoinSlider.getRating() is not None:
continueRoutine = False # end now

JS:
let theseKeys = psychoJS.eventManager.getKeys({keyList:[‘space’]});

// check for quit:
if (theseKeys.indexOf(‘escape’) > -1) {
psychoJS.experiment.experimentEnded = true;
}

if (theseKeys.length > 0) { // at least one key was pressed
if (CoinSlider.getRating() !== undefined) {
continueRoutine = false; // end now
}
}

With CoinSlider being the name of my slider.

This issue seems specific for Firefox but does anyone have a work around?

2

Please could you show your slider code or component (especially contents and colours)?

Best wishes

Wakefield

3

Thanks for your quick reply,

I think this has something to do with browser settings rather than my tasks, since it seems to work on some Firefox browsers (same version) on some computers but not on others. everything works fine on google chrome. I have this problem with sliders across different tasks, also

It’s just a standard slider set to ‘rating’:

// Initialize components for Routine “DictTrial”
DictTrialClock = new util.Clock();
CoinSlider = new visual.Slider({
win: psychoJS.window, name: ‘CoinSlider’,
size: [1.0, 0.05], pos: [0, (- 0.25)], units: ‘height’,
labels: [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’], ticks: [0, 1, 2, 3, 4, 5, 6],
granularity: 1, style: [visual.Slider.Style.RATING],
color: new util.Color(‘White’),
fontFamily: ‘Arial’, bold: true, italic: false,
flip: false,
});

var DictTrialComponents;
function DictTrialRoutineBegin(trials) {
return function () {
//------Prepare to start Routine ‘DictTrial’-------
t = 0;
DictTrialClock.reset(); // clock
frameN = -1;
// update component parameters for each repeat
CoinSlider.markerPos = 0;
CoinSlider.reset()
DictTrialText.setText(‘How many coins do you want to keep for yourself?’);
// keep track of which components have finished
DictTrialComponents = [];
DictTrialComponents.push(CoinSlider);
DictTrialComponents.push(DictTrialText);
DictTrialComponents.push(sixCoins_img);
DictTrialComponents.push(SpaceRem);

for (const thisComponent of DictTrialComponents)
  if ('status' in thisComponent)
    thisComponent.status = PsychoJS.Status.NOT_STARTED;

return Scheduler.Event.NEXT;

};
}

//
if (theseKeys.length > 0) { // at least one key was pressed
if (CoinSlider.getRating() !== undefined) {
continueRoutine = false; // end now
}
}

// *CoinSlider* updates
if (t >= 0.0 && CoinSlider.status === PsychoJS.Status.NOT_STARTED) {
  // keep track of start time/frame for later
  CoinSlider.tStart = t;  // (not accounting for frame time here)
  CoinSlider.frameNStart = frameN;  // exact frame index
  
  CoinSlider.setAutoDraw(true);
}