cgkineo / adapt-ppq

A question component that requires users to correctly position one or more pins on an image

adapt-ppq

A question component that requires users to correctly position one or more pins on an image. The component has one or more targets. The user is required to place a single pin in each target.

Configuration

_minSelection (number): the minimum number of pins the user must add before being able to submit. Optional. _maxSelection (number): the maximum number of pins the user can add to the image. Optional.

_resetPinsOnPinboardChange (boolean): set to true if the image content/aspect ratio varies between the desktop and mobile pinboards. If the user completes the question on one pinboard (e.g. desktop) and later attempts to view the question on the other pinboard (e.g. mobile) a message will be displayed in place of the pinboard. This message can be configured in course.json via the _globals._components._ppq.otherDeviceCompletionMessage property. Optional.

_pinboardDesktop (object): the image to use when the component is displayed on a desktop-sized display

• src (string): path to image
• alt (string): alt text
• title (string): image title

_pinboardMobile (object): the image to use when the component is displayed on a mobile-sized display

• src (string): path to image
• alt (string): alt text
• title (string): image title

_items (array): a list of areas, in each of which the user is expected to place a single pin

• left (number): left position (x-coordinate) of area (percentage)
• top (number): top position (y-coordinate) of area (percentage)
• width (number): width of the area (percentage)
• height (number): height of the area (percentage)

Notes

In SCORM terms it is a type choice activity, though for technical reasons it must be implemented as a type performance activity. Type performance activities are not supported in the underlying SCORM API wrapper, therefore SCORM interactions tracking is not currently supported for this component.

For data persistence efficiency pin positions are rounded to 2 d.p. (pixel accuracy for up to 10000px x 10000px images) - the values are factored up to allow storage as integers (due to serializer support and better encoding efficiency)

adapt-ppq's Issues

Pin positions in Chrome

This component stores the pin positions (as percentages relative to the image) on submission and uses this data to calculate which pins are correctly placed as well as restore the user's answer. In Chrome the left position is correctly restored, but the bottom position is not. The mismatch of the bottom position of a pin is greatest if it is placed near the top of the image and least when placed near the bottom.

The component seems to work fine in Firefox and IE (tested in 9), but not Chrome. I cannot see any issue in the code so I am wondering whether someone can do some exploration of the CSS to see what, if anything, can resolve it.

Drag End: If mouse outside area, pin is false, need to recalculate to pin center bottom

showCorrectAnswer throws an error if you drop fewer pins than specified by _maxSelection

Wrong initial correct zone in desktoplayout

There's a strange behavior about the adapt-ppq developerMode.
When window loads, on desktop it shows the correct zone of mobile.
but when you resize the window, then it corrects the correct zone hint.

Breaks page with latest Authoring release

With authoring v0.4.1, including this component breaks the page. An error is thrown on attempting to access the buttonText, which does not exist.

The workaround is to specify text for the pin reset button and aria label in the authoring tool.

ppq-boundary not resizing

ppq-boundary seems to stay at a set width regardless of screenwidth

Pin icons do not reset after first attempt.

After making a first attempt, the pins do not reset. While making selections on the 2nd attempt, the pins remain as check marks and crosses in the order you placed them from the first attempt. The pins will change again to new check marks and crosses after selecting submit on the 2nd attempt.