Items API: Inline Rendering Quick Start Guide

A quick guide to embedding the Items API (Inline Rendering Example). Please see our demos site for further examples.

<html>
    <head>
    </head>

    <body>

The following script tag must be included in the page.

It can be placed at any point within the page. Learnosity recommends the footer for optimum page load.

If you wish to specify a version, please refer to the API versioning article.

<script src="https://items.learnosity.com/?v1"></script>

Define an initOptions object to hold your Initialization options. You'll pass this object to Items API to configure its behaviour.

Some important points to note:

  • The initOptions object needs to be signed according to the Learnosity security pattern. The recommended approach is to use our SDK in your server side application to generate the the signed options packet. Download the SDK for ASP.Net, Java, Node.js, PHP, Python or Ruby and follow the examples. For full details on the security pattern that the SDK covers for you please see the Security & Authentication article.

  • Use request.rendering_type = "inline" to initialise Items API in inline mode. Inline mode retrieves content from your Learnosity Item Bank and instantiates Questions API for rendering, interaction and state management.

  • Use request.items to specify the list of item references to render. The relevant content will be retrieved from your Learnosity Item Bank, and Items API will orchestrate Questions API to embed the item content in your app.

  • Use initOptions.request.config.questions_api_init_options to override Questions API initialization options * as desired. Items API will pass them to the Questions API instance.
    * Note – you do not need to specify initOptions.request.config.questions_api_init_options.questions, since Items API will construct it for you using the item references you provide.

<script>
var initOptions = {
    "security": {
        "consumer_key": "INSERT_CONSUMER_KEY_HERE",
        "domain": "docs.learnosity.com",
        "timestamp": "20131119-2026",
        "signature": "INSERT_GENERATED_SIGNATURE_HERE"
    },
    "request": {
        "rendering_type": "inline",
        "user_id": "12345678",
        "session_id": "a472317d-9881-4200-8d3d-75342551af80",
        "type": "submit_practice",
        "activity_id": "emberDemo2013",
        "name": "Items API demo - inline activity.",
        "items": [
            "classification_1",
            "multiple_choice_1"
        ]
    }
};
</script>

Place span tags in your page to indicate where each item should be rendered. Add a data-reference attribute to each span specifying the item reference to be rendered in that position.

<span class="learnosity-item" data-reference="multiple_choice_1"></span>
<span class="learnosity-item" data-reference="classification_1"></span>

Use JavaScript to initialize Items API. The init() call must execute after <script src="https://items.learnosity.com/?v1"></script> has loaded and the initOptions are defined.

A second argument can be passed to define some API behaviour through an Callbacks object. Further details on configuration options can be found here.

    <script>
    var itemsApp = LearnosityItems.init(initOptions);
    </script>


    </body>
</html>