Problem Script for Visual Analog Scale / VAS / Slider

lisalisa94

VAS with phyton.osexp

Hello everyone!

I have 2 problems, which are:

1.ABOUT INLINE SCRIPT PHYTON

A year before, I made an inline script (phyton) for my VAS / slider, and it works perfectly. But this time, It would be error when running this VAS, especially because the attribute 'set_bgcolor', although I have used it before 1 year ago and it just fine. Could anyone please give me idea and wht 'set_bgcolor' is not suit for this script now? Fyi i have updated the newest version of OpenSesame.

The error notif is below

• Error while executing inline script (run phase)
• This error occurred on line 20 in the run phase of item vas1.
• Traceback (most recent call last):
• File "<vas1.run>", line 20, in <module>
• AttributeError: 'Legacy' object has no attribute 'set_bgcolor'

And here is my script (or see my attachment):

from openexp.canvas import canvas
from openexp.mouse import mouse
my_canvas = canvas(self.experiment)
my_mouse = mouse(self.experiment, timeout=20)

# Set slider dimensions
duration = 15000
slider_w = 500
slider_h = 10
slider_x = -slider_w/2
slider_y = -slider_h/2
start_time = clock.time()
while True:

# Determine the slider fill based on the mouse position
pos, time = my_mouse.get_pos()
x, y = pos
slider_fill = min(slider_w, max(0, x-slider_x))

