Adapt Learning Community: Issues going from AT to Framework

I've exported a course to finish it in the Framework, but have a few minor issues:

I've installed a component not supported by the AT and added a block to blocks.json and the component json to components.json. Everything builds fine and almost everything displays. The exception is the displayTitle fails to display for the new component. Any ideas why?

My second issue is custom CSS which is added in the AT's Project Settings. Where is the appropriate place to add this in the Framework?

Third, my AT install is using an older version of the Framework. What's the best way to update the Framework version the course is using?

And lastly, what do people do about those ids generated by the AT? Nothing or replace them with more human-readable ids like b-150, c-200 etc.?

Hi Stephen,

Have you included this line in your component's Handlebars template?
You can add custom css/less into the existing generic.less file (or any other less file) in the `src/theme/your-theme/less` folder or you can add your own less file e.g. `custom.less` in this location and it will automatically be included in the build process
Best way is to run `node upgrade` on the AT server which ensures the latest framework is used. However, if you have to do it manually the best way would be to create a new course using `adapt create course` and then copy over your `src/course` and `src/theme` folders from the downloaded course
It depends how much of an issue it is. If it's just a case of readability then you can just change them manually but that's not fun so personally I wouldn't bother. However, if you need to refer to a specific component in the less that can be tricky as ids begin with a number so `.1234` wouldn't work. I think you can work around this using a slash to escape e.g. `.\1233` but in this instance I would opt for changing the id manually

I hope that helps

Show parent | Reply

Brilliant, thanks Dan. That helps a lot!

Would you mind explaining that first fix? It seems to be the {{> component this}} that makes the difference.

Show parent | Reply

It basically ensures that the html structure and values for the component's title, body and instruction, is rendered into your component. You will see it in every individual component's template file. In more detail:

`>` is the command to inject a partial template

`component` is the name of the template i.e. the component.hbs file

`this` is the reference to the current component being rendered, ensuring that the right variables are rendered into component.hbs

Show parent | Reply

Ahh thanks, that's exactly what I wanted to know.

Show parent | Reply