# Horizontal setting of choices view

**URL:** <https://support.prodi.gy/t/horizontal-setting-of-choices-view/6714>\
**Category:** Uncategorized\
**Tags:** textcat, front-end\
**Created:** [August 7, 2023, 10:34am UTC](https://support.prodi.gy/t/horizontal-setting-of-choices-view/6714 "2023-08-07T10:34:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Coolsonn](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/coolsonn/32/3903_2.png) [@Coolsonn](https://support.prodi.gy/u/Coolsonn)\
**Post date:** [August 7, 2023, 10:34am UTC](https://support.prodi.gy/t/horizontal-setting-of-choices-view/6714/1 "2023-08-07T10:34:06Z")

</div>

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:

 ![Screenshot 2023-08-07 at 12.30.12](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/d/d7241507cffe193d55156468457a8876f42e7408.png)

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)

 ![Screenshot 2023-08-07 at 12.31.58](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/a/a58e14c0594ec31583cc2d7fc2493e1cb827edf3.png)

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.

---

<div class="post-metadata">

**Author:** ![koaning](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/koaning/32/230_2.png) [@koaning](https://support.prodi.gy/u/koaning)\
**Post date:** [August 7, 2023, 11:05am UTC](https://support.prodi.gy/t/horizontal-setting-of-choices-view/6714/2 "2023-08-07T11:05:59Z")

</div>

Hi there!

You'll need to customize the CSS of the component for this ([docs](https://prodi.gy/docs/custom-interfaces#css)). To help explain how to do this I've set up a similar recipe that uses the following examples:

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

```

Here's how I call the recipe.

```python
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:

 ![CleanShot 2023-08-07 at 13.02.12](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/3/3bd677ca5d437520e380c45b53c77b8cb5eea9fc.jpeg)

Notice how the option element there has a `.prodigy-option` class that corresponds with the entry in [this table](https://prodi.gy/docs/custom-interfaces#css)? 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.

```python
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.

 ![CleanShot 2023-08-07 at 13.05.44](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/2/295a0974259ba8c58381be613d10efc3b26f3ce2.jpeg)

Does this help?