UX for picking tags and then quantities related to them

I'm making an app in which students can select topics/tags they're interested in, and get a randomly-generated quiz containing questions that have those tags/belong to those topics. For each selected tag, the user must also be able to explicitly specify the amount of questions with that tag that they want to see.

I'm having troubles finding a way of accomplishing this type of interaction in a way that looks good, is simple to use, and has a low interaction cost.

The way it's done right now is: the user is first presented with a list of available tags.

enter image description here

after clicking a tag, the list of tags is covered with a dark overlay and an input appears to select the amount of questions for that tag.

enter image description here

after confirming, the interface goes back to normal. Chosen tags are highlighted and display the selected amount next to them.

enter image description here

This short video better shows usage of the interface: https://youtu.be/jdwpB4hwlcg

Problems I have with it:

  • changing the amount for a tag requires un-selecting a tag, selecting it again, and inputting the new value
  • I don't really like the overlay but I don't know how else to convey the sense of the order of operations
  • this doesn't scale well with lots of tags, especially on mobile, where the user has to scroll down a lot just to reach the number input, only to jump back up to select the next tag.

What could be done to improve this design and bring a better user experience with it?

Tags: , , , , , ,