Label parts of an image with text

Submitted by rfarlow on Tue, 10/23/2018 - 18:50
Forums: 
Feature requests

I would like my students to be able to label different parts of an image with entered text. For example, I would like to upload a picture of various intersecting shapes and lines (see attached) and have the students enter in the measurement of the angles I want them to determine (i.e. Angles 1-6 in the attached image). Perhaps H5P can call this "hotspot labelling"?

Attachments: 
Image icon Find The Angles.PNG
0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
BV52's picture

BV52

Wed, 10/24/2018 - 03:59

Hi rfarlow,

Thanks a lot for contributing your ideas on how to make H5P better! We’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful.

In the meantime you can use Course Presentation with the image as a background and Fill in the Blanks as the space for the answer. I'm not sure though how to insert the "degree" sign.

-BV52

betht

Sun, 04/16/2023 - 17:30

Hi BV52, 

I am trying to use course presenation with the image as a background and Fill in the Blank for the space for the label but don't seem to be able to fill in multiple locations.  Have you been able to do this?  Any tips?  

Thanks. 

Betht

specialboys76

Sun, 04/19/2026 - 22:22

It's been 8 years but it's finally here:
https://github.com/HessamAyoubi/H5P-Label-the-Image

otacke's picture

otacke

Mon, 05/04/2026 - 20:13

Good job! But somebody beat you by a couple of weeks, see: https://www.olivertacke.de/labs/2026/02/26/h5p-hamburg-community-event-premiere-h5p-checklist-and-h5p-labelexercise/

What I noticed:

  • It is not recommended to put all dependencies into one github repository. There is no need to put H5PEditor.ImageCoordinateSelector-1.2 or H5PEditor.VerticalTabs-1.3 in there.
  • RangeList is not part of the editor dependencies, so the overall feedback section won't render in the editor and you'll note a crash in the console.
  • upgrades.js is not required as you don't upgrade anything.
  • Your .en.json language file is invalid, does not match semantics.json.
  • Your icon does not meet the common H5P icon size.
  • Your content type is not responsive and content overflows on smaller displays.
  • Your CSS is working with plenty of px values where I'd not have expected them. Accounts to the responsiveness issues.
  • Your code is violating the H5P coding style guide.
  • It's not recommended to use jQuery as it will be removed from H5P core at some point.
  • There are a couple of WCAG issues which prevent your content type from being accessible, e.g. lost focus after resizing and thus closing a popup, dialog element does not trap focus, etc.)

You may find some more hints at https://snordian.de/2023/04/29/how-to-review-h5p-content-types/