Embed feature: confirmation question asking for output

[galeyang]

From the previous UX study, one proposed idea was showing an interactive code example and asking learners about the output. After learners choose an option, it shows an answer with more explanation.

Goal

• Encourage users to think through the code example
• Help learner better understand the code with further explanation

Prototype

Result
7 out of 10 participants like having this question. They found this “informative, makes me think a little bit more, explains why”. The explanations shown after choosing the correct option also better explain the code.

Confusion
Most participants were unsure if they were supposed to run the code first or to answer the question first. A few felt this is cheating or redundant if they can run the code before answering it.
P05 didn’t immediately notice the explanation because it was out of the view

Improvement

• Move the question above the editor
• Set expectation by telling learners what to do: observe it and answer the question first. Then run the code
• After answering, automatically scroll down a little to show the explanation section

---

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!