Simple Feature Types Developer Documentation
This article describes how to load Features using the standard HTML format. However the JSON format for Features is preferred as it provides more functionality.
Introduction to Features
The Learnosity Questions API supports Features which are standalone utilities that are defined in your HTML. You can include a Feature in your page by replacing the featuretype value in the example below with one of the data-type values in the respective tables below. The Feature is validated and rendered by the API upon initialization.
Important The attribute data-simplefeature-id is required for simple Features public methods to be accessible.
Example structure for simple Features
<span class="learnosity-feature" data-type="featuretype"></span>Audio Player
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| data-type* | string |
Must be "audioplayer".
|
|
| data-src* | string | Audio file to play. | |
| data-format | string | mp3 |
Allows specifying the audio format instead of relying on the file extension on data-src. If data-format is not defined and data-src does not have a file extension, the format is assumed to be "mp3".
|
| data-player | string | waveform |
Type of audio player to render. Possible values: waveform, button, bar, block. |
| data-waveform | string | URI of the waveform to display. | |
| data-show-download-link | boolean | false |
If this attribute is present, a link to download the source audio file will appear in the player.
Note This is only available when using the waveform player type. |
| data-volume-control | boolean | true |
Enable or disable the volume control. |
| data-no-controls | boolean | false |
Disable play control. Note Only available for Waveform and bar player types. |
| data-simplefeature-id | string | A unique ID for this simple Feature, allowing it to be accessed via the simpleFeature public methods. |
* required attribute
Important If the waveform player is chosen but no waveform URI is provided, the API will attempt to render a waveform in real time, if the browser has the required capabilities. In case it can't render it, it will render the bar player instead.
Audio Player example
<span class="learnosity-feature" data-type="audioplayer" data-src="audio-source.mp3" data-waveform="http://assets.learnosity.com/demos/docs/waveform.png"></span>Video Player
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| data-type* | string |
Must be "videoplayer".
|
|
| data-src* | string | Video file to play. This must be a MP4 file (H.264/MPEG-4 is the only supported video format, this is the most commonly used and supported video format), a Youtube or Vimeo link. | |
| data-poster | string | An image will be displayed before the video starts to play. | |
| data-width | string | 480px |
Width of the video in pixels or percentage **. |
| data-height | string | 270px |
Height of the video in pixels or percentage **. |
| data-simplefeature-id | string | A unique ID for this simple Feature, allowing it to be accessed via the simpleFeature public methods. | |
| data-crossorigin | string | "anonymous" |
Defines the crossorigin attribute for the video player. Values must be either "use-credentials", "anonymous" or "no-cors". To remove the attribute, "no-cors" must be used. Not setting a value, or setting an invalid value will result in "anonymous" for backwards compatibility.
|
| data-text_alternative.caption.src | string | A link to your hosted video's caption file. You can upload a VTT file. | |
| data-allow_retries | boolean | Specifies whether to allow retries when loading video. |
* required attribute
** responsive design with percentage height and width is not supported with Vimeo videos.
Video Player example
<span class="learnosity-feature" data-type="videoplayer" data-src="http://www.youtube.com/watch?feature=player_detailpage&v=flL7M36QszA"></span>
Calculator
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| data-type* | string |
Must be "calculator".
|
|
| data-mode | string | basic |
Mode of calculator to render. Values: basic, scientific
|
| data-unit | string | radian |
Unit of angular measuring that calculator renders by default, it can be toggled via calculator UI. Values: radian, degree
|
| data-simplefeature-id | string | A unique ID for this simple Feature, allowing it to be accessed via the simpleFeature public methods. |
Calculator example
// Standard
<span class="learnosity-feature" data-type="calculator"></span>
// Example Feature - Scientific
<span class="learnosity-feature" data-type="calculator" data-mode="scientific"></span>Image Tool
The Image Tool supports a protractor, ruler (15 cm, 30 cm, 6 inch, 12 inch) or a custom defined image. The image can be rotated and dragged around within its parent container.
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| data-type* | string |
Must be "imagetool".
|
|
| data-image* | string | undefined |
A string that supports a protractor, ruler-15-cm, ruler-30-cm, ruler-6-inches, ruler-12-inches or a URI to an image. |
| data-rotate | boolean | true |
Renders a rotate icon that is draggable and allows the image rotate. |
| data-width | string | auto |
Width of the image in pixels. Can only be used with custom URI image. |
| data-height | string | auto |
Height of the image in pixels. Can only be used with custom URI image. |
| data-button | boolean | false |
Renders a toggle button to show/hide the image tool. |
| data-simplefeature-id | string | A unique id for this simple Feature, allowing it to be accessed via the simpleFeature public methods. |
* required attribute
Image Tool example
// Protractor
<span class="learnosity-feature" data-type="imagetool" data-image="protractor"></span>
// Example Feature - 6 Inch Ruler
<span class="learnosity-feature" data-type="imagetool" data-image="ruler-6-inches"></span>Scrollable Passage
The Scrollable Passage will always render a customised scroll bar inside its container where applicable. It solves the inconsistency across browsers and devices with or without accessories such as a track pad, for example.
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| data-type* | string |
Must be "scrollablepassage".
|
|
| data-width | string | 100% |
Width of the scrollable passage container. |
| data-height | string | 300px |
Height of the scrollable passage container. |
| data-border | boolean | false |
Whether to display a wrapper around the scrollable passage container. |
| data-simplefeature-id | string | A unique id for this simple Feature, allowing it to be accessed via the simpleFeature public methods. |
* required attribute
Scrollable Passage example
<div class="learnosity-feature" data-type="scrollablepassage" data-border="true">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.</p>
<p>Vivamus sed tellus quis orci dignissim scelerisque nec vitae est. Duis et elit ipsum. Aliquam pharetra auctor felis tempus tempor. Vivamus turpis dui, sollicitudin eget rhoncus in, luctus vel felis. Curabitur ultricies dictum justo at luctus. Nullam et quam et massa eleifend sollicitudin. Nulla mauris purus, sagittis id egestas eu, pellentesque et mi. Donec bibendum cursus nisi eget consequat. Nunc sit amet commodo metus. Integer consectetur lacus ac libero adipiscing ut tristique est viverra. Maecenas quam nibh, molestie nec pretium interdum, porta vitae magna. Maecenas at ligula eget neque imperdiet faucibus malesuada sed ipsum. Nulla auctor ligula sed nisl adipiscing vulputate. Curabitur ut ligula sed velit pharetra fringilla. Cras eu luctus est. Aliquam ac urna dui, eu rhoncus nibh. Nam id leo nisi, vel viverra nunc. Duis egestas pellentesque lectus, a placerat dolor egestas in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae ipsum non est iaculis suscipit.</p>
</div>Formula Input
Powerful editor which allows users to input math in LaTeX format.
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| data-type* | string |
Must be "formulainput".
|
|
| data-value | string | undefined |
Initial value to display on render. LaTeX math. |
| data-input | string | undefined |
CSS selector targeting input element to update with LaTeX math. |
| data-simplefeature-id | string | A unique id for this simple Feature, allowing it to be accessed via the simpleFeature public methods. |
* required attribute
Formula Input example
<span class="learnosity-feature" data-type="formulainput" data-input="input#latex" data-value="xyz"></span>
<input id="latex">Pop-up content
Pop-up content supports both image and text. It can also be configured to display image-only or text-only
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| data-type* | string |
Must be "popup".
|
|
| data-display_text | string | The text in the stimulus that when clicked, opens the Pop-up content. This attribute must be provided. | |
| data-content | string | The text that is displayed inside the Pop-up area. | |
| data-image_url | string | URL of the image to display in the Pop-up. | |
| data-image_alt | string | Alternate text to display when the specified image is not loaded | |
| data-simplefeature_id | string |
A unique id for this simple Feature, allowing it to be accessed via the simpleFeature public methods.
This attribute must be unique when displaying multiple pop ups. |
* required attribute
Pop-up content example
<span
class="learnosity-feature"
data-type="popup"
data-display_text="Text in stimulus to click"
data-content="Lorem ipsum dolor sit amet."
data-image_url="www.imageurl.com"
data-image_alt="Alternate text"
>
</span>