Horizontal setting of choices view

[Coolsonn (Kuba Białczyk)]

I am using Prodigy as a tool in which annotators will be manually assessing the sentiment of single texts. I want the annotations to be answered on a Likert scale (from 1 to 7). According to research, the Likert scale's answers choices must be organized horizontally, to limit the bias on the first responses from the top.

Currently, the interface look like this:

And I wonder if there is any way to organize the answers in the "choices" block horizontally like the example below (found on the internet)

I don't expect programming a custom frontend to be exactly like the linked example - just organizing answer buttons horizontally instead of vertically is everything I want to achieve, but couldn't find such a setting in docs nor on the support page.

Thank you in advance for any help.

[koaning (Vincent D Warmerdam)]

Hi there!

You'll need to customize the CSS of the component for this (docs). To help explain how to do this I've set up a similar recipe that uses the following examples:

{"text": "omg yes!"}
{"text": "omg no!"}

Here's how I call the recipe.

PRODIGY_CONFIG_OVERRIDES='{"port": 12345}' python -m prodigy mark issue-6714 examples.jsonl --label 1,2,3,4,5 --view-id choice

From here, you can open Prodigy in the browser with the devtools, which might look something like this for you:

Notice how the option element there has a .prodigy-option class that corresponds with the entry in this table? That means we can write custom css for it. In general that means we can just directly change the width. To do this, I'll just update the config overrides, but you can also change the prodigy.json file.

PRODIGY_CONFIG_OVERRIDES='{"port": 12345, "global_css": ".prodigy-option{width: 19%}"}' python -m prodigy mark issue-6714 examples.jsonl --label 1,2,3,4,5 --view-id choice

When I re-run this, you can see the width update.

Does this help?