{"id":20037814,"url":"https://github.com/openedx/xblock-image-explorer","last_synced_at":"2025-10-11T12:08:10.154Z","repository":{"id":14843253,"uuid":"17566237","full_name":"openedx/xblock-image-explorer","owner":"openedx","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-29T11:26:52.000Z","size":1477,"stargazers_count":9,"open_issues_count":6,"forks_count":42,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-10-05T21:13:05.916Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openedx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2014-03-09T14:40:29.000Z","updated_at":"2025-09-29T11:26:54.000Z","dependencies_parsed_at":"2023-11-07T02:12:12.951Z","dependency_job_id":"f387485c-79d6-423c-9ff6-b5ecc8f74201","html_url":"https://github.com/openedx/xblock-image-explorer","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"purl":"pkg:github/openedx/xblock-image-explorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Fxblock-image-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Fxblock-image-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Fxblock-image-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Fxblock-image-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openedx","download_url":"https://codeload.github.com/openedx/xblock-image-explorer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Fxblock-image-explorer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007131,"owners_count":26084246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T10:22:40.047Z","updated_at":"2025-10-11T12:08:10.113Z","avatar_url":"https://github.com/openedx.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"Image Explorer XBlock\n=====================\n\n[![GitHub CI](https://github.com/openedx/xblock-image-explorer/actions/workflows/ci.yml/badge.svg)](https://github.com/openedx/xblock-image-explorer/actions/workflows/ci.yml)\n\nThis package provides the Image Explorer XBlock that allows you to\nuse an image with hotspots in a course. When the student clicks a\nhotspot icon, tooltip containing custom content is displayed.\n\nScreenshot below shows the Image Explorer XBlock rendered inside the\nedX LMS with an activated tooltip containing and embedded YouTube video.\n\n![Student view](https://raw.githubusercontent.com/openedx/xblock-image-explorer/3b67392a73edcd606f4e3fb30cfa8b3cc20720d3/doc/img/student-view.png)\n\nInstallation\n------------\n\nInstall the requirements into the python virtual environment of your\n`edx-platform` installation.\n\n```bash\n$ pip install -r requirements.txt\n```\n\nEnabling in Studio\n------------------\n\nYou can enable the Image Explorer XBlock in studio through the\nadvanced settings.\n\n1. From the main page of a specific course, navigate to `Settings -\u003e\n   Advanced Settings` from the top menu.\n2. Check for the `advanced_modules` policy key, and add\n   `\"image-explorer\"` to the policy value list.\n3. Click the \"Save changes\" button.\n\nTesting\n-------\n\nMake sure you have firefox and geckodriver installed and added to your `PATH`,\nthen, follow these instructions:\n\n1. Create a virtualenv and enable it.\n\n2. Install tox with `pip install tox`\n\n3. Run `tox` to run all tests.\n\nYou can also run separate test environments like this:\n```\ntox -e unit  # Run only unit tests\ntox -e integration  # Integration tests\ntox -e quality  # pylint\n```\n\nUsage\n-----\n\nWhen you add the `Image Explorer` component to a course in the studio,\nthe block is field with default content, shown in the screenshot below.\n\n![Edit view](https://raw.githubusercontent.com/openedx/xblock-image-explorer/3b67392a73edcd606f4e3fb30cfa8b3cc20720d3/doc/img/edit-view.png)\n\nThe basic structure of the `image_explorer` XBlock looks like this:\n\n```xml\n\u003cimage_explorer schema_version=\"1\"\u003e\n  \u003cbackground src=\"http://link/to/image.jpg\" /\u003e\n  \u003cdescription\u003e...custom HTML content...\u003c/description\u003e\n  \u003chotspots\u003e\n    \u003chotspot x=\"370\" y=\"20\"\u003e\n      \u003cfeedback width=\"300\" height=\"300\"\u003e\n        \u003cheader\u003e...custom HTML content...\u003c/header\u003e\n        \u003cbody\u003e...custom HTML content...\u003c/body\u003e\n        \u003cyoutube video_id=\"dmoZXcuozFQ\" width=\"400\" height=\"300\" /\u003e\n      \u003c/feedback\u003e\n    \u003c/hotspot\u003e\n    \u003chotspot\u003e...\u003c/hotspot\u003e\n    ...\n    \u003chotspot\u003e...\u003c/hotspot\u003e\n  \u003c/hotspots\u003e\n\u003c/image_explorer\u003e\n```\n\nThe `schema_version` attribute of the `\u003cimage_explorer\u003e` wrapper\nelement should be set to `1`. It currently isn't used but will provide\nhelp for easier schema migrations if the XML schema changes in future\nversions.\n\nThe `\u003cimage_explorer\u003e` element should contain the following child\nelements:\n\n* `\u003cbackground\u003e` (required)\n* `\u003cdescription\u003e` (optional)\n* `\u003chotspots\u003e` (required)\n\n### The background element\n\nThe `src` attribute of the `\u003cbackground\u003e` element defines the image\nover which the hotspots are placed.\n\n### The description element\n\nThe optional `\u003cdescription\u003e` element can contain arbitrary HTML\ncontent that is rendered above the image.\n\n### The hotspots element\n\nThe `\u003chotspots\u003e` element wraps an arbitrary number of child\n`\u003chotspot\u003e` elements. These define the position of the hotspots on the\nbackground image and the content of the tooltips.\n\nThe supported attributes of `\u003chotspot\u003e` elements are `x` and `y` (both\nrequired) that specify the position of the hotspot on the background\nimage, `item-id` which can be set to a unique string used to\nidentify the hotspot in the emitted events and optional `side` attribute\nthat allows to override hotspot's popup position. If `side` attribute is\nmissing or set to anything except `left` and `right` automatic positioning\nis used.\n\nEach `\u003chotspot\u003e` element must contain the `\u003cfeedback\u003e` child\nelement. The `\u003cfeedback\u003e` element supports `width`, `height` and `max-height`\nattributes (all optional) that specify the dimensions of the tooltip\nelement. The default width is `300px` and if no height is specified, the\nmax-height is set to `500px`. So the content will be sized dynamically with a\nvertical scrollbar for the overflow.\n\nThe `\u003cfeedback\u003e` element can contain the following child elements:\n\n* `\u003cheader\u003e`\n* `\u003cbody\u003e`\n* `\u003cyoutube\u003e`\n\n#### The header element\n\nIf present, the `\u003cheader\u003e` specifies the tooltip header. It may\ncontain arbitrary HTML content.\n\n#### The body element\n\nThe `\u003cbody\u003e` element can contain arbitrary HTML content that is\nrendered in the tooltip.\n\n#### The youtube element\n\nThe `\u003cyoutube\u003e` element offers a convenient way of placing an embedded\nYouTube video into a tooltip. The required attributes are `video_id`,\n`width`, and `height`.\n\n#### The Ooyala element\n\nThe `\u003cooyala\u003e` element offers a convenient way of placing an embedded\nOoyala video into a tooltip. The required attributes are `video_id`,\n`width`, and `height`.\n\n#### The Brightcove element\n\nThe `\u003cbrightcove\u003e` element offers a convenient way of placing an embedded\nBrightcove video into a tooltip. The required attributes are `video_id`,\n`account_id`, `width`, and `height`.\ne.g;\n```\n\u003cbrightcove video_id=\"6110618169001\" account_id=\"6057949416001\" width=\"320px\" height=\"180px\" /\u003e\n```\n\nAPI for native mobile frontends\n-------------------------------\n**Retrieve fixed data for all Image Explorer XBlocks in a course:**\n```\nGET https://\u003clms_server_url\u003e/api/courses/v1/blocks/?course_id=\u003ccourse_id\u003e\u0026username=\u003cusername\u003e\u0026depth=all\u0026requested_fields=student_view_data\n```\n\nExample image explorer return value:\n```\n\"student_view_data\": {\n    \"hotspots\": [\n        {\n            \"item_id\": \"hotspotA\",\n            \"x\": \"370\",\n            \"feedback\": {\n                \"body\": \"\u003cul\u003e\u003cli\u003eOnce there was a police car up here\u003c/li\u003e\u003cli\u003eAlso there was a Fire Truck put up there\u003c/li\u003e\u003c/ul\u003e\",\n                \"width\": \"300\",\n                \"youtube\": null,\n                \"max_height\": null,\n                \"height\": \"240\",\n                \"header\": \"\u003cp\u003eThis is where many pranks take place. Below are some of the highlights:\u003c/p\u003e\",\n                \"type\": \"text\",\n                \"side\": \"auto\"\n            },\n            \"y\": \"20\"\n        },\n        {\n            \"item_id\": \"hotspotB\",\n            \"x\": \"250\",\n            \"feedback\": {\n                \"body\": null,\n                \"width\": \"440\",\n                \"youtube\": {\n                    \"width\": \"400\",\n                    \"video_id\": \"dmoZXcuozFQ\",\n                    \"id\": \"youtube-f6c7d27d30834097bb1b17af1074e98c\",\n                    \"height\": \"300\"\n                },\n                \"max_height\": null,\n                \"height\": \"400\",\n                \"header\": \"\u003cp\u003eWatch the Red Line subway go around the dome\u003c/p\u003e\",\n                \"type\": \"youtube\",\n                \"side\": \"auto\"\n            },\n            \"y\": \"70\"\n        }\n    ],\n    \"description\": \"\u003cp\u003eEnjoy using the Image Explorer. Click around the MIT Dome and see what you find!\u003c/p\u003e\",\n    \"background\": {\n        \"src\": \"//upload.wikimedia.org/wikipedia/commons/thumb/a/ac/MIT_Dome_night1_Edit.jpg/800px-MIT_Dome_night1_Edit.jpg\",\n        \"height\": null,\n        \"width\": null\n    }\n},\n```\n\nLicense\n-------\n\nThe Image Explorer XBlock is available under the GNU Affero General\nPublic License (AGPLv3).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenedx%2Fxblock-image-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenedx%2Fxblock-image-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenedx%2Fxblock-image-explorer/lists"}