Adapt Learning Community: New components

Super cool components!

Show parent | Reply

very nice additions, will force our team to move to FW5 very soon now.

Show parent | Reply

Love these! Thank you so much for sharing!

Show parent | Reply

Awesome!!

Show parent | Reply

Absolutely awesome. Thanks for sharing.

Show parent | Reply

Love these, thanks for sharing!

Show parent | Reply

These look great - thanks!

Show parent | Reply

Hi Ignacio,

We really love these new plug-ins and have recently installed the Cards, Vertical Items, Counters, and Link Items.

We really like the 7th option (horizontal card with a picture on the far left or right) you have done with the cards and would like to know how you set this up. We also aren't sure how to get 3 cards side by side.

Any help you can provide would be greatly appreciated.

Currently we’re on:

Authoring tool version 0.10.5
Framework version 5.18.1

Thanks!

Sherri

Show parent | Reply

Hi Sherri, thank you I appreciate it.

By default, all these components have minimal css styling.
I prefer to modify the appearance from the theme.

The 7th option has 'list' class on the cards component.
You can add this to your custom theme or on your Authoring Tool from project settings >Custom CSS/LESS code

.cards{ &.list{ .cards__item-container{ flex-direction: row; align-items: center; } .cards__item-body{ margin-right: 2rem; } .cards__item__image{ min-width: 180px; padding: .5rem; } .cards__item.row-reverse{ .cards__item-container{ flex-direction: row-reverse; } .cards__item-body{ margin-right: 0; margin-left: 2rem; } } @media (max-width: @device-width-small) { .cards__item-container,.cards__item.row-reverse .cards__item-container{ flex-direction: column; } .cards__item-body{ margin-left: 0.5rem; margin-right: 0.5rem; } } } }

And then in the classes of one of the items add: row-reverse

To get 3 cards side by side you can use the property Columns.

I hope this helps!

Show parent | Reply

Yes! This worked so well, I have another question. We are using the counters, but only have 2. Is it possible to have them centred on th screen instead of both on the left?

Show parent | Reply

Hi Sherri, you can add a css class to the counters component for example: counters-games.

And then in your theme / Custom CSS/LESS code:

.counters{ &.counters-games{ .counters__widget { @media (min-width: @device-width-large) { grid-template-columns: repeat(2, 1fr); } } } }

Show parent | Reply

Hi Ignacio, loving your work on these components!

Just wondered if you have a guide to how to set up the 'Adapt notify links'. Basically, we have a course which is very academic and has references throughout, and we think this extension would be perfect for this use.

Thanks in advance!

Show parent | Reply

Hi Mark, thanks.

- Add the adapt-notifyLinks extension to the adapt project
- Go to the project settings and check is enabled.
- Then, use a <a> tag with class 'notify-link' and use an adapt model id as href attribute, like this:
<a class="notify-link" href="#63efcfbf12a2cc56007f1cf5">Open an adapt model in a notify popup</a>.

Hope this helps.

Show parent | Reply

Hi Ignacio,

Thanks for the reply. Will give it a go and will be in touch if I have any other questions.

Show parent | Reply

Hi Ignacio,

I followed your steps but I'm only getting an empty notify popup...
Do I have to configure the component for the popup in a special way
or can I just copy a block oder component ID?

best,
Martin

Show parent | Reply

Hi Martin,

Without looking at Ignacio's extension my guess is the content is within javascript or within the link like the example below. I personally try to use the javascript method but thought I would share the a tag inline version too. I will let him respond more to the functionality of his extension but perhaps this helps to lead you in the right direction. I also have a component version that works similar but might not be as flexible as his extension version.

EXAMPLE BELOW

<a href="#" onclick='require("coreJS/adapt").trigger("notify:popup",{title:"Notify Title Text",body:"Notify message"});return false;'>Click here to show a Notify popup!</a>

Show parent | Reply

Please stop using coreJS/adapt (very old) and use core/js/adapt (much newer) instead to line up with the proper file paths.

Show parent | Reply

Here is what the javascript version looks like...

"_notifyOnComplete": {

"_isEnabled": true,
"title": "COURSE COMPLETE",
"body": "Well done! You have completed the course and may now close this window."

}

Show parent | Reply

Hi Mike,

thanks for sharing your idea and your component!
In this case, unfortunately, it will not help me.
I have a course that had to contain a lot of videos.
My idea was to create a kind of link overview and with those links it opens a video/media component as a notiy popup...

Show parent | Reply

Hi Martin, I just updated the notifyLinks extension.

Could you give it another try?

Show parent | Reply

Hey Ignacio, it works perfect now, thanks! Made my day!
This is such a powerfull component, like adapt-linkItems which works also now!

Show parent | Reply

Hi Ignacio,

We're using the Vertical Items component, and wondered if there was a way to alter the 'percentage in view' within the viewport for the animations?

Many thanks in advance.
Mark

Show parent | Reply

https://github.com/nachocinalli/adapt-verticalItems/blob/master/js/VerticalItemsView.js#L23-L32

Not without changing the code, the inview even is reasonably brutal, the onscreen event has more detail.

See
https://github.com/cgkineo/adapt-graphicLottie/blob/master/js/LottieView.js#L32-L42

Show parent | Reply

Thanks for the reply.

Sorry, I'm not a coder by trade. Would you suggest I swap the code between the 2 examples and import my own version of the plugin?

Show parent | Reply

I just updated the component and added the _onScreenPercentInviewVertical property.

I switched to the onscreen event (thanks, Ollie).

Mark, can you test this and see if it works for you?

Show parent | Reply

No worries

Show parent | Reply

Hi Ignacio,

This is perfect, thank you so much for implementing this and for the great new components!

Show parent | Reply