choice interface in columns

, , ,
1

I know it has been discussed earlier, but I can't get it to work.

My scenario is a multi-label, multi-category (15 in total), and each sentences has to be tagged with 3/15 choices. The only workable UX is obviously a 3 column, 5 row solution.

I took the cat-example UX (https://prodi.gy/docs/custom-interfaces) as example, and modified as suggested in Display choice options in columns. One of the solutions was to use grid-template-columns structure like
.c01132 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}}
but that did not work (I did not understand where to put this piece of code). I checked the code at https://gridbyexample.com/examples/example1/

{"view_id": "choice", "text": None,
"style": {"display": "grid",
"grid-template-columns": "100px 100px",
"grid-gap": "20px"}}
options = [
{"id": 3, "text": ":smiley_cat: Correct", "style": {"grid-column-start": 1, "grid-column-end": 2, "grid-row-start": 1, "grid-row-end": 2}},
{"id": 2, "text": ":smirk_cat: Partially correct", "style": {"grid-column-start": 2, "grid-column-end": 3, "grid-row-start": 1, "grid-row-end": 2}},
{"id": 1, "text": ":pouting_cat: Wrong", "style": {"grid-column-start": 1, "grid-column-end": 2, "grid-row-start": 2, "grid-row-end": 3}},
{"id": 0, "text": ":scream_cat: Don't know", "style": {"grid-column-start": 2, "grid-column-end": 3, "grid-row-start": 2, "grid-row-end": 3}}
]

but that did not work. Any suggestions on how to solve this?

thanks,

Andreas

2

Hi! You'll need to add your CSS to the config via the global_css setting (as a single string) – also see the example in my comment here.

If you want to have equal columns, you shouldn't have to set any style on the children, just define the columns of the parent block. If you do want to have custom columns for the different options, the easiest way is to target them with :nth-child in the global CSS (so you have all styling in one place). If you want to define styles on the individual options, you can do that, too – but it needs to be a dictionary with camel-cased options (as shown in the data format example here).

3

Hi Ines,

thanks! It worked like a charm. I got stuck on the "where do I put this piece of code"

thanks!

Andreas