custom html input with datalist not showing

,
1

Hi there,

I'm putting together a custom recipe that uses an HTML <input type=range> slider. I would like to put tick marks at set intervals but I can't get these ticks to appear in Prodigy.

For example, my HTML code block is something like this:

<form>
    <strong>FLUENCY</strong>
    <input type="range" id="fluency_range" style="width: 500px;" min="0" max="100" step="0.1" list="ticks">
    <datalist id="ticks">
        <option>0</option>
        <option>25</option>
        <option>50</option>
        <option>75</option>
        <option>100</option>
    </datalist>
</form>

If it helps, I've tested it in both Chrome and Firefox and am using Prodigy v1.10.4. Any suggestions would be appreciated!

Thanks

2

Hi! I just tried it out in Chrome (89.0, macOS) and the result in Prodigy looks like this:

Screenshot 2021-03-25 at 12.26.16
Screenshot 2021-03-25 at 12.26.161510×500 4.85 KB

I think that's how a range input with ticks is supposed to look, right? It's not going to work in Firefox, though, but that's expected, according to this (8-years-old and open!) thread: 841942 - Consider displaying tick marks for <input type=range> when @list/<datalist> is used

3

Hi Ines,

Thanks for the response. That's exactly what I was hoping to get too. I'm also running Chrome 89.0, on macOS, so it's unclear why the ticks don't show up for me. Here's what I see:

Screenshot 2021-03-25 at 23.42.34
Screenshot 2021-03-25 at 23.42.341176×256 2.59 KB

4

This is definitely strange – I copied your exact code and tried it both as the "html" of a task and as the "html_template", and it worked fine for me in Chrome every time :thinking: Can you share your recipe code?

5

Sure, I've uploaded a minimal example of the recipe at https://github.com/tannonk/prodigy_human_evaluation/blob/master/html_range_with_ticks/recipe.py

6

Thanks! This is very mysterious indeed – I just ran your exact recipe code and here's how it looks for me in Chrome :thinking:

Screenshot 2021-03-28 at 12.46.41
Screenshot 2021-03-28 at 12.46.411310×344 3.04 KB

And the recipe seems fine and there's nothing that would indicate a problem. Does it work for you outside of Prodigy in the same browser? For example, if you just make it a .html file and open it?

7

Yes, the ticks appear as expected when run as a regular .html file. I just tested the recipe out on a work server that's running a different installation of Prodigy (also v1.10.4) and there it works as expected! So the issue seems to be something to do with my local installation of Prodigy that I've been using for quick testing and development.