Adapt Learning Community: Extension to replace components based on browser User Agent String?

I was wondering if there exists a way to serve up a different component within a block based on what kind of browser someone is using.

We want to use an advanced component but it doesn't work with IE8.

It would be great if such an extension existed so that we could use the advanced component, but have a fallback to a regular text component etc for IE8 users, which is a requirement of this client we have.

Both components would exist in the components.json file, but different ones would get loaded into the same block depending on browser type (or even device, say for mobile)

Does anything like this exist yet?

Thanks!!

Hi Rob

You could probably do something with adapt-hide.

Alternatively if it's just the one component and you only want to replace it with a regular text component - why not build the logic for this into the component itself?

Show parent | Reply

Thanks for the Adapt-Hide component.

I've modified the Adapt-Hide component using some jquery found here to determine if a browser is IE or not

http://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery

so that when the property "_hideOn":"ie" or "_hideOn":"not-ie" is added into json, the components will show or be hidden (depending if you are using IE or not)

Rob

Show parent | Reply

Hi Rob

Nothing wrong with this - but, in Adapt, browser detection is much simpler than that:

if($('html').hasClass('ie')) {
    //user is running Internet Explorer
} else {
    //user is running a decent browser
}

Show parent | Reply

Alternatively without a DOM lookup:

if (Adapt.device.browser === 'internet explorer') {

Show parent | Reply

is it possible to use this but for accessibility in Adapt 4?

Basically if accessibility is enabled, hide a component and show a different one.