Forum Discussion
New Matching lay-out
Hi Everyone!
I'm happy to share that we just released a new update for Rise 360!
This update introduces an enhancement to Matching Knowledge Check Blocks. Reworking the interaction to better reflect their original design, while retaining full keyboard support and screen reader integration. There's nothing to install for web-based apps. New features and fixes are immediately available.
Please let me know if you have any questions!
Phill, what do you think, would it be possible to modify it so that the order can be set, with numbers permanently fixed on the left side?
That's an interesting idea- kind of a right-to-left (interaction) but I think it might be the most usable design as the numbers are first in my mind- especially if using a numbered diagram or numeric numbering. I wanted to keep the 'cards' format so the user definitely knows when they're connected. What do you think:
Looking good! I do like the puzzle piece which you were using before though. I think that is such a strong visual clue for users to start matching the boxes.
Phil, it looks great! I suggested numbered circles because they matched the numbered list in Rise, but your solution is better. However, I have to agree with Thom 392 as well, using a puzzle piece immediately signals that it's an exercise, so it might be worth considering a similar design for this interaction. It would keep the course visually consistent.
Thanks guys for the feedback olaola Thom392 I've added the puzzle shape back- the only thing I don't like about that is it requires an image along with the css. But you can modify that if you want more of the > shape instead. I've added a slight angle to the 'unmatched' state. I still need to work on the mobile css, even without my theme component the spacing and text alignment gets wonky at smallest device sizes and almost completely unusable.
mobile in unmodified state:
Doesn't need an external image, you can embed that PNG file right into your CSS -
background-image: url(data:image/png;base64,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);
