How to create hotspot quizz on images?

Need help
1

Hello everyone!

I’m trying to build hotspot-style questions for my medical education app. The idea is simple: a corrector defines a valid clickable area on an image, and later the student clicks on the image. If the student’s click falls within the predefined area, the answer is considered correct.

I’ve tried a few plugins, but I haven’t found a reliable way to implement this yet, and I’m currently stuck.

Does anyone have suggestions or experience with building this kind of feature?

Thanks in advance!

2

One way to implement this in Bubble is to treat the hotspot as coordinates, not as a special element in the image.

On the broker screen, you display the image within a group, give it an ID, and use the Toolbox (JavaScript to Bubble) plugin to capture the point at which the person clicked. With each click you receive the coordinates relative to the image (for example, normalized from 0 to 1) and save this in the database, in a data type linked to the question. If you want a rectangle, for example, the corrector clicks twice: first to the top left, then to the bottom right, and you record x1, y1, x2, y2.

On the student’s screen, you show the same image, capture the student’s click with the same schema (JavaScript to Bubble), and get normalized click_x and click_y. In the workflow, you only compare: if the click is between x1 and x2 and between y1 and y2, you mark it as correct; otherwise, incorrect.

The advantage of this path is that you do not depend on a specific hotspot plugin and yet

3

Thank you for the help ! Another question : using this method, how could I display the “correct area” on the image for student when it comes to correction ?

4

Good question, this gives a huge tchan“” in the :slightly_smiling_face: fix

Following this idea of coordinates, the trick is quite simple: you use the same x1, y1, x2, y2 to draw a rectangle over the top of the image.

The general logic goes like this:

  1. Places the image within a group of known/stable size.

  2. Creates another group above the image (a “highlight”), with semi-transparent background and border, which will represent the correct area.

  3. When on the correction screen:

    • You take the saved coordinates (x1, y1, x2, y2, normalized from 0 to 1).
    • Converts this to position and size within the image group (width, height, top, left).
    • Adjusts this group “highlight” to be exactly on top of the correct area.

In Bubble, to position this group at runtime, you can:

  • Use a plugin that moves/resizes elements dynamically, or
  • Use a small snippet of JavaScript (again with Toolbox) which, when loading the fix, calculates the position and size in pixels