Adapt Learning Community: Bulky Content - Hot Text Component?

Skip to main content

I'm trying to work out if i can't see the forest because of the tree's or if i'm actually wanting something which hasn't been done yet.

Converting a very text heavy module from my older framework and they had a popup of sorts for the 'Author Bios'. Quite a lot of text in there and i've been trying to work out a good way to do it. Opinions wanted.

Approach #1 (current one i'm on) - Drop the speaker bio's into a block-slider and then have that at the start of the module. Not sure i like it, isn't condusive to the 'learning experience'... ideally it should be content you can trigger to see but stays hidden. Right now it becomes insanely big if you're on a mobile screen....

Approach #2 - A text component with overlays like the hotgraphic component features. Does this exist? If not i could call it 'hot-text' and have the popup overlays appear using either custom tags e.g. data-overlay='id-of-overlay-to-show'...

Approach #3 - create a 'contentObject' which seperates the author bios away from the learning content ... while i like this, i don't think the stakeholders will like it...

I like #2 but i don't want to jump into making it if its already here somewhere ;)

Hi Kevin

Couple of questions:

- is there any way you could chop the actual text down?

- How often would your users see these bios? Would they need to jump back to them then jump back into the learning content?

- Does the text need to have an associated image?

Also, have you thought about having the full bios in a separate contentObject, as you've said, but having mini-bios within the learning content as a reminder? You can always signpost users to the longer bios if needs be.

Show parent | Reply

Hey Nicola,

To answer the questions for you :

- is there any way you could chop the actual text down?

For this particular excercise, no, being that i'm trying to sell Adapts awesomeness internally so they'll update the old module format to this, i have to use old module content which has been signed off already. Its Pharma based, so they setup review boards to check this stuff and getting them to do so for this would become a bit of a road block in moving forward. Ideally though in the future i'd probably steer the content away from being so verbose (450 words)

- How often would your users see these bios? Would they need to jump back to them then jump back into the learning content?

In the original module, the first page has 3 hot links to 3 bios you can select ( 'More information and dlsclosures') next to each persons name, and position. So its an 'opt in' viewing experience. Within the old system, it was page/slide based, so clicking on that link could simply show you an overlay page with a close button you could send away.

- Does the text need to have an associated image?

Yes a small thumbnail image of their face.

"Also, have you thought about having the full bios in a separate contentObject, as you've said, but having mini-bios within the learning content as a reminder? You can always signpost users to the longer bios if needs be."

Yeah thats a compromise also i guess, it might not be a travesty to separate it out... i torn though, in this effort to replicate the same content in as close as possible format as possible i think there is going to be a need for me to travel down my APPROACH 2 method eventually anyway.

I had a library called 'popupManager' which would hook into links, images and hotspot zones and reveal overlay content. I think i'm going to need to probably step into component creation much sooner than i expected :)

To your knowledge do you know of a component which meets my needs to date?

https://github.com/adaptlearning/adapt-contrib-triggered - might be useful but i'm not sure revealing a 400 word text block line would be a good idea... perhaps looking at hotgraphics overlay system is better...

Show parent | Reply

https://github.com/LearningPool/adapt-contrib-reveal

Also looks quite good potentially? I think maybe you were thinking about this one -(Q2)

Show parent | Reply

Hmm it wasn't what i thought exactly... not intended for hug amounts of text BUT it did have the building blocks i could harvest i think.

Show parent | Reply

Hi Kevin,

The Reveal component we developed which you mentioned might do what you're looking for. It's only a two-step hide-then-reveal type component, but can be used to alternate a combination of two images and/or text. It might work for you.

Regards,

Brian

Show parent | Reply

Yeah, i think i have a use for this in a different part of the module :) but not for this one. I think i'll play some more with this though afterwards. Cheers!

Show parent | Reply

Hey Kevin,

Not sure if this will help but Adapt has some internal modules you can use like Notify to achieve something similar.

https://github.com/adaptlearning/adapt_framework/wiki/Core-modules#notify

You'll need to build a plugin around it - but I'll be releasing a plugin either this week or next that adds a button to a block that can be clicked on and a popup is revealed using notify.

Thanks,

Daryl

Show parent | Reply

