Adapt Learning Community: MCQ with Code Blocks

I am interested in using the multi-choice question with code blocks plugin that is available here:

https://github.com/CollierCZ/adapt-cmcq

I am currently using the AT rather than framework. I'm familiar with the prism.js library that this is based on, and have used that in the past.

The author of the plugin indicates that to get the plugin to work, you need to install the prism javascript code in "src/core/js/libraries" and the that you need to rename the css file as "prism.less" and place it in "src/core/less".

I'm trying to get this working with the AT, and assumed that you could simply change the code code to point to different directories - but I haven't managed to get this working.

Any suggestions on how this could be adapted to work with the AT?

Each plugin has a libraries folder. Just make one at the root of the adapt-mcq plugin and put the prism file in there. The less can also be placed in the less file in the plugin.

See adapt-contrib-media with uses a library call mejs.

https://github.com/adaptlearning/adapt-contrib-media

This code:

https://github.com/CollierCZ/adapt-cmcq/blob/80877a001ae871412a6706278eda7d8f4eaf8167/js/adapt-cmcq.js#L1-L5

Needs to be:

define([ 'core/js/adapt', 'components/adapt-contrib-mcq/js/adapt-contrib-mcq', 'libraries/prism' ], function(Adapt, Mcq) {

As all plugin libraries folders are combined into build/libraries at compile time and then they're imported from there by the brower at runtime.

This line:
https://github.com/CollierCZ/adapt-cmcq/blob/80877a001ae871412a6706278eda7d8f4eaf8167/less/cmcq.less#L1C1-L1C36

Is unnecessary, all less files in less folders are imported automatically, no need for import directives.

Show parent | Reply

Awesome, thanks. You are a legend.

I will give that a go and see if I can get it to work.

Show parent | Reply

The less can also be placed in the less FOLDER in the plugin, not file. Typing too quickly.

Show parent | Reply

OK, making some progress - thanks for the suggestions, Oliver.

Progress in the sense that I am getting different errors!

Command failed: npx grunt server-build:prod --outputdir=courses\65ea7bed859feb0758daca31\6604974c0ff55147fcdf751e\build --theme=65ea7c75859feb0758daca4c --menu=adapt-contrib-boxMenu
Plugin folder name 65ea7c75859feb0758daca4c does not match package name adapt-contrib-vanilla.
Plugin folder name 65ea7c75859feb0758daca4c does not match package name adapt-contrib-vanilla.
NameError: variable @body-text-font-size is undefined in src/components/adapt-cmcq/less/cmcq.less on line 20, column 24:
19 .cmcq-item-inner {
20 font-size: @body-text-font-size;
21 text-align: left;

Fatal error: NameError: variable @body-text-font-size is undefined in src/components/adapt-cmcq/less/cmcq.less on line 20, column 24:
19 .cmcq-item-inner {
20 font-size: @body-text-font-size;
21 text-align: left;

I am guessing that the folder name not matching the plugin name is more of a warning than an error, and that the issue here is that the plugin is using styles that are no longer defined as variables in the vanilla theme? I'm assuming the simplest solution here is to go through the vanilla theme and look for variables that are defined and use those instead?

Show parent | Reply

Exactly as you said it.

Show parent | Reply