Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Supported by

Problem Script for Visual Analog Scale / VAS / Slider

edited May 11 in OpenSesame

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.

Comments

  • 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.

    Buy Me A Coffee

  • 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.


    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.


    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.

  • 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

    Buy Me A Coffee

Sign In or Register to comment.

agen judi bola , sportbook, casino, togel, number game, singapore, tangkas, basket, slot, poker, dominoqq, agen bola. Semua permainan bisa dimainkan hanya dengan 1 ID. minimal deposit 50.000 ,- bonus cashback hingga 10% , diskon togel hingga 66% bisa bermain di android dan IOS kapanpun dan dimana pun. poker , bandarq , aduq, domino qq , dominobet. Semua permainan bisa dimainkan hanya dengan 1 ID. minimal deposit 10.000 ,- bonus turnover 0.5% dan bonus referral 20%. Bonus - bonus yang dihadirkan bisa terbilang cukup tinggi dan memuaskan, anda hanya perlu memasang pada situs yang memberikan bursa pasaran terbaik yaitu http://45.77.173.118/ Bola168. Situs penyedia segala jenis permainan poker online kini semakin banyak ditemukan di Internet, salah satunya TahunQQ merupakan situs Agen Judi Domino66 Dan BandarQ Terpercaya yang mampu memberikan banyak provit bagi bettornya. Permainan Yang Di Sediakan Dewi365 Juga sangat banyak Dan menarik dan Peluang untuk memenangkan Taruhan Judi online ini juga sangat mudah . Mainkan Segera Taruhan Sportbook anda bersama Agen Judi Bola Bersama Dewi365 Kemenangan Anda Berapa pun akan Terbayarkan. Tersedia 9 macam permainan seru yang bisa kamu mainkan hanya di dalam 1 ID saja. Permainan seru yang tersedia seperti Poker, Domino QQ Dan juga BandarQ Online. Semuanya tersedia lengkap hanya di ABGQQ. Situs ABGQQ sangat mudah dimenangkan, kamu juga akan mendapatkan mega bonus dan setiap pemain berhak mendapatkan cashback mingguan. ABGQQ juga telah diakui sebagai Bandar Domino Online yang menjamin sistem FAIR PLAY disetiap permainan yang bisa dimainkan dengan deposit minimal hanya Rp.25.000. DEWI365 adalah Bandar Judi Bola Terpercaya & resmi dan terpercaya di indonesia. Situs judi bola ini menyediakan fasilitas bagi anda untuk dapat bermain memainkan permainan judi bola. Didalam situs ini memiliki berbagai permainan taruhan bola terlengkap seperti Sbobet, yang membuat DEWI365 menjadi situs judi bola terbaik dan terpercaya di Indonesia. Tentunya sebagai situs yang bertugas sebagai Bandar Poker Online pastinya akan berusaha untuk menjaga semua informasi dan keamanan yang terdapat di POKERQQ13. Kotakqq adalah situs Judi Poker Online Terpercayayang menyediakan 9 jenis permainan sakong online, dominoqq, domino99, bandarq, bandar ceme, aduq, poker online, bandar poker, balak66, perang baccarat, dan capsa susun. Dengan minimal deposit withdraw 15.000 Anda sudah bisa memainkan semua permaina pkv games di situs kami. Jackpot besar,Win rate tinggi, Fair play, PKV Games