Building Your Own Author API User Journey Using .navigate()

This article demonstrates how to hook into the ‘navigate’ event for custom integration.

The navigate event contains data about the intended location of the Author API instance and preventDefaultmethod that can be used to halt moving to this location. For example, you might want to prevent the adding of a Question or a Feature to an Item, and handle this in your own way:

var authorApp = LearnosityAuthor.init(initOptions, {
    readyListener: function () {

        authorApp.on("navigate", function (event) {
            var isNewWidgetLocation = event.data.route === "items/new/widgets/new" ||
                                      event.data.route === "items/:reference/widgets/new";
            if (isNewWidgetLocation) {
                myApp.addNewQuestionOrFeature();
                event.preventDefault();
            }
        });

    }
});

Code example 1: preventing the addition of Questions or Features to an Item

 

Or perhaps you'd only like to use the Author API for browsing and searching a collection of Items, but you'd like to handle the creation and editing of Items in a custom way:

var authorApp = LearnosityAuthor.init(initOptions, {
    readyListener: function () {

        authorApp.on("navigate", function (event) {
            var itemRef;
            if (event.data.route === "items/new") {
                myApp.createNewItem();
                event.preventDefault();
            }
            if (event.data.route === "items/:reference") {

                // Extract the reference from e.g. "items/example-item-ref"
                itemRef = event.data.location.replace(/^(items\/)/, "");

                myApp.openItem(itemRef);
                event.preventDefault();
            }
        });

    }
});

Code example 2: custom handling for the creation and editing of Items

 

Routes

1. List Activities

Route
activities
Location Example
'activities'
Description
Shows Activity list. 

 

2. Create new Activity 

Route
activities/new
Location Example
'activities/new'
Description
Shows Activity edit with a new Activity.

 

3. Read Activity

Route
activities/:reference
Location Example
'activities/example-reference'
Description
Shows Activity edit with the matching Activity.

 

4. Search Activities

Route
activities/search/:query
Location Example
'activities/search/' + encodeURIComponent('{"referenceOrDescription":"test"}')
Description
Shows Activity list with search query and results.

 

5. List Items

Route
items
Location Example
'items'
Description
Shows Item list.

 

6. List Items for Activity

Route
activities/:reference/searchItems
Location Example
'activities/example-reference/findItems'
Description
Shows Item list to add to an Activity.

 

7. Search Items

Route
items/search/:query
Location Example
'items/search/' + encodeURIComponent('{"reference":"test"}')
Description
Shows Item list with search query and results. Available parameters outlined in the section on search parameters on this page.

 

8. Create new Item

Route
items/new
Location Example
'items/new'
Description
Shows Item edit with a new Item.

 

9. Create new Item and Activity

Route
activities/new/items/new
Location Example
'activities/new/items/new'
Description
Shows Item edit with a new Item, on a new Activity.

 

10. Create new Item on an Activity

Route
activities/:reference/items/new
Location Example
'activities/example-reference/items/new'
Description
Shows Item edit with a new Item, on the matching Activity.

 

11. Read Item

Route
items/:reference
Location Example
'items/example-reference'
Description
Shows Item edit with the matching Item.

 

12. Read Item on an Activity

Route
activities/:reference/items/:idOrReference
Location Example
'activities/example-reference/items/example-reference-or-id'
Description

Shows Item edit with the matching Item, on the matching Activity.

Note:

If Item reference provided is for existing Item in Itembank but not in the Activity yet, Item edit view will be opened with the Item reference provided. Item will be added to Activity and Activity will be saved as a part of navigate call.

If Item reference provided is for non-existing Item in Itembank, Item edit view will be opened with the Item reference provided. Item will not be added to Activity as a part of navigate call.

 

13. Read Item definition

Route
items/:data
Location Example
'items/' + encodeURIComponent('{"item":{"reference":"example-reference-2","definition":{"widgets":[{"reference":"qwidget-ref1"}]}},"questions":[{"reference":"qwidget-ref1","widget_type":"response","data":{"stimulus":"short text","type":"shorttext"},"type":"shorttext"}]}')
Description
Shows Item edit with Item definition. The Item definition is explained in the section on Item definition on this page.

 

14. Create widget and Item

Route
items/new/widgets/new
Location Example
'items/new/widgets/new'
Description
Shows widget templates with a new widget, on a new Item.

 

15. Create widget on an Item

Route
items/:reference/widgets/new
Location Example
'items/example-reference/widgets/new'
Description
Shows widget templates with a new widget, on the matching Item (or Item definition).

 

16. Read widget on an Item

Route
items/:reference/widgets/:reference
Location Example
'items/example-reference/widgets/example-reference'
Description
Shows widget edit with the matching widget, on the matching Item (or Item definition). Note that you cannot create a new widget by specifying a non-existent UID e.g. items/:reference/widgets/a-new-widget. Doing this will cause unexpected behaviour and may cause data loss upon subsequent editing. If you want to create a new widget, use /widgets/new

 

17. Create widget on new Item with parameters

Route
items/new/widgets/new/:data
Location Example
'items/example-reference/widgets/new/' + encodeURIComponent('{"widgetType":"Match List"}')
Description
Opens a new widget configured with the given data parameters, on a new Item. Available parameters outlined in the section on widget data parameters on this page.

 

18. Create widget on an Item

Route
items/:reference/widgets/new/:data
Location Example
'items/example-reference/widgets/new/' + encodeURIComponent('{"widgetTemplate": { "template_reference": "1fa22aac-1f88-47f7-941b-3c77759549e6" }}')
Description
Opens a new widget configured with the given data parameters, on the matching Item (or Item definition). Available parameters outlined in the section on widget data parameters on this page.

 

19. Overwrite widget on an Item with parameters

Route
items/:reference/widgets/:reference/:data
Location Example
'items/example-reference/widgets/example-reference/' + encodeURIComponent('{"widgetJson": {"possible_responses": ["[Choice A]","[Choice B]","[Choice C]"],"stimulus": "Stem","stimulus_list": ["[Stem 1]","[Stem 2]","[Stem 3]"],"type": "association","validation": {"scoring_type": "exactMatch","valid_response": {"score": 1,"value": [null,null,null]}}}, "widgetTemplate": {"template_reference": "1fa22aac-1f88-47f7-941b-3c77759549e6"}}')
Description
Opens an existing widget and overrides its data with the given data parameters, on the matching Item. Available parameters outlined in the section on widget data parameters on this page.

 

20. View settings for an existing Item

Route
items/:reference/settings
Location Example
'items/example-reference/settings'
Description
Opens the settings screen for an existing Item.
Was this article helpful?

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