Adapt Learning Community: Unable to export course

I'm trying to export my course from the Adapt authoring tool (I'm running latest versions of AAT and FW). I keep getting the following, something about an undefined colour.

Could someone please explain:

How this colour is undefined
How I can fix it or come up with a workaround in order to export course

Debug:

Command failed: grunt server-build:prod --outputdir=courses/5d3b60f6aa03d12ad7ba36d8/5de3f33be34cf56e78f4f6fa/build --theme=5d3b614faa03d12ad7ba36f3 --menu=adapt-contrib-boxMenu

Fatal error: {
"message": "variable @primary-color-inverted is undefined",
"type": "Name",
"filename": "src/components/adapt-flipper/less/flipper.less",
"index": 1084,
"line": 52,
"column": 14,
"callLine": null,
"extract": [
"\t\twidth: 100%;",
"\t\tbackground: @primary-color-inverted;",
"\t\t-webkit-box-shadow: 0 10px 15px rgba(0,0,0,0.5);"
]
}

Hi Sam, try to add the variable @primary-color-inverted in the additional CSS/LESS box in Project Settings.

@primary-color-inverted: #cccccc;

Show parent | Reply

Thanks for the tip!

Show parent | Reply

I'm running v0.10.0 AT, v0.5.4AF. I'm getting a string of these errors. I add a color setting for one component, try to export again, and another error shows up. The vanilla theme is applied, and I can see that these color values are all set there. What is the actual fix? Are these plugins simply useable in the AT? Would love more information about why this is happening and how to actually troubleshoot.

Command failed: grunt server-build:prod --outputdir=courses/5ebc1dbb7268623938f00056/5ebd1f239d6ed208d7c6c966/build --theme=5ebc20e06ab31b39cd1c8661 --menu=adapt-contrib-boxMenu

Fatal error: {
"message": "variable @inverted-background-color is undefined",
"type": "Name",
"filename": "src/components/adapt-contrib-reveal/less/reveal.less",
"index": 3860,
"line": 214,
"column": 22,
"callLine": null,
"extract": [
" z-index: 500;",
" background-color: @inverted-background-color;",
" color: @inverted-foreground-color;"
]
}

Command failed: grunt server-build:prod --outputdir=courses/5ebc1dbb7268623938f00056/5ebdde71b01d04326c5527e3/build --theme=5ebc20e06ab31b39cd1c8661 --menu=adapt-contrib-boxMenu

Fatal error: {
"message": "variable @button-color is undefined",
"type": "Name",
"filename": "src/components/adapt-before-and-after/less/beforeafter.less",
"index": 488,
"line": 32,
"column": 15,
"callLine": null,
"extract": [
" margin-left: -2px;",
" background: @button-color;",
" cursor: ew-resize;"
]
}

Command failed: grunt server-build:prod --outputdir=courses/5ebc1dbb7268623938f00056/5ebd1f239d6ed208d7c6c966/build --theme=5ebc20e06ab31b39cd1c8661 --menu=adapt-contrib-boxMenu

Fatal error: {
"message": "variable @inverted-foreground-color is undefined",
"type": "Name",
"filename": "src/components/adapt-contrib-reveal/less/reveal.less",
"index": 3899,
"line": 215,
"column": 11,
"callLine": null,
"extract": [
" background-color: @inverted-background-color;",
" color: @inverted-foreground-color;",
" border:@item-border;"
]
}

Command failed: grunt server-build:prod --outputdir=courses/5ebc1dbb7268623938f00056/5ebd1f239d6ed208d7c6c966/build --theme=5ebc20e06ab31b39cd1c8661 --menu=adapt-contrib-boxMenu

Fatal error: {
"message": "variable @item-border is undefined",
"type": "Name",
"filename": "src/components/adapt-contrib-reveal/less/reveal.less",
"index": 3938,
"line": 216,
"column": 11,
"callLine": null,
"extract": [
" color: @inverted-foreground-color;",
" border:@item-border;",
"}"
]
}

Show parent | Reply

Hi Amy, the description is there already, in those mentioned files you are missing the declaration for those colours. You need to go to the Less folder of those components and add the required variables.

Show parent | Reply

Hi Amy

The adapt-contrib-reveal plugin doesn't look like it has been updated for FW v5.x compatibility, you'll need to log a ticket asking the plugin owner to update it (or try doing it yourself)

Same goes for adapt-before-and-after, log a ticket for that here.

boxmenu has been updated for v5, you'll just need to update to the latest version.

Alternatively you can switch back to the v4 branch of the Framework.

Unfortunately there's no easy way of the AAT to be able to identify a plugin as 'not being FW5 compatible'. The easiest way to check is to look in bower.json, if it doesn't have "framework": ">=5" then it's probably not compatible.

There will be the odd one that doesn't need to have >=5 as minimum requirement - typically anything that's pure JavaScript and doesn't reference any styles or DOM elements (e.g. https://github.com/cgkineo/adapt-keepScrollPosition) but that's pretty rare.

Show parent | Reply

Thanks Matt, That's really helpful. I'll communicate this to my client and see what we can come up with.

Show parent | Reply