Revise Guidance on Write Plan page

[stephaniesimms]

UX wireframes @JEK-III : http://h90c3m.axshare.com/#g=1&p=write_plan

• one guidance/comments portion per question, but refactoring the UI to be similar to the wireframe linked above and screenshot below
• Use a slider to switch between guidance and comments and create guidance tabs by organisation
• Related issue started as Revise Write Plan page #494 and continued in Finish Project Details page - including Guidance section #943

[briri]

This one needs to be worked on with close coordination with #494

Instead of having separate guidance/comments sections next to each answer we want a single tabbed box that is contextualized based on where the user is currently working.

• The tabbed box should stay visible as the user scrolls up and down.
• All guidance sections should be collapsed on page load or a new section is expanded
• When a user expands a section, the following should happen:
  • The Guidance reloads. All of the themed guidance for all of the questions within that section should appear (separated by org as shown in the wireframe)
  • All accordion guidance should be collapsed
  • The comments tab should be cleared and any old question specific annotations should be removed from the guidance tab
  • A message should appear on the comments tab letting the user know that they should click on an answer to show comments - @JEK-III, @stephaniesimms, @sjDCC if this one is true what should the message say? (this is when a user has expanded a section on the page but has not yet clicked on a specific question)
• When the user clicks on a specific question/answer the following should happen:
  • The comments tab should reload
  • Any old question specific annotations should be removed from the guidance tab
  • Question specific annotations should be loaded and appended to the bottom of the appropriate guidance (e.g. DMPOnline suggested answer would be added at the bottom of the DMPOnline guidance)
  • If a guidance area was expanded and is still available to the user, it should remain expanded
  • The current tab guidance/comments should remain active (e.g. if the user had the comments tab open and clicked on a different answer then the comments tab should remain open)

[vyruss]

I'm a bit concerned with changing the layout so drastically as it's not clear how we can display "annotations" (i.e. guidance and/or example answers for specific questions) aligned alongside the question

[xsrust]

I'm confused as to why themed guidance would be displayed on a per-section basis instead of a per-question one. Templates rarely have multiple questions with the same theme in a section. Furthermore, unless we display the theme next to the question, it will be difficult for the user to pair guidance to questions.

The comments tab only re-loading once the user has selected an answer box may also confuse users and require extra clicks. I also find it difficult to understand how this layout would work for a keyboard-only user.

[briri]

@JEK-III did we decide on how to display things like question specific guidance and example answers? If I remember correctly, we were going to add them as sections to each of the org tabs if I remember correctly.
Not sure of all the use cases for displaying themed guidance per section. @sjDCC and @stephaniesimms should be able to clarify.

[stephaniesimms]

we discussed all points above during UX mtg on 12 Jul and @JEK-III is revising the wireframes accordingly. we can review them together on Tues and/or Wed calls next week.

[vyruss]

I'm not too sure about the <h3> size for guidance titles - it might be a bit too big and it also produces an indentation effect on my browser