Ahhh i think i need to read the core modules part of the wiki more closely then. Thanks.

Just before i read this i'd decided to go and try my hand at a component. I was going to call it 'callout' since i had no better name for it for now. If i describe it here you can tell me if i'm going to duplicate effort or if its different enough to keep going.

adapt-contrib-callout

Extends the text component and adds in configuration to target class names e.g. callout-trigger1, callout-trigger2 and attach them to callout body HTML.

The classes can be put onto anything inside the components body in theory, and would probably (from my reading this afternoon) need something to add 'no touch' behaviour for desktop as well.

The callouts could be configured into two groups (for now - extend later)

fullscreen (notify:popup)
inline : which would position itself relative to the trigger and could be given dimensions etc

I guess reading about notify i could leverage the other types of notification too...i quite like the 'toast-esque' one

General Use Cases :

- Expanding on complex topics with more information

- References as popups

- Definitions of a new term as callouts

Is that pretty much like yours? :S

K

Show parent | Reply

So to follow up - i put a couple of hours in this morning to my first component. The easiness of it is praise enough to the design on your component system. All just 'made sense' to me.

https://github.com/KevCJones/adapt-callout

v0.0.1 - only triggers a 'popup'

<a class="callout-trigger" href="javascript:void(0);" data-callout="exampleKey">Clickable Text</a>

the callout 'key' refers to the _callouts array in the model json. Next steps, something custom (not in notify core) which is a callout popup that hovers above the item you clicked and then all the annoying stuff that goes with that e.g. keeping on screen, closing on scroll away etc etc.. Just thought i'd share and if you see anything i'm doing wrong feel free to nudge me the right way ;)

I also plan on making it completely up to the configuration as to whether its text, images or hotspots that trigger a callout object.

K

Show parent | Reply

Hi Kevin,

I'm very interested in your component. I've managed to get this far:

1. installed the component but don't see it in the plugins or extension list to activate.

2. added a component with the anchor code provided for the popup effect.

As for adding the JSON to the config, can you elaborate a little more on this? which file do I add the JSON to? and am I missing any steps?

thanks,

Show parent | Reply

Thanks, Kevin! Really pleased it made sense and you found it easy.

I'll check the component out over the weekend. I'll let Daryl and the developers comment on the more deeply technical aspects.

Have a great weekend,

Sven

Show parent | Reply

Cheers Sven, going to return to it later this week, crunch week for an e-detailer... all comments welcome, its very early days anyway.

Show parent | Reply

glad to see you guys are all set with popups. wish I could get it to work on Framework v2, I'm still struggling with this.

Show parent | Reply

Hi Kevin

Have you seen the Accordion component? This functions as a hot text.

You could break your text over several headers (therefore maintaining amount but losing the bulkiness) and have a graphic component of the Author next to the Accordion component. The only thing to be aware of is on a phone the graphic would either be above or drop below the accordion, depending on where you placed it in the block.

Each author could have their own block with an accordion and a graphic. Depending on how the content is written you could have them as in 'Author in focus' piece, inter-spaced throughout your course?

The reveal component - It's one where you can combine text and images, but the text space is still limited when you consider mobile devices.

Another idea - how about putting resources in the the Drawer? If your bios exist in another form already you could simply upload them as a takeaway resource, to a place which is accessible throughout the build.

Sounds like you can work some tech magic though, so I'm sure you'll think of something!

Hope that helps

Nicola

Show parent | Reply

Ah ha ... 'Eureka' moment when you said about the drawer... i think i could swing that one with them :) in fact it makes a lot of sense to throw that, the disclaimers and other 'legal' faff up there :)

Still going to explore a component (for the sake of learning how) but this solves my immediate distates for polluting my learning experience with 'author' ego's ;)

Thanks for your thoughts, very useful!

K

Show parent | Reply

No problem, Kevin. Good luck with your course.

And if your client wants the disclaimer up front (as some may), maybe you can have a play around with Notify - Alert and load before you content, depending on your structure? Not had a close look at the Notify code so I'm not 100% if it can trigger on page load.

Daryl - looking forward to that plugin! Quick query - Will it allow multiple buttons to be added to a single block to launch various Notify popups? Or can it be adapted to do that? ;)

Nicola

Show parent | Reply