Simple feature types

Simple Feature Types Home

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.

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>

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>

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.

* 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&amp;v=flL7M36QszA"></span>
                

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>

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>

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>

Passage provides a simple way to define a block of HTML for reuse.

Attributes

Key Type Default Description
data-type* string Must be "sharedpassage".
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.

Passage example

<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-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">
Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.