Adapt Learning Community: Extension get attributes from different JSONs

Hi everybody!

How do I make an extension get attributes from different JSON files, like the Assessment extension?

In the example.json for Assessment extension it shows that you can put attributes in article.json, block.json and course.json. Which is very cool! ;)

How do I go about doing the same for my extension?

I have made an extension (called "Navicon") that appears at the bottom of every page and as such the JavaScript has these lines of code:

Adapt.on('pageView:postRender', function(view) {
if (view.model.has('_navicon')) {
new Navicon({
            model: view.model
        });
}
});

and thus the .json code it needs to function has to be added to the contentObjects.json.

Unless I have missed something the line:

Adapt.on('pageView:postRender', function(view) {

can be changed to something like:

Adapt.on('componentView:postRender', function(view) {

to make the extension appear on all components and take JSON attributes from components.json. This is in accordance with the names of the JavaScript files in the folder: src\core\js\views

But how do I make the extension listen to attributes from both contentObjects.json and course.json?

Any help will be much appreciated!

Thanks :)

Getting info from course.json is very easy, it's just:

Adapt.course.get('propertyName');

You might want to do:

Adapt.course.has('propertyName');

first just to check it exists...

For the function that you attach to handle the pageView:postRender event, view.model will be a reference to the current contentObject in contentObjects.json - so view.model.get('propertyName') will allow you to access that data.

You might have a look at adapt-pageIncompletePrompt, that reads info from both course.json and contentObjects.json - slightly different technique used there.

Show parent | Reply

Thank you Matt

That was just what I needed :D

I have some further questions about implementing extensions with attributes in the course.json.

In the templates for an extension you got Handlebars for controling the html, for instance:

{{#if imgBelowTxt}}
    <div>{{{div_text_1}}}</div>
{{else}}
    <div>{{{div_text_2}}}</div>
{{/if}}

But when using Adapt.course.get() method, the attributes from the course.json is only available in the javascript file of the extension and not the template file. Is that correct?

What if I want a .hbs template file that takes attributes from the course.json?

How is that possible?

Thank you again.

Henrik

Show parent | Reply

When you set up your Handlebars template in JavaScript you pass it the data you want it to have access to. Have a look at adapt-close for an example of one that pulls information from course.json

Show parent | Reply

Thank you again Matt

I will take a look at the adapt-close extension.

Another small thing.

In the properties.schema file I have an attribute called "img" in which the user have to select an image via the AT. It uses "inputType": "Asset:image" and it seems to be working fine. Almost...

In the same properties.schema file I'm defining two "inputType": "Asset:image". The first is set in the settings for a page by putting it inside:

"contentobject": {
  "type": "object",
  "properties": { HERE }
}

and the second is set in the course settings:

"course": {
    "type": "object",
    "properties": { HERE }
}

The two "inputType": "Asset:image" are identical as I just want to set an image for the course and for the page:

"img": {
  "type":"string",
  "title": "Button image",
  "required":false,
  "default": "",
  "inputType": "Asset:image",
  "validators": [],
  "help": "Optional image to be displayed on the button."
},

But, somehow the one that is set on the page level, is failing to load when the course in running.

I looked at the html code that the AT has inserted through the "inputType": "Asset:image" attribute for both the course level and the page level, and it turns out that the page level image's path is missing the "en" folder:

The course level path is set to: "course/en/assets/ea37ceca242f4224ef020b0bcba3f71b217cba3f.jpg", which is working just fine,

and the page level path is set to: "course/assets/ea37ceca242f4224ef020b0bcba3f71b217cba3f.jpg", which isn't working.

The image file is loaded into the assets folder of the course, even if I only use the course level attribute.

This is very difficult to explain, so I hope it make sense ;)

Am I doing something wrong here?

Thanks

Henrik

Show parent | Reply

I don't know the answer to that one, sorry... hopefully one of the Authoring Tool experts might be able to help you.

Show parent | Reply

I think there is an issue with the authoring tool output manager not writing the paths correctly for contenObjects.

I have raised a ticket for it here:

https://github.com/adaptlearning/adapt_authoring/issues/1474

Thanks
Dan

Show parent | Reply

Okay great!

Thanks Dan :)

Show parent | Reply