Picture of Ignacio Cinalli
New components
by Ignacio Cinalli - Wednesday, 8 December 2021, 8:59 PM
 

Hi, I would like to share some new Adapt components.

You can view them in action here.

All components are available on my github profile.

Thanks to all the adaptlearning community for their support.

Picture of Steve Cole
Re: New components
by Steve Cole - Wednesday, 8 December 2021, 11:11 PM
 

Super cool components! 

Picture of John Niezen
Re: New components
by John Niezen - Thursday, 9 December 2021, 7:26 AM
 

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

Picture of Marissa Preciado
Re: New components
by Marissa Preciado - Thursday, 9 December 2021, 2:55 PM
 

Love these! Thank you so much for sharing!

Picture of Chris Gillison
Re: New components
by Chris Gillison - Thursday, 9 December 2021, 4:07 PM
 

Awesome!!

Picture of Oliver Foster
Re: New components
by Oliver Foster - Monday, 13 December 2021, 8:07 AM
 

Absolutely awesome. Thanks for sharing.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Wednesday, 15 December 2021, 7:25 AM
 

Love these, thanks for sharing!

Picture of Jason Wilson
Re: New components
by Jason Wilson - Wednesday, 15 December 2021, 10:42 PM
 

These look great - thanks!

Picture of Sherri Fricker
Re: New components
by Sherri Fricker - Thursday, 6 January 2022, 11:28 PM
 

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

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Friday, 7 January 2022, 6:00 PM
 

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!

Picture of Sherri Fricker
Re: New components
by Sherri Fricker - Wednesday, 12 January 2022, 10:15 PM
 

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?

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Thursday, 13 January 2022, 1:06 PM
 

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);
            }
        }
    }
}

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Wednesday, 15 February 2023, 10:14 AM
 

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!

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Friday, 17 February 2023, 7:20 PM
 

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.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Monday, 20 February 2023, 2:56 PM
 

Hi Ignacio,

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

Picture of Martin Kout
Re: New components
by Martin Kout - Tuesday, 6 June 2023, 12:21 PM
 

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

Picture of Mike Stevens
Re: New components
by Mike Stevens - Tuesday, 6 June 2023, 1:18 PM
 

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>

Picture of Oliver Foster
Re: New components
by Oliver Foster - Tuesday, 6 June 2023, 2:42 PM
 

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

Picture of Mike Stevens
Re: New components
by Mike Stevens - Tuesday, 6 June 2023, 1:30 PM
 

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."

}

Picture of Martin Kout
Re: New components
by Martin Kout - Tuesday, 6 June 2023, 1:51 PM
 

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...

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Tuesday, 6 June 2023, 5:45 PM
 

Hi Martin, I just updated the notifyLinks extension.

Could you give it another try?

Picture of Martin Kout
Re: New components
by Martin Kout - Tuesday, 6 June 2023, 8:38 PM
 

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

Picture of Martin Kout
Re: New components
by Martin Kout - Thursday, 14 September 2023, 2:17 PM
 

I would like to pick up this topic again...
The plugin adapt-notifyLinks works very well.
But it is only possible to link to an ID of a block or a component, correct?

The disadvantage is, as soon as we copy or export/import the course, the ID's are regenerated. This has the disadvantage that you have to re-link all the buttons / layers. Is there an alternative to this?
For example, that a layer gets a class "Layer_01", to which you can then always fix reference?

best,
Martin

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Friday, 15 September 2023, 12:16 AM
 

Hello Martin, it's possible that we can have something like this in the properties of the blocks and components.

I'll let you know when it's updated in the GitHub repository so you can test it.

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Friday, 15 September 2023, 1:15 PM
 

Martin, the adapt-notifyLinks extension has already been modified so that you can test it.

These same changes were implemented similarly in the adapt-routerLinks extension.

I hope it works for you.

Picture of Martin Kout
Re: New components
by Martin Kout - Friday, 15 September 2023, 3:38 PM
 

Hey Ignacio, it works great.
It makes this component much more user friendly.
The same thing with the extension adapt-routerLinks.
Thanks for your work!

Have a nice weekend,
Martin

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Thursday, 9 March 2023, 2:48 PM
 

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

Picture of Oliver Foster
Re: New components
by Oliver Foster - Thursday, 9 March 2023, 3:26 PM
Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Friday, 10 March 2023, 7:24 AM
 

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?

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Friday, 10 March 2023, 12:41 PM
 

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?

Picture of Oliver Foster
Re: New components
by Oliver Foster - Friday, 10 March 2023, 2:41 PM
 

