Hello,

I was wondering if oTree supports a sliding scale question item, and if there's relevant documentation for this?
I've used radio button options and free response options but have -1, -0.9, -0.8.... 0, 0.1, 0.2,.... 0.8.0.9, 1.0 as response options and would ideally like to have this on a sliding scale.

Thank you!

I actually found the reference

but am having an issue adapting it to old oTree (v3). Below is the code, and the error.

<p>Choose the point on the scale that represents how much you'd like to contribute:</p>
<p>
    Least &nbsp;
    {% for choice in form.contribution %}
        {% choice %}
    {% endfor %}
    &nbsp; Most
</p>


The code returns the following error:





TemplateSyntaxError at /p/mdjtxzh4/dg2023/playerInfoDisplay/13/
Invalid block tag on line 36: 'choice', expected 'empty' or 'endfor'. Did you forget to register or load this tag?
Request Method:    GET
Request URL:    http://localhost:8000/p/mdjtxzh4/dg2023/playerInfoDisplay/13/
Django Version:    1.11.2
Exception Type:    TemplateSyntaxError
Exception Value:    
Invalid block tag on line 36: 'choice', expected 'empty' or 'endfor'. Did you forget to register or load this tag?
Exception Location:    /Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/django/template/base.py in invalid_block_tag, line 559
Python Executable:    /Library/Frameworks/Python.framework/Versions/3.9/bin/python3.9

Sorry, I realize I had to remove the % signs.

<p>Choose the point on the scale that represents how much you want to contribute:</p>
<p>
    Least &nbsp;
    {% for choice in form.contribution %}
        {{ choice }}
    {% endfor %}
    &nbsp; Most
</p>

Unfortunately the end result is not quite a slider. Is my code wrong or is there a way to improve on this scale? (See attached)

oTree doesn’t have a built in slider. You’d have to use an HTML range input. Just wondering why you prefer a slider to a horizontal radio layout? Often users request a slider but it seems they are rarely happy with the way it works. For example (1) the slider knob has a default position which creates issues with anchoring, (2) you cant tell if a user touched the slider or if they just left it in the default position, (3) the slider doesn’t indicate the numeric value. You can fix some of these problems with custom javascript code but to me it seems less effort and more suitable for behavioral experiments to use a horizontal radio.

Thanks for your response. 
I've tried the horizontal radio layout, the issue is that because I have a lot of values, they end up forming 2 lines (Please see the screenshot). (If I opt for the vertical option, on the other hand, it ends up taking up a lot of space, and requires scrolling down.) Is there any way for all buttons to appear in one line horizontally? Perhaps by having the $ amount show up at 45 degree angle above or below the radio button?

Have you considered using my otree_slider?
https://max.pm/posts/otree_slider/

rvman0523 asked:

> Is there any way for all buttons to appear in one line horizontally? Perhaps by having the $ amount show up at 45 degree angle above or below the radio button?

Yes, you can influence the design of the labels. Here is some CSS code that shows which classes you need to adapt to your needs:

<style>
    .form-check-inline {
        margin-top: 3em;
        margin-right: -0.25em;
    }
    .form-check-label {
        width: 0px;
        transform: rotate(-90deg);
        margin-left: -2.05em;
        padding-left: 2em;
    }
</style>

A screenshot of the resulting layout is attached

I would recommend an extensive check of whether this looks good across different browsers.

@Max, 
yes I actually did start tinkering with it, but I found that once you click on the blue bar, the blue bar shrunk to about 20% of the original full length even though the rest of the frame remains the same. (See png attached) Also, I'm hoping to have both the end values and the selected value be denominated in $, and I saw you listed a way to do this: 

slider1.f2s = function (val) {
    return '$' + val.toFixed(2);
}

But I'm not familiar with js and I wasn't sure where exactly that segment needs to go in the js file. Any way you could provide some pointers?

@BonnEconLab
Thank you for the code!! I tried modifying it a bit but was wondering if you had an idea of how to bring the values of the buttons closer to the button? (Please see the attached png)

I tried modifying the css and am currently at the following configurations:

<style>
    .form-check-inline {
        margin-top: 4em;
        margin-right: 0.4em;
    }
    .form-check-label {
        width: 0px;
        transform: rotate(-60deg);
        margin-left: -2.05em;
        padding-left: 3em;
    }
</style>

Just play around with the padding-left value, margin-top value, etc.

For instance,

<style>
    .form-check-inline {
        margin-top: 2.5em;
        margin-right: 0.4em;
    }
    .form-check-label {
        width: 0px;
        transform: rotate(-60deg);
        margin-left: -2.05em;
        padding-left: 2.1em;
    }
</style>