I just had to share this, because Iām so damned excited that we (@SantiagoPerez and myself) actually made it work.
So whatās going on there??
- Itās an Inline List using a Tiles Layout, but each row of tiles is behaving like an individual choice component
- The tiles are arranged in āpairsā where the words in the left column of tiles have opposite meanings to the words in the right column
- As each tile is tapped, the word in the tile is added to the list shown at the top
- Tap the tile again, and the word is removed from the list
- The use case is we want the user to be able to select either one of each pair, or neither - but NOT both
- And thatās where the āmagicā kicks inā¦ because selecting a tile where the opposing tile is already selected will cause that opposing tile to be de-selected and removed from the list.
- Why is that magic? Because each word is in a different spreadsheet rowā¦
HUGE kudos to @SantiagoPerez for helping me to get this working. Weāve been bouncing ideas off each other for a couple of days, and finally cracked it on a marathon hangout call earlier today. It was a lot of fun (And also @Jeff_Hager - we used your Reset Multiple Rows example as a starting point)
Edit: oh, and @Lucas_Pires or @Robert_Petitto weād love some CSS that we could apply to change the background colour of āselectedā tiles. Thatās the one bit we havenāt figured out yet. The bit of research Iāve done leads me to believe it may not be possible without javascript. Especially flipping the colour of opposing tilesā¦ scratch that, not necessary