Warning Warning! This is a lower-level API. Lower-level APIs are not recommended for most projects, and may not be available on all plans. See our page on recommended deployment patterns for more information.

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.

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.

<span class="learnosity-feature" data-type="[type]"></span>

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.

<span class="learnosity-feature" data-type="audioplayer" data-src="audio-source.mp3" data-waveform="http://assets.learnosity.com/demos/docs/waveform.png"></span>

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.

* required attribute

** responsive design with percentage height and width is not supported with vimeo videos.

Example

More examples in the demos section.

<span class="learnosity-feature" data-type="videoplayer" data-src="http://www.youtube.com/watch?feature=player_detailpage&amp;v=flL7M36QszA"></span>

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.

   // Standard
   <span class="learnosity-feature" data-type="calculator"></span>

   // Example Feature - Scientific
   <span class="learnosity-feature" data-type="calculator" data-mode="scientific"></span>

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

   // 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>

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 V2
<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>

Passage provides a simple way to define a block of html for reuse.
You will need to use the standard JSON feature format to take advantage of the usefulness of this feature.

Attributes

Key Type Default Description
data-content * string undefined Html content for passage.
data-simplefeature-id string A unique id for this simple feature, allowing it to be accessed via the simpleFeature public methods.

Example


Important Passage is only available in Questions API V2
<div class="learnosity-feature" data-type="sharedpassage" data-border="true" data-content="<p>Vivamus sed tellus quis orci dignissim scelerisque nec vitae est.</p>"></div>

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.
    <span class="learnosity-feature" data-type="formulainput" data-input="input#latex" data-value="xyz"></span>
<input id="latex">