Mobile instruction highlighting for interaction error

[ghost]

For the following proposed enhancement: https://github.com/adaptlearning/adapt_framework/issues/3070

The aim is to make it clearer to users when they haven't interacted with the mobile Narrative / Hot Graphic elements in the correct order, i.e. skipping ahead one or more items before clicking on the strapline and therefore seeing all the content for that item. This could benefit users whether completion is set to inview or allItems.

Changes assume the .instruction-error and @instruction-error class and variable are defined in the Vanilla theme. I've also implemented these changes, which can be submitted in another PR if this one is approved.

[moloko]

Thanks for your tip. I'm still new to JS, so as for the above, I just about get it, but I've never really considered returning early before. I'll need to properly test it out and become more familiar with it.

Basically the idea behind this is two-fold:

1. putting code into if...else code blocks can quickly get messy, hard-to-read and maintain, so the idea is to try to avoid doing this (except when it really is necessary - or when by trying to avoid it you end up making the code less readable!)
2. get the conditions you don't want to handle out of the way leaving you with a nice, neat bit of code for the condition(s) you do want to handle (apparently this is known as a 'guard clause', which is news to me!)

Examples 1, 2 & 3 in this article are all good illustrations of this technique.