Challenge completion celebration

[adamjonas]

As a learner, when I complete a challenge, I should be exhilarated and encouraged by completing a challenge.

Possibilities:

1. Modal drop on completion with congratulations with some advancement of the narrative (and possible payout?)
2. An improved version of the completion banner

[aureleoules]

Is this a duplicate of #53 ? Actually I don't think so. #53 is for chapter completion.

[adamjonas]

@GBKS any input on this one?

[GBKS]

Something we should tackle, for sure. Have not thought super deeply about it, but here are some ideas:

• The inputted text turns a celebratory green when it's correct (see here)
• Change "Challenge completed" to be more informational and unique (see here)
• Some kind of elaborate animation that's fun and playful (Duolingo does this well, some info here). I have not looked much into animation since there has been more basic stuff to take care of

[ecurrencyhodler]

It would be great if we can explore animations. That would 10x the endorphines! If someone investigates how to integrate animations, design can help create something for eng to implement?

[GBKS]

Most of the UI animations (really transitions) we need can be handled via the React/Next built-in transition functionality. For more elaborate animations, like drawing out Elliptic Curve Cryptography math, we may need to set up Lottie.

[GBKS]

I just got assigned this, so one extra comment. Before worrying about how to do this technically, let's first come up with animations. The tech solution can then follow our intent.

[ecurrencyhodler]

Do you think this is worth including into v1?

[GBKS]

Depends on how we scope it out. When this issue was posted on Jan 6, the experience looked very different. Maybe this is already addressed?

[benalleng]

I tried my hand in a little animation practice with #311. It doesn't work quite like i want it to however but still something to consider as inspiration for this

[ecurrencyhodler]

Thanks Ben!

Yea Christoph, I feel like this is a "nice to have" but not necessary.

@adamjonas do you feel like this issue has been addressed in the demo? If not, was there something more specific you had in mind to help define it a bit more?

[adamjonas]

Let me qualify this with that I'm a 4/10 on the strength of my conviction here. And so, while the challenge completion is certainly better, I don't think that the inline green text for that first challenge completion -- the magical moment of seeing satoshi's secret message revealed -- is the kind of endorphin hit that I was imagining. An animation or modal celebration would be more encouraging I believe.

[ecurrencyhodler]

Okay. This sounds like a "nice to have." I'm going to remove this from v1 and add it to the backlog.

Ben, if you want I'm open to using the animations in your PR if @GBKS approves.

Moving forward let's have people leave a comment here on this issue with ideas or proposals that design approves before submitting a PR.

[ecurrencyhodler]

Just to throw another idea on the table here for future reference, here's something we did at Casa that people seemed to really enjoy.

https://user-images.githubusercontent.com/32662508/225740639-6adbb0ba-236d-4051-95eb-8d7874cbe9c0.mov

[GBKS]

Ah, the classic confetti.

Thanks for the PR exploration, @benalleng, great to see that it's easy to get Lottie animations in there. I don't find this specific animation hitting the spot. At this moment, the user is focused on the input field, pastes the code, and it turns green. The animated check is in the bottom-left corner, out of the focus-zone. It's also unexpected because usually nothing happens in UIs when pasting content. The effect would be much stronger and intuitive if the animation is right where the user is looking. Let's do some design exploration and discuss some variations that we can ideally also work across other challenge types.

[benalleng]

Yeah, it's definitely not the best but it was free! I've been looking a little at Duolingo again and they have some fun modals to show the user's streak level. I'll try to find an example to paste here

[adamjonas]

I'm glad the exploration is getting the juices flowing but to be clear, I don't think this is critical path at the moment. I'd suggest this ticket remain open but not be at the top of the priority list.