Skip to content

Commit

Permalink
Merge pull request #43 from deltanet/fw-v4
Browse files Browse the repository at this point in the history 
Framework v4 updates
  • Loading branch information
@dancgray
dancgray authored Aug 29, 2019
2 parents 2b2c459 + 242fdc6 commit f36e4ee
Show file tree
Hide file tree
Showing 10 changed files with 607 additions and 750 deletions.
32 changes: 18 additions & 14 deletions README.md
100755 → 100644
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,67 @@
# adapt-hotgrid-audio

**Hotgrid** is a *presentation component* which displays a set of images in a grid layout.
**Hotgrid Audio** is a *presentation component* which displays a set of images in a grid layout.

When a learner selects an image, a pop-up is displayed that consists of text with an image.

## Settings Overview

The attributes listed below are used in *components.json* to configure **Hotgrid**, and are properly formatted as JSON in [*example.json*](https://github.com/deltanet/adapt-hotgrid-audio/blob/master/example.json).
The attributes listed below are used in *components.json* to configure **Hotgrid Audio**, and are properly formatted as JSON in [*example.json*](https://github.com/deltanet/adapt-hotgrid-audio/blob/master/example.json).

### Attributes

[**core model attributes**](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes): These are inherited by every Adapt component. [Read more](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes).

**_component** (string): This value must be: `hotgrid`. (One word.)
**_component** (string): This value must be: `hotgrid-audio`. (One word.)

**_classes** (string): CSS class name to be applied to **Hotgrid**’s containing `div`. The class must be predefined in one of the Less files. Separate multiple classes with a space.
**_classes** (string): CSS class name to be applied to **Hotgrid Audio**’s containing `div`. The class must be predefined in one of the Less files. Separate multiple classes with a space.

**_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.

**instruction** (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.

**_canCycleThroughPagination** (boolean): Enables the pop-ups to be cycled through endlessly using either the previous or next icon. When set to `true`, clicking "next" on the final stage will display the very first stage. When set to `false`, the final stage will display only a "previous" icon. The default is `false`.

**_columns** (number): This value determines the number of columns within the grid. Any number of columns can be set however keep in mind the more columns there are the smaller the items will be.

**_canCycleThroughPagination** (boolean): If set to 'true', learner can cycle through items.

**_showItemBorders** (boolean): If set to 'true', a border around the items will be shown.

**_showItemTitleBackground** (boolean): If set to 'true', the item titles will have a background colour applied to them.

Hotgrid has a dynamic layout system. If you have 5 items but set the columns to 3, hotgrid will put 3 items in the first row and 2 on the second. The second row then will be automatically centred. This works with any amount of items and columns - ie that last row will always be centred for you.
**Hotgrid Audio** has a dynamic layout system. If you have 5 items but set the columns to 3, 3 items will be put in the first row and 2 on the second. The second row then will be automatically centered. This works with any amount of items and columns - ie that last row will always be centred for you.

**_items** (string): Multiple items may be created. Each item represents one grid item for this component and contains values for **title**, **body**, **_graphic** and **_itemGraphic**.
**_items** (string): Multiple items may be created. Each item represents one grid item for this component and contains values for **title**, **body**, **_graphic**, **_itemGraphic** and **_audio**.

>**title** (string): This is the title text for a grid item pop-up.
>**body** (string): This is the main text for a grid item pop-up.
>**_graphic** (string): This is the image that displays for each grid item. This graphic requires three state **src** values, with additional values **alt** and **title**.
>>**src** (string): File name (including path) of the image. Path should be relative to the *src* folder (e.g., *course/en/images/c-15.png*). Three src values are set to display default, hover and visitred states - **src** (default), **srcHover** and **srcVisited**.
>>**src** (string): File name (including path) of the image. Path should be relative to the *src* folder (e.g., *course/en/images/c-15.png*). Three src values are set to display: default, hover and visited states - **src** (default), **srcHover** and **srcVisited** - note that if you are handling the hover and visited states via CSS you don't need to set **srcHover** and **srcVisited**
>>**alt** (string): This text becomes the image’s `alt` attribute.
>>**title** (string): This is optional text which is displayed under the grid item image.
>**_itemGraphic** (string): This is the image for a grid item pop-up. This also contains values **src** and **alt**.
>**_itemGraphic** (string): This is the image for a grid item pop-up. This also contains values **src** and **alt**.
>**_audio** (object): This `_audio` attributes group stores the audio properties for the item. It contains values for **src**.
>>**src** (string): File name (including path) of the audio for the item. Path should be relative to the *src* folder.
### Accessibility
**Hotgrid** has a label assigned using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) attribute: **ariaRegion**. These labels are not visible elements. They are utilized by assistive technology such as screen readers. This label is included within the *example.json* and will need adding to the _globals in *course.json*.
**Hotgrid Audio** has a label assigned using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) attribute: **ariaRegion**. These labels are not visible elements. They are utilized by assistive technology such as screen readers. This label is included within the *example.json* and may need to be added to the _globals in *course.json*.

## Limitations

Hotgrid automatically switches to 2 columns in small and medium device mode for the best user experience.

----------------------------
**Version number:** 2.2.4
**Framework versions:** 2.0
**Version number:** 3.0.0
**Framework versions:** 4+
**Author / maintainer:**
**Accessibility support:** WAI AA
**RTL support:** yes
**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), IE 11, IE10, IE9, IE8, IE Mobile 11, Safari for iPhone (iOS 7+8), Safari for iPad (iOS 7+8), Safari 8, Opera
**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 11+12 for macOS+iOS, Opera
**Authoring tool support:** yes
4 changes: 2 additions & 2 deletions bower.json
100755 → 100644
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "adapt-hotgrid-audio",
"version": "2.2.4",
"framework": "^2.0.4",
"version": "3.0.0",
"framework": ">=4",
"homepage": "https://github.com/deltanet/adapt-hotgrid-audio",
"displayName": "Hotgrid Audio",
"component": "hotgrid-audio",
Expand Down
56 changes: 31 additions & 25 deletions example.json
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
"instruction":"",
"close":"Close",
"_columns":3,
"_showItemBorders": true,
"_showItemTitleBackground": false,
"_canCycleThroughPagination": true,
"_items": [
Expand All @@ -22,17 +21,17 @@
"bodyReduced": "Reduced text 1",
"_graphic": {
"src": "course/en/images/c-05-1.png",
"srcHover":"course/en/images/c-05-1-hover.png",
"srcVisited":"course/en/images/c-05-1-visited.png",
"srcHover": "",
"srcVisited": "",
"alt": "alt text here test",
"title": "Item Title 1"
},
"_itemGraphic": {
"_itemGraphic": {
"src": "course/en/images/c-05-1.png",
"alt": "alt text"
},
"_audio": {
"src": "course/en/audio/***.mp3"
"src": ""
}
},
{
Expand All @@ -42,17 +41,17 @@
"bodyReduced": "Reduced text 2",
"_graphic": {
"src": "course/en/images/c-05-2.png",
"srcHover":"course/en/images/c-05-2-hover.png",
"srcVisited":"course/en/images/c-05-2-visited.png",
"srcHover": "",
"srcVisited": "",
"alt": "",
"title": "Item Title 2"
},
"_itemGraphic": {
"_itemGraphic": {
"src": "course/en/images/c-05-2.png",
"alt": "alt text"
},
"_audio": {
"src": "course/en/audio/***.mp3"
"src": ""
}
},
{
Expand All @@ -62,57 +61,64 @@
"bodyReduced": "Reduced text 3",
"_graphic": {
"src": "course/en/images/c-05-3.png",
"srcHover":"course/en/images/c-05-3-hover.png",
"srcVisited":"course/en/images/c-05-3-visited.png",
"srcHover": "",
"srcVisited": "",
"alt": "",
"title": "Item Title 3"
},
"_itemGraphic": {
"_itemGraphic": {
"src": "course/en/images/c-05-3.png",
"alt": "alt text"
},
"_audio": {
"src": ""
}
},
{
"title": "Grid Item 4",
"body": "This is display text 1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.",
"_graphic": {
"src": "course/en/images/c-05-4.png",
"srcHover":"course/en/images/c-05-4-hover.png",
"srcVisited":"course/en/images/c-05-4-visited.png",
"srcHover": "",
"srcVisited": "",
"alt": "",
"title": "Item Title 4"
},
"_itemGraphic": {
"_itemGraphic": {
"src": "course/en/images/c-05-4.png",
"alt": "alt text"
},
"_audio": {
"src": "course/en/audio/***.mp3"
"src": ""
}
},
{
"title": "Grid Item 5",
"body": "This is display text 1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.",
"_graphic": {
"src": "course/en/images/c-05-5.png",
"srcHover":"course/en/images/c-05-5-hover.png",
"srcVisited":"course/en/images/c-05-5-visited.png",
"srcHover": "",
"srcVisited": "",
"alt": "",
"title": "Item Title 5"
},
"_itemGraphic": {
"_itemGraphic": {
"src": "course/en/images/c-05-5.png",
"alt": "alt text"
},
"_audio": {
"src": "course/en/audio/***.mp3"
"src": ""
}
}
]
],
"_pageLevelProgress": {
"_isEnabled": true
}
}

// Accessibility supported courses require ARIA instruction - apply to _globals in course.json
// Accessibility supported courses require ARIA instruction - apply to _globals in course.json

"_hotgrid": {
"ariaRegion": "This component contains selectable grid items. Select an item to trigger a popup that includes an image with display text. Select the close button to close the popup."
}
"_hotgrid": {
"ariaRegion": "Selectable image component. Select each item to show more information.",
"popupPagination": "{{itemNumber}} / {{totalItems}}"
}
Loading

0 comments on commit f36e4ee

Please sign in to comment.