The following sections provide various tips and recommendations for extension programming.

Assigning Appropriate Reference Names 

When an Interaction is built in the Interaction Designer, a unique reference name is assigned to each Interaction element. These reference names are carried to the generated pages and assigned to the respective DOM elements.
In the Designer, it is possible to assign reference names that are not compatible with the syntax and conventions of HTML identifiers (e.g., reference names may include spaces). To facilitate the use of extensions, it is recommended to use reference names that comply with HTML conventions. This includes replacing spaces with hyphens, and making the entire reference name lower case.
For example, the reference name of Active Switch would be changed to active-switch. active-switch would then appear in the DOM as the data-refname attribute. When programming extensions, you would then be able to select this specific element using jQuery with this selector statement:
$(“[data-refname=‘active-switch’]”)

If you want to access the property before the DOM element is created, the reference name can be found as part of the contentSections object. The property is contained in the response of the navigation request from the server for Question elements:
interaction.page.pagecontent.contentSections[i].referenceName

The following example shows how to check for the referenceName of the first (Question) element as part of your extension:

app.registerExtension("contentSectionsRenderer", function(ctx, element) { 
var refName = ctx.contentSections[0].referenceName;
});

Note: The technique of checking the reference name in the contentSections object is currently supported for Question elements only.

Loading js and css Files Dynamically

If you need JS or CSS files from a external source (e.g., CDN), instead of  copying the files locally, you can load them dynamically using the HeadJS library used in the code. To load file or files dynamically, call the following code: 

// Load up some JS
head.load([“jQuery.js”,”bootstrap.js”], function() {
// Call a function when done
console.log("Done loading jQuery and bootstrap");
});
// Load up some CSS
head.load("bootstrap.css");

Debugging Extensions

When developing extensions, it is recommended to use browser tools for debugging both the code and the elements and styling of a page. These debugging tools are a feature of many modern browsers.
In the following example, you can see the postal code field with the respective elements in the browser’s inspection view. Note that the reference name is translated to the data-refname attribute assigned to the text input element with the <input> field inside it. This view can help you form your jQuery selector expression. 

Debugging an Extension's Code

To debug JavaScript, you need to locate the extension’s code under the interact/resources/extensions URL. Below the id and the timestamp of the code, you will find a JS file with the same name as the extension name assigned in the Admin Console. Caching is not an issue, since each time you change the extensions’s code, a new timestamp is generated. Therefore, caching is not used. 

Revision:

Comments