Feature Types (simple)
This article describes how to load Questions API features using a simple html format. However the JSON format for features is preferred as it provides more functionality.
Introduction to Features
The Learnosity Questions API supports features, standalone utilities that are defined in the client's HTML. The client includes a feature in their HTML as follows, replacing [type] with a value from the Type column of the Feature Types table below. The feature is validated and rendered by the API upon initialisation.
Important
The attribute data-simplefeature-id is required for simple features public methods to be accessible.
Introduction to Features example
<span class="learnosity-feature" data-type="[type]"></span>Audio Player
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| 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. 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 / disable 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.
Example
More examples in the demos section.
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-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.
|
* required attribute
** responsive design with percentage height and width is not supported with vimeo videos.
Example
More examples in the demos section.
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-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. |
Important Scientific Calculator is only available in Questions API V2
Standard Calculator
Scientific Calculator
More examples in the demos section.
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-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
Protractor
Ruler - 6 inches
More examples in the demos section.
Important
Image Tool is only available in Questions API V2
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 (eg, track pad).
Attributes
| Key | Type | Default | Description |
|---|---|---|---|
| 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
Example
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.
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.
More examples in the demos section.
Important Scrollable Passage is only available in Questions API V2Scrollable 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-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
Example
Output is written to this input element:
More examples in the demos section.
Important Formula Input is only available in Questions API V2
Important Handwriting input/recognition is not available for formulainput when using the simple html feature format.
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-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>