Improve presentation of hints for the student.

[seanlip]

Is your feature request related to a problem? Please describe.
The current hints design is not intuitive, and students don't intuitively understand how to use it.

Describe the solution you'd like

Here are @mschanteltc's updated designs for the hints screen. Generally, there are 3 states of the Hint Card -- Unrevealed, Expanded, and Collapsed. (Note: open the links in an incognito window to play the interactive prototype.)

• Hint 1
  • Note: For all hints, when the user hits "Reveal Hint," it will change from the Unrevealed state to the Expanded state.
• Hint 2
  • IMPORTANT: Please note that there is a design limitation of this prototype which is there because implementing it in the prototype would take too long. Specifically: within the prototype, when Hint 2 is revealed and Hint 1 is expanded afterwards, Hint 2 returns back to "Reveal Hint." This should not happen. If the hint is revealed, it can never go back to the Unrevealed state.
• Solution
  • IMPORTANT: Please note that there is a design limitation of this prototype -- when a Hint Card is opened, it currently overlaps any Hint Cards beneath it. This is not supposed to happen. Instead, all cards below the expanded hint card should transition downwards. This can be seen in the Hint 2 mock above, when Hint 1 is expanded.

Overall note (IMPORTANT): In the prototypes above, the hint/solution cards cover the "Return to Lesson" button when expanded. This should not happen, and it only works the way it currently does because of the limited time available to implement the prototype. Instead, in all cases, the "Return to Lesson" button should transition downwards (such as when the Hint 1 Card is expanded in this prototype).

Notes on the design:

• It's fine for multiple hint cards to be expanded at the same time. This is because students might want to refer to other hints while reading a given hint, in order to get the necessary context.
• For "Reveal solution", it's fine to keep the confirmation dialog. But if dropping it is easier, we can do that too. Let's do what's technically easiest here.
• Hints should appear one by one after a certain amount of time has elapsed. When the user is in the Hint Modal, the timer should not be counting. This is because there should be at least some time which the learner can use to think about and apply the suggestions in the hint before we prompt them with a follow-up hint.

Additional context

Here is what the hints screen currently looks like. The dropdown arrow is not clear and there are too many clicks needed to get to the hint. Students also struggle to exit the hints page.

[KolliAnitha]

Hints UI is changed and all the hints are properly aligned and expanded. Verified in 0.8-alpha-091b45a188.