No worries 

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Monday, 13 March 2023, 11:07 AM
 

Hi Ignacio,

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

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Tuesday, 1 August 2023, 10:26 AM
 

Hi Ignacio - loving the new Drag and Drop Multiple component!

Just had a quick query - I'm trying to reduce the depth of the '.dnd-multiple__dropitem' area due to it being a little large on mobile devices but don't seem able to do so using the CSS. Do you have any tips? I've reduce the padding of the '.dnd-multiple__dragitem' but it doesn't seem to have any affects on the background/component depth.

Thanks in advance!

Mark

 

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Tuesday, 1 August 2023, 6:21 PM
 

Hi Mark,
Glad to hear you're enjoying the new drag and drop multiple component!
It depends on the framework version you are using, but it could be something like this:
.dnd-multiple {
  &__dragitem {
    padding: 0.25rem;
    @media (min-width: @device-width-medium) {
      padding: 1rem;
    }    
  }
  &__dropitem {
    padding: 0.25rem;
    @media (min-width: @device-width-medium) {
      padding:1rem;
    }
  }
}

Adjust the measurements in the css media query as needed (device-width-medium or device-width-small) and the different values in the padding as well.

Hope it works for you.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Wednesday, 2 August 2023, 12:26 PM
 

Thanks Ignacio - I'm using the Authoring Tool.

I've tried the CSS above but it doesn't appear to be helping. FYI, my course looks like the following:

 

Thanks again.


Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Wednesday, 2 August 2023, 1:21 PM
 

It seems that there is some CSS style in your Adapt theme that is affecting the drag component.
You should see something like this:

Could you try it using the vanilla theme and not applying any custom styles? From your screenshot, it appears that there might be a minimum height set for the component__widget.

Would it be possible for you to share a public link to the course?
Alternatively, if you can share it with me, I can take a look and see what's going on.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Friday, 4 August 2023, 9:44 AM
 

Hi - apologies for the late response.

I've set up a preview link below. I've tried taking out the CSS and theme styling but still having an issue with reducing the background box height once the padding has been reduced on the labels.

https://eggu.co.uk/preview/drag-and-drop-test/#/id/64ccc0d12029633d7e79f7e7

Many thanks once again.

Mark

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Friday, 4 August 2023, 11:17 AM
 

Mark, there's a problem with the component that sets a minimum height for the columns (it takes the number of options and multiplies it by 4). For now, you can solve it from the theme by doing something like this:
.dnd-multiple__dropitem {
     min-height: calc(3rem * 12)!important;
}
I'll probably make changes to this in the component repository to handle it differently.

Thanks for trying it out.

Picture of Marissa Preciado
Re: New components
by Marissa Preciado - Monday, 7 August 2023, 7:27 PM
 

Hi Ignacio, Is there any way to have the choose component have multiple blanks rather than just one? 

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Monday, 7 August 2023, 9:10 PM
 

Marissa,

I'm afraid not, the 'choose' component only allows for one space or one choice per item.

Picture of Steve Cole
Re: New components
by Steve Cole - Wednesday, 23 August 2023, 8:40 AM
 

Hi Ignacio,

I really like your Trialogue component!

Is there a timeframe for that to be useable in the authoring tool?

Thanks

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Wednesday, 23 August 2023, 3:17 PM
 

Hi Steve, I've updated the Trialogue component so you can use it in AAT.

Can you please try again?

Picture of Steve Cole
Re: New components
by Steve Cole - Wednesday, 23 August 2023, 4:36 PM
 

Wonderful, thank you! So quickly!

I've tried it in the AT and yes, it works.

I'm on holiday for a week, but will try building something real with it when I return.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Monday, 8 January 2024, 3:28 PM
 

Hi Ignacio.

Happy New Year! Big fan of your components, keeps Adapt fresh and relevant. Just looking at the Blurring component and wondered when you would be releasing this on GitHub (currently just a readme file for download).

Many thanks in advance!

Mark

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Monday, 8 January 2024, 6:15 PM
 

Hi Mark, Happy New Year to you too and thanks for your kind words.
I'm glad you're using the Adapt plugins.

I have just updated the adapt-blurring GitHub repository.
You can see the configuration in the project settings.

You'll need to add the 'blurring' CSS class, for example, in my demo.

Let me know if it works for you.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Thursday, 11 January 2024, 2:39 PM
 

Thanks Ignacio, will give it a spin and see how I get on.

All the best
Mark

