adaptlearning / adapt-contrib-hotgraphic Goto Github PK

Completion should be persisted when a user leaves a page and comes back later.

This already has mobile body text but should also have mobile instruction text

• Similar to this issue
  adaptlearning/adapt-contrib-narrative#5

When running JAWS: If I tab to a hot pin there is no indication I am on a pin or that I should open it.

Each pin should have its own alt text to instruct users.

• _ prefix on settings attributes please

I created a new course from the master branch and change the "_useGraphicsAsPins" to true, please find attached image to see result:

This should be based upon _isResetOnRevisit

• If set to true - presentation components should reset themselves
• State and model attributes should be reset
• To test this out please change this in the adaptModel.js
• Should be done on the develop branch

Add assetFields property

Update properties.schema attributes to match model attributes (_items, _graphic, etc.)

This is missing a default height, which is causing some display issues on themes which don't define this.

Also, it would be good if the pin or tile mode was added to the hotgraphic-component markup.

E.g. co-05 'Key Facts'

When the popup is opened I can cycle around the buttons/elements and then tab off onto the component below ('Key benefits of a vertical scrolling approach') before it then jumps to the address bar and then back to 'Key Facts'.

@kirsty-hames

Need to add border to item body

I'm proposing the following enhancements in order to facilitate a more flexible hotgraphic:

• Support for hiding pagination. This has been requested by several end users, as currently once the first pin is activate it's possible to page completely through the remaining items.
• Changes to allow more specific styling of pins and the currently selected item. This is just a matter of more specific classes on the markup.

tabbing issues selecting hot graphic items - no indication that item is selected.

pop-up tabbing focus issue - tabbing focus should stay on popup until exited instead moves onto next item leaving pop-up unable to close.

• Because of the way the classnames are descriptive you shouldn't need to nest the selectors so much
  • This example is done beautifully
    https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/less/accordion.less

To allow using custom graphics as pins via the _useGraphicsAsPins property. Added to master in this PR #81

Similar to the media element, this should take 'inview' as a possible option to allow completion when the hotgraphic is used. Raised because hotgraphic, e.g. for infographic type images, shrinking to a narrative on mobile can cause problems with completion.

suggest adding:

preRender: function () {
this.listenTo(Adapt, 'device:changed', this.reRender, this);
_.each(this.model.get('_items'), function(item) {
item._isVisited = false;
});
},

Scenario: There is hot graphic component with 3 items to view.

When using hot graphic component in landscape orientation, and switching to portrait orientation to complete some of the items. Results in items that were viewed in portrait not being marked as complete when switching back to landscape orientation.

Steps to reproduce - use landscape orientation:

1. Click on the first item - close pop up - now item will be marked as complete
2. Switch orientation (hot graphic component is changed to slider)
3. Now click on '+' for other two items
4. Go back to landscape orientation
5. The other two items you just viewed in portrait orientation are not marked as complete.

• title and body for the popup items

When we load the the hotgraphic(narrative) on small devices it doesn't remove the hotgraphic div please see attached photos:

1- Loaded on large and then resized to small:(Works as expected)

2- Loaded on small devices(Not working as expected)

Resize should fire after item is removed from the DOM on switch to narrative

From @shauncg on June 20, 2014 12:22

When the first hotspot in the component is selected, JAWS automatically begins reading the text for the pop-up (which is good). However, when it reaches the start of the second paragraph (specifically, at the point where it should say "in addition") it says what sounds like "In add-di-di dialogue dun- button" and halts.

JAWS reads this same text with the same error when the second hotspot is opened, rather than reading the text associated with the second hotspot.

Copied from original issue: adaptlearning/adapt_framework#409

see adaptlearning/adapt-contrib-narrative#93

From @kirsty-hames on May 30, 2014 9:57

• tabbing issues selecting hot graphic items - no indication that item is selected.
• pop-up tabbing focus issue - tabbing focus should stay on popup until exited instead moves onto next item leaving pop-up unable to close.

Copied from original issue: adaptlearning/adapt_framework#367

• should be medium not small

• Add component-title-inner etc

as a feature request: could someone add the possibility to add a hotspot, without placing a pin on top of it.

this way I could use a maingraphic that already has areas on it and instruct the learners to click the areas, in stead of clicking the pins.

This is to help the authoring tool determine layout styles for this component

Any global options should be added to properties.schema.

https://adaptlearning.atlassian.net/browse/ABU-1000

I've recently put in a request for the narrative to have a field in the json for mobile instruction and one for desktop/tablet (adaptlearning/adapt-contrib-narrative#100). Would it be possible to do a similar thing with the hotgraphic, seens as these two components are so closely linked? I know there is a mobile body field but personally, I don't tend to use that as that implies body text would need to change as well.

I've typically found that it's only ever the instruction that needs to change (because the way the component works changes based on which device you're looking at it on), and the initial text of the component wouldn't need to change as it's just setting the scene for the contents of the component (nothing specific to the device it's being viewed on) .

there are two display texts set up for this hot graphic - the user can swipe between them as expected - however, with the first one (eg 1/2) if the user presses anywhere on the pop up, it switches to 2/2 - however, this doesnt happen on 2/2 - it only changes to 1/2 if you swipe

at the moment some clients are complaining that they can click on the second item on a hotgraphic and use the pagination and miss the first option which then means they don't complete the component.

Popup images are not centrally aligned.

The hotgraphic had a fix applied to a month or so ago:

1f55ad8

Could this be merged into 'master' as it's an enhancement to the templates?

I just noticed its still not in the beta version of the framework that's all.

• adaptlearning/adapt-contrib-graphic#26

The left arrow shouldn't display when on the first item and similarly the right arrow should be hidden on the last item.

When viewed on a mobile device, the Hot-graphic component should be replaced with a Narrative component. This is not currently implemented.