Allow inline feedback to be inserted before .btn__container

[hanshillen]

Currently, if you use the 'inline' type, the feedback element is appended to the component, after the question button(s) in .btn__container.

This means that when focus is moved to the feedback element on appearance, the user has to navigate backwards (e.g. shift tab for keyboard users, or backwards virtual navigation for screen reader users) to get to the 'reset' button and reset the question.

In general, requiring backwards navigation for progression is to be avoided, as it can be confusing to the user and as it's easy to miss. When dynamically updating page content, it's always good practice to to either:

• ensure the change happens 'downstream', i.e. further down the reading order from the user's current focus.
• manually move focus to the updated part (e.g. moving focus back to the start of the question when clicking the 'reset' button.

With this in mind, it would be good if adapt-contrib-tutor had an option that lets authors choose to have the feedback element inserted before the buttons instead. All this option would do is change view.$('.component__inner').append(new TutorView(options).$el); to view.$('.btn__container').before(new TutorView(options).$el); on line 60.

This would make the feedback be inserted like this:

With this change, the user always moves forward: "submit question -> auto-focus feedback above reset button -> reset button -> auto-focus question title -> submit -> auto-focus feedback -> next question... etc.". The interaction flows more naturally