my_canvas.set_bgcolor('white')
my_canvas.clear()
# Draw some text (this can be anything)
my_canvas.text("Bagaimana perasaan Anda saat ini?", y=slider_y-100)
my_canvas.set_fgcolor('black')
my_canvas.text("sama sekali tidak lelah mental", x=slider_x-110)
my_canvas.set_fgcolor('black')
my_canvas.text("sangat lelah mental", x=slider_x+500+75)
my_canvas.set_fgcolor('black')
my_canvas.text("0%", x=-250, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("10%", x=-200, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("20%", x=-150, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("30%", x=-100, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("40%", x=-50, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("50%", x=0, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("60%", x=+50, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("70%", x=+100, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("80%", x=+150, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("90%", x=+200, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("100%", x=+250, y=slider_y+20)
my_canvas.set_fgcolor('black')
my_canvas.text("(Arahkan kursor pada persentase kelelahan mental yang dirasakan)", y=slider_y+100)
my_canvas.set_fgcolor('black')
# Draw the slider frame
my_canvas.rect(slider_x, slider_y, slider_w, slider_h)
# Draw the slider fill
my_canvas.rect(slider_x, slider_y, slider_fill, slider_h, fill=True)
# Draw the mouse cursor
my_canvas.arrow(x+5, y+10, x, y)
my_canvas.show()

# Poll the mouse for buttonclicks
button, position, timestamp = my_mouse.get_click(timeout = 20)
if timestamp - start_time> duration:
break
slider_percent = 100.0*slider_fill/slider_w
self.experiment.set("slider_percent", slider_percent)

2.INLINE JAVASCRIPT FOR OSWEB

This time, I plan to conduct this VAS/Slider into online test with OSWEB, which is only javascript that support this kind of slider. But I don't know how to convert this my old (phyton) inline script to be inline javascript. Is there anyone here can explain how to to this and maybe give me some recommendation? I have change several script in old script, but nothing happern, it doesn't work.

fyi, for OSWEB, I already have Jatos account and able to run experiment online. So I just need some help or idea for converting phyton script to javascript.

Fab

Hi @lisalisa94,

The first problem relates to the fact that your code was written under a previous version of Open Sesama and that some of the commands have changed or been phased out.

For example, to set up a canvas, you no longer

from openexp.canvas import canvas
my_canvas = canvas(self.experiment)

but simply

my_canvas = Canvas()

So, you need to go through the documentation, the forum and debug problem by problem. Then you'd end up with something like this:

# Initialize canvas and mouse
my_canvas = Canvas(color='white',background_color='black')
my_mouse = Mouse(timeout=20000)


# Set slider dimensions and timing
duration = 15000
slider_w = 500
slider_h = 10
slider_x = -slider_w / 2
slider_y = -slider_h / 2
start_time = clock.time()

# Text for percentages and their positions
percentages = ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']
positions = range(-250, 251, 50) # Assumes that position should increment by 50 for each percentage

while True:
# Get mouse position
pos, time = my_mouse.get_pos()
x, y = pos
slider_fill = min(slider_w, max(0, x - slider_x))

# Prepare canvas
my_canvas.clear()
my_canvas.text("How do you feel right now?", y=slider_y-100)

# Draw text at the specified intervals
for pct_txt, xpos in zip(percentages, positions):
my_canvas.text(pct_txt, x=xpos, y=slider_y + 20)
my_canvas.text("(Drag the cursor to the percentage of mental fatigue you are feeling)", y=slider_y + 100)

# Draw slider and its fill
my_canvas.rect(slider_x, slider_y, slider_w, slider_h)
my_canvas.rect(slider_x, slider_y, slider_fill, slider_h, fill=True)

# Draw the mouse cursor
my_canvas.arrow(x + 5, y + 10, x, y)
my_canvas.show()

# Check for mouse click or timeout
button, position, timestamp = my_mouse.get_click(timeout=20)
if clock.time() - start_time > duration:
break

# Calculate and record slider percentage
slider_percent = 100.0 * slider_fill / slider_w

This Python code works under Open Sesame 4.

Now on to the second issue... To run your experiment in the browser, as you correctly pointed out, the Python code just won't do. Instead you'll have to use Javascript and HTML code to program something equivalent to what you did in Python. This can be more or less complex. An alternative would be to use the GUI with a loop running a high number of times (until a certain condition is met), with a feedback object changing based on the mouse position.

Providing full HTML / Javascript code falls outside the scope of this forum per se (you'd have to research how to implement this kind of thing in Javascript). However, if it helps, here is some code you could insert into a inline_html object (not an inline_javascripipt object, as it contains both HTML and javascript code) that displays a progress bar with a value changing with the mouse's x coordinates and that freezes the value when the user produces a mouse click. Hopefully it can get you going (you'd have to adapt it to your needs).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gauge Display with Click to Set</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#gaugeContainer {
width: 500px; /* Width of the gauge */
height: 50px; /* Height of the gauge */
background-color: #eee;
position: relative;
border: 1px solid #ccc;
}
#gaugeIndicator {
height: 100%;
background-color: #3a9;
width: 0%; /* Initial width */
}
#displayValue {
position: absolute;
width: 100%;
text-align: center;
top: 20px; /* Position of the text inside the container */
}
</style>
</head>
<body>
<div id="gaugeContainer" onmousemove="updateGauge(event)" onclick="fixValue()">
<div id="gaugeIndicator"></div>
<div id="displayValue">0%</div>
</div>
<script>
let fixed = false; // Flag to check if the value is fixed

function updateGauge(event) {
if (!fixed) { // Only update if the value is not fixed
const gaugeContainer = document.getElementById('gaugeContainer');
const gaugeIndicator = document.getElementById('gaugeIndicator');
const displayValue = document.getElementById('displayValue');

const bounds = gaugeContainer.getBoundingClientRect();
const x = event.clientX - bounds.left; // x coordinate relative to the gauge
const width = bounds.width;

const percentage = Math.max(0, Math.min(100, (x / width) * 100));
gaugeIndicator.style.width = percentage + '%';
displayValue.textContent = percentage.toFixed(0) + '%';
}
}

function fixValue() {
fixed = true; // Set the flag to true on click to fix the value
}
</script>
</body>
</html>

Hope this helps,

Fabrice.

lisalisa94

Hi Fabrice,

Thankyou for your mindful response!

For Case 1:

Thankyou Fabrice ! There is some trouble but finally your phyton script is working well. This is an attached python file which could be useful for other readers here in forum.

VAS with phyton.osexp

For Case 2:

I've tried your HTML script recommendation, but I'm really struggling to modify the gauge/slider. Eventually, I found an HTML script (attached below) with a slider appearance closer to what's generated in the Python script. However, there are still some unresolved issues, such as:

1. I want to make the slider duration based on mouse click.

2. The slider screen doesn't stop, it keeps looping on that screen.

3. I added slider labels that I want to place below the slider container, but it didn't work. The aim is to help participants understand the value boundaries in the slider before deciding on a mouse click.

4. I don't understand how to input logs from this HTML, like slider percentage, so that it can enter its Open Sesame logger for data analysis.

vas html.osexp

I really hope that Fabrice or anyone else can assist me in resolving the HTML script based on the four points I highlighted above. 😭

Wishing success and smooth progress in all of Fabrice's and others' endeavors and research endeavors.

Fab

Hi @lisalisa94,

You would need to edit the HTML/Javascript code to introduce the changes you're describing. It's a matter of HTML/Javascript coding (it's not specific to Open Sesame). So my recommendation would be to take some time to get more familiar with HTML and Javascript and work out how to display the text you want ehere you want it.

Regarding collecting a value when the subject clicks and saving it to Open Sesame as some variable, you can edit the code accordingly and save the value into a variable using "vars." + the name of the variable (see documentation: https://osdoc.cogsci.nl/4.0/manual/javascript/about/). That variable will then be registered by Open Sesame. If you have multiiple trials, you'd have to place the html_inline object inside a sequence inside a loop. You can use the GUI for that.

Here's a modification of my earlier HTML(Javascript to collect the subject's response from a mouse click and save it into a variable (and print it into the browser's console, so you can see it does get collected).

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Gauge Display with Click to Set and Save</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

#gaugeContainer {

width: 500px; /* Width of the gauge */

height: 50px; /* Height of the gauge */

background-color: #eee;

position: relative;

border: 1px solid #ccc;

}

#gaugeIndicator {

height: 100%;

background-color: #3a9;

width: 0%; /* Initial width */

}

#displayValue {

position: absolute;

width: 100%;

text-align: center;

top: 20px; /* Position of the text inside the container */

}

</style>

</head>

<body>

<div id="gaugeContainer" onmousemove="updateGauge(event)" onclick="fixAndSaveValue()">

<div id="gaugeIndicator"></div>

<div id="displayValue">0%</div>

</div>

<script>

let fixed = false; // Flag to check if the value is fixed

let finalValue = 0; // Store the final gauge value here




function updateGauge(event) {

if (!fixed) { // Only update if the value is not fixed

const gaugeContainer = document.getElementById('gaugeContainer');

const gaugeIndicator = document.getElementById('gaugeIndicator');

const displayValue = document.getElementById('displayValue');




const bounds = gaugeContainer.getBoundingClientRect();

const x = event.clientX - bounds.left; // x coordinate relative to the gauge

const width = bounds.width;




const percentage = Math.max(0, Math.min(100, (x / width) * 100));

gaugeIndicator.style.width = percentage + '%';

displayValue.textContent = percentage.toFixed(0) + '%';

finalValue = percentage; // Update finalValue as the mouse moves

}

}




function fixAndSaveValue() {

fixed = true; // Set the flag to true on click to fix the value

vars.gaugeValue = finalValue; // Save the final value to an OpenSesame variable

console.log('Gauge value fixed and saved: ' + vars.gaugeValue); // Logging for debugging purposes

}

</script>

</body>

</html>

Console:

Good luck!

Fabrice