New feature: interactive observation

[galeyang]

Feature introduction: interactive observation

Users mouseover an explanation and the relevant code (in the Dartpad) is highlighted.

Goal: make it easier to reference important code snippets
Use cases: explain the concepts in demo code examples and solutions.

This is the initial prototype. We would like to implement a similar feature in Dartpad

Study result

In the UX study, 9 out 10 participants like this feature. They said this is

“handy, pretty useful, easier to go back and forth than having to check line number, bringing focus, haven’t seen this before”.

This feature also reminded them of classroom experience (teacher pointing on the blackboard while explaining things) or the web inspector.

Next step

Once this issue is scheduled to be implemented, we would need to further define how to apply this to Dartpad and address the following known usability issues:

• Users may not notice it at first glance when it's out of view
• Users may have to scroll up and down if it's out of view

Feedback welcome!

---

Status of this issue is also tracked in https://github.com/orgs/flutter/projects/3.

[parlough]

As part of the new, simplified version of the DartPad frontend, the exercise functionality this was related to was removed.

If anyone would like to see similar functionality brought back, please check out #2702 or open a new issue. Thanks so much!