Fill in the Gap quiz using drag and drop

I wanted to recreate this style of informational drag and drop quiz that I stumbled upon recently.

I was able to do so using a combination of regex find and replace, modulo-based conditionals and my new favourite tool, draggable elements.

I thought others might find it useful or interesting. I also think that whilst it is not a super complex problem, it again speaks to the richness and flexibility of Bubble that one can do this sort of thing without code.

Preview: https://louisforum.bubbleapps.io/version-test/dragdropquiz

Editor: https://bubble.io/page?type=page&name=dragdropquiz&id=louisforum&tab=tabs-1

9 Likes

Very slick. Thanks for sharing!

1 Like

Did you try to create using “input field”.
I am creating a pages where users have to fill the text

As I cannot edit the text nor I can add the input text field in between.
I am trying to achieve like this - Marketing Email Generator Powered By Hire Mia

Please let me know if you have solution for this

Hmm, no I never tried that and I doubt it is possible in exactly the way you would want.

If, like in the example you have provided from Hire Mia, you can rephrase your statements such that the blank space to fill-in is always at the end of the sentence, then you may be able to place an input after each text box.

Otherwise, another idea might be to do as I did but instead of drag and drop, have the user click on each text box to show an input in a small popup or group focus and enter the answer. You could then compare and match as needed.