Adapt Learning Community: Peel-back Hotspot component

I'm trying to get the rather nifty Peel-back Hotspot component working, but I'm having a few issues in the AT.

I've got it working in Framework (v2.1.2). (As an aside I've found that in your components.json you should edit the example.json provided to omit speech marks around pin positions and set "_isInfoBoxAriaOnly": false to display the items).

When I use the same assets and values in the AT, the course previews, but the page containing the component never loads. The console reports:

Uncaught The component '593e27b97c73ea8c097297ef' ('peelBackHotspot') has not been installed, and so is not available in your project.

Comparing both the framework and AT export components.json it looks to be a problem with capitalisation of the the component name. The AT produces "_component": "peelBackHotspot" when it should be peelbackhotspot. Does bower.json need to be updated?

Stephen

Does bower.json need to be updated?

Certainly looks that way. I've amended that, bumped the version - and also amended example.json following your comments above, thanks!

Show parent | Reply

Cheers Matt, all working now :-)

Show parent | Reply

One odd behaviour is that, while the component in the course built with the Framework falls-back to an accordion on mobiles, the AT-built course does not render an accordion. Any ideas why not?

Show parent | Reply

Have you used an accordion elsewhere within this course? If not I think there's something extra you need to do in the AT to make sure the accordion component is exported even when not explicitly used.

Show parent | Reply

Ahh yes, that was it. Once I explicitly added an accordion to the course it rendered correctly.

Cheers (yet again) Matt!

Show parent | Reply