Picture of Marissa Preciado
Re: New components
by Marissa Preciado - Wednesday, 24 January 2024, 7:32 PM
 

Hi Ignacio,

Any timeframe for the swiperSlider being released? 

Thank you for all that you do!

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Thursday, 25 January 2024, 5:18 PM
 

Hi Marissa,

I just updated the repo, so you can try it out.

Picture of Paul M.
Re: New components
by Paul M. - Monday, 29 January 2024, 8:20 PM
 

Hi Ignacio,

i`ve tried the "cards"-thing, but it only shows transparent cards, not the nice ones, you have on your example-site. 

 

thx for all your awesome components!

Picture of Kristoffer Broberg
The grid menu
by Kristoffer Broberg - Tuesday, 9 April 2024, 9:34 AM
 

Hi!

Excellent components. Thanks for sharing! I noticed the rep for the grid menu is empty. Are you updating it?

Picture of Ignacio Cinalli
Re: The grid menu
by Ignacio Cinalli - Tuesday, 9 April 2024, 4:54 PM
 

Hi Kristoffer,
I just updated the repo, and I added an example of menu customization using Less/CSS that you can adapt according to your needs.

 

Picture of Kristoffer Broberg
Re: The grid menu
by Kristoffer Broberg - Friday, 12 April 2024, 6:59 AM
 

Excellent! I'm going to try it out. Have a good one!

Picture of Kristoffer Broberg
Re: The grid menu
by Kristoffer Broberg - Thursday, 25 April 2024, 1:14 PM
 

Hi again,

So I'm about to explore the gridmenu but I can't get it to work. I've created one page with some dummy content and uploaded an image to the page's graphic. All get is an blank page (and the loader looks different, funny enough). I can preview the same course using the native box menu without problem.

Node 16.20.2

Framework 5.37.9

Latest version of the authoring tool.

 

Would you rather have me post this as an issue in the github repo?

Picture of Ignacio Cinalli
Re: The grid menu
by Ignacio Cinalli - Thursday, 25 April 2024, 2:30 PM
 

Hi Kris, It should work without any problems in fw 5.37.9

Feel free to open an issue in the GitHub project.

It would be helpful if you could show me a screenshot of the browser console while previewing.

Picture of Kristoffer Broberg
Re: The grid menu
by Kristoffer Broberg - Friday, 26 April 2024, 9:27 AM
 

I've opened an issue in the repo.

Picture of Marissa Preciado
Re: New components
by Marissa Preciado - Friday, 19 April 2024, 3:34 PM
 

Hi Ignacio,

I'd love to try out the GSAP animations extensions! Looks super cool!

Thanks for all that you do!

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Friday, 26 April 2024, 7:13 PM
 

Hi Marissa, thanks!
I just uploaded some new examples using GSAP.

In my github are the plugins:

adapt-layers


adapt-lenisSmoothScrolling


adapt-GSAP

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Wednesday, 16 October 2024, 10:13 AM
 

Hi Ignacio - loving the continued new components as always, great work!

Just wanted to trial the 'Graphic Compare' but having issues getting it to show up, just has an empty space where the component should be.

Thanks
Mark

 

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Wednesday, 16 October 2024, 11:32 AM
 

Hi Mark, thanks.
Could it be that the component wasn't imported correctly into your Adapt authoring tool?
Could you try uninstalling it and reinstalling it?
What version of the framework and the authoring tool are you using?

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Wednesday, 16 October 2024, 11:50 AM
 

Hi Ignacio,

Weirdly, the component worked a while ago when initially tested but had stopped so I just installed the 1.2 version but it still doesn't show.

We're currently using framework 5.35.0 if that helps?

Thanks again.

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Wednesday, 16 October 2024, 11:57 AM
 

Ok, create a new course with just that component and then use the Export source option in the authoring tool to share the zip file with me so I can review it.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Wednesday, 16 October 2024, 2:17 PM
 

Thanks Ignacio, much appreciated. File attached.

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Wednesday, 16 October 2024, 2:18 PM
 

Mark, for some reason I don't know, the component didn't import correctly into your AAT. As seen in this zip, the 'templates' folder is missing inside adapt-graphicCompare. Like I mentioned before, you could try uninstalling the component and reinstalling it. If that doesn't fix it and you have access to the AAT, you can look for the adapt-graphicCompare folder and manually add the template.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Wednesday, 16 October 2024, 6:30 PM
 

Thank you Ignacio, I'll give that a go - glad it was something straight forward and apologies for bothering you!