Adapt Learning Community: css issue with custom component

Skip to main content

Hi,

I tried to extend the adapt-contrib-mcq component (no additional functionality and css yet; just a clone):

define([ "coreJS/adapt", "components/adapt-contrib-mcq/js/adapt-contrib-mcq"], function(Adapt, Mcq) {
    var Amcq = Mcq.extend({

   });

   Adapt.register('amcq', Amcq);
    return Amcq;
});

The new component behave like the standard mcq-component, but the css seems to be broken (to the right I added a standard mcq-component for comparison):

http://picpaste.com/screenshot1-7meRal5m.png

Where is my mistake?

Thanks in advance,

Tom

Tom,

Is it possible that you forgot to rename your component Less to use "amcq" (amcq.less)? Your component should include a less folder and in it a file named amcq.less. Also check inside the file because any classes that use "mcq" will need to be changed over to "amcq".

Chuck

Show parent | Reply

Chuck,

I renamed all files accordingly: component/js/adapt-acmq.js, ~/less/amcq.less and templates/amcq.hbs.

I have also tried to copy the content of the original mcq files into my amcq files, with the same result.

It's strange, but when I add some custom tags and css to acmq.hbs and acmq.less, respectively, they will be displayed correctly.

A check with firebug has shown, that all tags and css-classes are rendered correctly, but for any reason the css-classes within <div class="mcq-widget component-widget"> are completely irgnored, while the css-classes beyond are not.

All in all it's very confusing for me...

Tom

Show parent | Reply

Tom,

Because you reported that the component was working properly except for the styling, I assumed that you had simply overlooked updating the component name in the Less file. It needs to be done everywhere.

<div class="mcq-widget component-widget"> appears in your templates/amcq.hbs You need to replace all instances of "mcq" with "amcq" otherwise the classes in Less will not match the classes in the template.

At this point you should also sweep through the js/amcq.js to ensure that all class selectors are referencing your new amcq classes and not the old mcq classes.

When you are done, your amcq plug-in directories will have no reference to "mcq"--they will have been replaced with "amcq".

Cheers!

Show parent | Reply

Tom,

thank you very much, your hints solved my css-problem.

Unfortunately, a new problem emerged: I need to initiate an external js-object (an audioplayer). I thought, this should be done insite the postRender-function. But as soon as I insert the postRender-function, the "submit-" and "show feedback-" buttons are not rendered anymore. All the rest of the amcq-component (radiobuttons with answers, title etc.) seems to be still ok. I also get the "test" output in the console, if the initPlayer-function is not commented out, but not the two buttons. Is postRender not the right place to initiate objects?

My script looks like this:

define([ "coreJS/adapt", "components/adapt-contrib-mcq/js/adapt-contrib-mcq"], function(Adapt, Mcq) {

   var Amcq = Mcq.extend({

       events: {
            'focus .amcq-item input':'onItemFocus',
            'blur .amcq-item input':'onItemBlur',
            'change .amcq-item input':'onItemSelected',
            'keyup .amcq-item input':'onKeyPress'
        },

        postRender: function() {
           this.setReadyStatus();
            //this.initPlayer();   // deaktivated during testing
        },

        initPlayer: function() {
           console.log('test');
        }

   }, {
       template: 'amcq'
   });

Adapt.register('amcq', Amcq);

return Amcq;

});

Thanks in advance,

Tom

Show parent | Reply

Hi Tom

By including postRender in your code you are 'overriding' the one in questionView.js.

You need to 'extend' it instead by calling the superclass' implementation of this function.

Sadly neither the version of JavaScript we are obliged to use (for supporting older browsers) nor Backbone itself truly support this sort of thing which means you have to use the following rather ugly bit of code*:

QuestionView.prototype.postRender.apply(this, arguments);

You can replace the line this.setReadyStatus() with the above since it will now handle that for you.

* as opposed to the far tidier super.postRender() which is the sort of thing that more up-to-date programming languages would use - and which is indeed available in the new version of JavaScript, ES6: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

Show parent | Reply

Hi Matt,

maybe I missunderstood your instruction (my programming skills are only moderate), but

postRender: function(){
QuestionView.prototype.postRender.apply(this, arguments);
}

disrupt page rendering completely with a "ReferenceError: QuestionView is not defined".

Tom

Show parent | Reply

Nope, my fault - forgot to mention you need to add a reference to 'coreViews/questionView' to your define() in the same you have for MCQ and Adapt - so it should look like this:

define([ "coreJS/adapt", "coreViews/questionView", "components/adapt-contrib-mcq/js/adapt-contrib-mcq"], function(Adapt, QuestionView, Mcq)

Show parent | Reply

no, you were almost right (I also tested this solution without success), but instead of:

var Amcq = Mcq.extend({

       [...]

        postRender: function() {
            QuestionView.prototype.postRender.apply(this, arguments);

            this.myInitFunction();
        }

it has to be :

postRender: function() {
Mcq.prototype.postRender.apply(this, arguments);

this.myInitFunction();
}

Now, my new component (multiple choice with audio) is running like a charm (Of course, I have to test it thoroughly now) : )

Many thanks for your help!

Cheers!

Show parent | Reply

Matt,

you are right, of course! I didn't try "coreViews/questionView" but "core/js/view/questionView", and this caused the error.

I guess, my solution is working, because it is a special case: I extended adapt-contrib-mcq, which in turn extends questionView.

I think, your approach is far better than mine.

Tom

Show parent | Reply

Yes, I'm not quite sure why the path has to be different for references to core code...

I had a feeling the way you did it might work but I didn't have any opportunity to check for sure - rather than lead you astray I thought it best to suggest the method I knew would work.

Glad it's all working now

Show parent | Reply

Shortened paths such as "coreViews" get set in the framework's config.js. I'm guessing it's done for the developer's convenience, maintainability, reduced code...those types of things.

Show parent | Reply

"Shortened paths such as "coreViews" get set in the framework's config.js"

Didn't know that, thanks!

Show parent | Reply

I'm guessing that was the original intention.. But remapping the core files has actually had the opposite impact. Fewer people have been able to grasp an already complicated situation and I'd certainly like to propose, here and now, whilst I remember, the removal of this abominal impediment to our progress... Wow, I really struggle with words... At least in v3

Show parent | Reply

oo-wee! Christmas must have come early because I'm not used to seeing "abominable" until Rudolph and his Snow Monster hit the TV!

Show parent | Reply

I'd agree with that. By doing things in a non-standard manner we're actually making life harder for people, even if they're already familiar with the tech we're using.

Show parent | Reply