Description of the problem:
Hii,
I created my experiment mainly with the builder, but used code components in one task. In my study, participants are presented with various buildings that need to be adjusted in height using a slider. For each presentation of a building, a random value is selected to determine the position of the slider, resulting in a different initial size for the building in each trial. When uploaded to Pavlovia, most parts of my study are functioning correctly, except for the sections involving code implementation, particularly the slider. I have enabled Auto-JS and made some adjustments in the JavaScript code based on the Crib Sheet (https://docs.google.com/document/d/1TSEgiG3SeGSr7LWoRahTZm7vk_loU8zKoDQh2sV1KFw/edit?pli=1#heading=h.niu1u15qj037). While the Python code worked as expected and with limited programming knowledge, I am currently struggling to progress with the JavaScript code. I’m stuck at implementing the slider. I found a post (https://discourse.psychopy.org/t/issues-with-radio-style-slider-in-pavlovia-v2021-1-1/20797) discussing issues with implementing a slider in JavaScript, but unfortunately couldn’t figure out what’s wrong with my code. Any help is greatly appreciated:)
Best, Tessa
Python Code
#Begin Experiment
oldt = 0
screen_height = 0
if win.units == 'norm':
x_scale = 0.05
y_scale = 0.05
dbase = 0.0001
unittext = ' norm units'
vsize = 2
elif win.units == 'pix':
x_scale = 60
y_scale = 40
dbase = 0.1
unittext = ' pixels'
vsize = win.size[1]
else:
x_scale = 0.05
y_scale = 0.05
dbase = 0.0001
unittext = ' height units'
vsize = 1
slider = visual.Slider(
win=win, name='slider',
size=[0.05, 0.7], pos=[-0.6, 0.0], units=win.units,
labels=("schmaler", "höher"), ticks=(0.001, 0.7), granularity=0.0,
style='rating',
opacity=None,
labelColor='black', markerColor='black', lineColor='black', colorSpace='rgb',
font='Arial', labelHeight=0.02,
flip=False, ori=0.0, depth=-1, readOnly=False
)
# Begin Routine
slider_value = None
randStart = None
slider.markerPos = None
slider.autoDraw = True
slider_2.autoDraw = False
slider.marker.size = (0.02, 0.02)
selected_image = imagebuilding2.image
if selected_image in ['stimuli/burj_al_arab.png', 'stimuli/burj_al_arab_sw.png','stimuli/schiefe_turm.png', 'stimuli/schiefe_turm_sw.png']:
randStart = np.random.uniform(0.42, 0.55)
slider.markerPos = randStart
thisExp.addData('slider.markerPos', slider.markerPos)
current_x_size = 0.13
current_y_size = 1 * randStart
elif selected_image in ['stimuli/Prime_tower.png', 'stimuli/Prime_tower_sw.png','stimuli/roche_basel.png', 'stimuli/roche_basel_sw.png']:
randStart = np.random.uniform(0.40, 0.55)
slider.markerPos = randStart
thisExp.addData('slider.markerPos', slider.markerPos)
current_x_size = 0.14
current_y_size = 0.8 * randStart
elif selected_image in ['stimuli/eiffel_turm.png', 'stimuli/eiffel_turm_sw.png']:
randStart = np.random.uniform(0.42, 0.55)
slider.markerPos = randStart
thisExp.addData('slider.markerPos', slider.markerPos)
current_x_size = 0.16
current_y_size = 1 * randStart
elif selected_image in ['stimuli/bigben.png', 'stimuli/bigben_sw.png']:
randStart = np.random.uniform(0.45, 0.55)
slider.markerPos = randStart
thisExp.addData('slider.markerPos', slider.markerPos)
current_x_size = 0.08
current_y_size = 1.4 * randStart
elif selected_image in ['stimuli/welle_7.png', 'stimuli/welle_7_Sw.png', 'stimuli/opernhaus_sydney.png', 'stimuli/opernhaus_sydney_sw.png']:
randStart = np.random.uniform(0.40, 0.55)
slider.markerPos = randStart
thisExp.addData('slider.markerPos', slider.markerPos)
current_x_size = 0.6
current_y_size = 0.6 * randStart
elif selected_image in ['stimuli/ibis_hotel.png', 'stimuli/ibis_hotel_sw.png', 'stimuli/bundeshaus_bern.png',
'stimuli/bundeshaus_bern_sw.png', 'stimuli/theater_bern.png', 'stimuli/theater_bern_sw.png']:
randStart = np.random.uniform(0.45, 0.55)
slider.markerPos = randStart
thisExp.addData('slider.markerPos', slider.markerPos)
current_x_size = 0.5
current_y_size = 1 * randStart
elif selected_image in ['stimuli/unibern.png', 'stimuli/unibern_sw.png', 'stimuli/whitehouse.png',
'stimuli/whitehouse_sw.png']:
randStart = np.random.uniform(0.42, 0.53)
slider.markerPos = randStart
thisExp.addData('slider.markerPos', slider.markerPos)
current_x_size = 0.5
current_y_size = 0.7 * randStart
else:
randStart = np.random.uniform(0.42, 0.53)
slider.markerPos = randStart
thisExp.addData('slider.markerPos', slider.markerPos)
current_x_size = 0.5
current_y_size = 0.9 * randStart
thisExp.addData('current_y_size', current_y_size)
imagebuilding2.size = [current_x_size, current_y_size]
JavaScript
# Begin Experiment
var oldt = 0;
var screen_height = 0;
var x_scale, y_scale, dbase, unittext, vsize, slider;
if (psychoJS.window.units === "norm") {
x_scale = 0.05;
y_scale = 0.1;
dbase = 0.0001;
unittext = " norm units";
vsize = 2;
} else if (psychoJS.window.units === "pix") {
x_scale = 60;
y_scale = 40;
dbase = 0.1;
unittext = " pixels";
vsize = psychoJS.window.size[1];
} else {
x_scale = 0.05;
y_scale = 0.05;
dbase = 0.0001;
unittext = " height units";
vsize = 1;
}
slider = new visual.Slider({
win: psychoJS.window,
name: 'slider',
startValue: undefined,
size: [0.05, 0.7],
pos: [-0.6, 0.0],
ori: 0.0,
units: psychoJS.window.units,
labels: ["schmaler", "höher"],
fontSize: 0.02,
ticks: [0.001, 0.7],
granularity: 0.0,
style: "rating",
color: new util.Color([-1.0, -1.0, -1.0]),
markerColor: new util.Color([-1.0, -1.0, -1.0]),
lineColor: new util.Color([-1.0, -1.0, -1.0]),
opacity: undefined,
fontFamily: 'Arial',
bold: true,
italic: false,
depth: -5,
flip: false
});
# Begin Routine
slider.marker.size = [0.02, 0.02];
var randStart, current_x_size, current_y_size;
var selected_image = imagebuilding2.image;
if (["stimuli/burj_al_arab.png", "stimuli/burj_al_arab_sw.png", "stimuli/schiefe_turm.png", "stimuli/schiefe_turm_sw.png"].includes(selected_image)) {
randStart = 0.42 + Math.random() * (0.55 - 0.42);
slider.markerPos = randStart;
psychoJS.experiment.addData("slider.markerPos", randStart);
current_x_size = 0.13;
current_y_size = 1 * randStart;
} else if (["stimuli/Prime_tower.png", "stimuli/Prime_tower_sw.png", "stimuli/roche_basel.png", "stimuli/roche_basel_sw.png"].includes(selected_image)) {
randStart = 0.4 + Math.random() * (0.55 - 0.4);
slider.markerPos = randStart;
psychoJS.experiment.addData("slider.markerPos", randStart);
current_x_size = 0.14;
current_y_size = 0.8 * randStart;
} else if (["stimuli/eiffel_turm.png", "stimuli/eiffel_turm_sw.png"].includes(selected_image)) {
randStart = 0.42 + Math.random() * (0.55 - 0.42);
slider.markerPos = randStart;
psychoJS.experiment.addData("slider.markerPos", randStart);
current_x_size = 0.16;
current_y_size = 1 * randStart;
} else if (["stimuli/bigben.png", "stimuli/bigben_sw.png"].includes(selected_image)) {
randStart = 0.45 + Math.random() * (0.55 - 0.45);
slider.markerPos = randStart;
psychoJS.experiment.addData("slider.markerPos", randStart);
current_x_size = 0.08;
current_y_size = 1.4 * randStart;
} else if (["stimuli/welle_7.png", "stimuli/welle_7_Sw.png", "stimuli/opernhaus_sydney.png", "stimuli/opernhaus_sydney_sw.png"].includes(selected_image)) {
randStart = 0.4 + Math.random() * (0.55 - 0.4);
slider.markerPos = randStart;
psychoJS.experiment.addData("slider.markerPos", randStart);
current_x_size = 0.6;
current_y_size = 0.6 * randStart;
} else if (["stimuli/ibis_hotel.png", "stimuli/ibis_hotel_sw.png", "stimuli/bundeshaus_bern.png", "stimuli/bundeshaus_bern_sw.png", "stimuli/theater_bern.png", "stimuli/theater_bern_sw.png"].includes(selected_image)) {
randStart = 0.45 + Math.random() * (0.55 - 0.45);
slider.markerPos = randStart;
psychoJS.experiment.addData("slider.markerPos", randStart);
current_x_size = 0.5;
current_y_size = 1 * randStart;
} else if (["stimuli/unibern.png", "stimuli/unibern_sw.png", "stimuli/whitehouse.png", "stimuli/whitehouse_sw.png"].includes(selected_image)) {
randStart = 0.42 + Math.random() * (0.53 - 0.42);
slider.markerPos = randStart;
psychoJS.experiment.addData("slider.markerPos", randStart);
current_x_size = 0.5;
current_y_size = 0.7 * randStart;
} else {
randStart = 0.42 + Math.random() * (0.53 - 0.42);
slider.markerPos = randStart;
psychoJS.experiment.addData("slider.markerPos", randStart);
current_x_size = 0.5;
current_y_size = 0.9 * randStart;
}
psychoJS.experiment.addData("current_y_size", current_y_size);
imagebuilding2.size = [current_x_size, current_y_size];