Adapt Learning Community: article mobile instruction

Hi all,

I need to apply the narrative instruction funtionality (whereby the desktop instruction text is swapped out for a mobile instruction text on small devices.

I can kind of see what's happening in adapt-contrib-narrative.js in that there's a reRender() function that triggers the replaceInstructions() if the device is small, but I can't find a similar .js file for an article that I could start adding the code to. I looked in the core/js folder but anything relating to articles is sparse to say the least!

Is something like this possible, and could anyone offer some suggestions on how to go about it?

Thanks and regards,

Chris

It seems to me that adapt-contrib-narrative.js is extending the view for components. So if you want to add a similar functionality for articles, I think you'd have to either write a new module extending the ArticleView (as adapt-contrib-narrative.js does for the ComponentView) or modify the articleView.js file in core/js/views.

I'd consider just adding a component at the top of the article that can display different instructions for mobile and not, but I don't know your specific use case.

Show parent | Reply

Hi Chris, I think that extending the articleView and articleModel could be the best option.

However, you can also try to change the articles.json file:

    {
        "_id": "a-01",
        "_parentId": "co-01",
        "_type": "article",
        "_classes": "",
        "title": "",
        "displayTitle": "Article title ",
        "instruction": "Article instruction",
        "mobileInstruction": "Article mobile instruction",      
        "body": ""
    }

And then in your theme (E.g. src -> theme -> adapt-contrib-vanilla > vanilla.js

define(function (require) {

    var Adapt = require('coreJS/adapt');

    Adapt.on('device:changed', replaceArticleInstruction)

    function replaceArticleInstruction() {
        _.each(Adapt.articles.models, function (element, index) {
            if (element.has('mobileInstruction')) {
                var _replaceText = element.get('instruction')
                if (Adapt.device.screenSize =='small') {
                    _replaceText = element.get('mobileInstruction')
                }
                $('.article'+'.'+ element.get('_id')).find('.article-instruction-inner').html(_replaceText)
            }
        });
    }
    Adapt.on('articleView:postRender', function (view) {
        replaceArticleInstruction()
    })
});

Regards.

Show parent | Reply

Hmmmm. Thanks Ignacio. This looked really promising. No error messages, but unfortunately I lost all the page contents. I think I'm going to have to think of something else - not sure my javascript is up to extending those models yet.

Show parent | Reply

Hi Ignacio.

Just wanted to let you know (and anyone else looking for this functionality) that your code works like a dream! It was my initial implementation of it that was wrong! Many many thanks for it!

Show parent | Reply

I am using Adapt-blinds component and the Instruction does not convert to Mobile Instruction. I was wondering if you were able to get the mobile instruction within the component or is it on the article? I would like the instruction to be under my title and body text where it normally goes.

Show parent | Reply

Hi all,

Just resurrecting this question. Ignacio's solution worked great, but Adapt has moved on and there's no longer a vanilla.js file! Please could someone suggest a new way I could achieve the same effect?

I need "mobileInstruction" for articles, whereby you have the option for the article instruction text to change at medium & small device sizes (similar to how it works in a hotgraphic).

Many thanks

Show parent | Reply

Hi Chris, could you please test the adapt-mobileInstruction extension?

You can see it here

Show parent | Reply

Hi Ignacio. This looks great. Having difficulty implementing it though. Where do I place the JSON?! I put it within the article, and it replaced the whole article with the instruction only!

Show parent | Reply

Install the mobile instruction extension in your project.
In articles.json
{ "_id": "a-05", "_parentId": "co-05", "_type": "article", "_classes": "", "title": "a-05", "displayTitle": "", "body": "", "instruction": "Article instruction text.", "_mobileInstruction": { "_isEnabled": true, "instruction": "Mobile article instruction text", "_selector": ".article__instruction-inner" } }

Show parent | Reply

Still not working for me Ignacio. Framework 5.18.6. I'll try it in a new course when I get a minute (!).

Show parent | Reply

Chris, I just updated the extension. Could you try again, please?

Show parent | Reply

Great work Ignacio! Works perfectly.

This is probably on your list, but one thing I would suggest is to have the screen size where the swap occurs (currently 'small') configurable in the articles.json part. I opened the JS and changed const sizedInstruction = (device.screenSize === 'small'... etc to 'medium' (which I needed because my tabbed abs collapses @device-width-medium, so the 'Click the tabs...' instruction needs to change) but for someone petrified of code (even more than me!) it might help!

Works great though! Many thanks.

Show parent | Reply

Thanks Aaron. I thought it might not be a straightforward couple of lines of code! Interesting thought on adding an extra component. I'll have a think.

Show parent | Reply