In my school web app, teachers can create exams and pick exercises to put in them from a big "exercise pool" they previously created.
The exam editor allows teachers to create slots and to insert one or more exercises in each slot. This is achieved using an "exercise picker" which is opened inside a dialog.
The picker shows more exercises as the user scrolls down (infinite scroll) and allows to filter exercises according to some search criteria. Exercises are shown as cards with a button to allow for selection.
Here's what it looks like in action:
I have two questions about the usage and UX of this component:
is it okay for the search filters to behave the way they do? As you can see, they are at the top of the picker and scroll out of view when scrolling down. I am afraid this could wind up being annoying for the user to have to scroll back up each time they want to change the filters. At the same time, I don't want to stick the filters to the top at all times as they would take up a lot of space. Maybe a solution could be to shrink the height of the search filters box as the user scrolls down, parallax-like, until there is only a small stripe left with an icon that can be used to expand it?
as you can see, when I select a one or more exercises, if I close the dialog and open it back, I have to dig down to find the selected exercise(s). Would it be appropriate to keep the selected ones at the top? The main reason for not doing this would be that it alters the order of exercises shown to the user: one exercise could have been 23rd and now it's shown as the first one. I thought about separating them from the others, like showing a small title "Exercises you selected" and keeping them at the top, but I'm not sure.
Overall, I'm looking for ways to optimize usage of this component and to keep the interaction cost as low as possible. Any feedback is welcome.