Fix #362: Add congratulations message when a correct answer is submitted

[veena14cs]

Explanation

This PR shows congratulation message when correct answer is submitted. This message has got fading animation

Mocks

https://xd.adobe.com/spec/bee1fced-33bd-4f69-6a89-2c30fe1c4f65-c8d0/screen/cf6a4999-56aa-4c3c-802f-7573a0457f9b/PM-Q1-Fraction-Input-Correct-Toaster-.

Screenshot

[veena14cs]

@BenHenning to identify correct answer is submitted , we are using result.labelledAsCorrectAnswer.
But this is not working on some explorations.

[rt4914]

@BenHenning to identify correct answer is submitted , we are using result.labelledAsCorrectAnswer.
But this is not working on some explorations.

@veena14cs Please mention those explorations too.

[rt4914]

@veena14cs The text is visible behind state buttons. I think to solve this you will need to make the elevation of textview to be around 6-8dp. You might need to introduce CardView also.

[BenHenning]

The gif looks awesome--nice!

[veena14cs]

The gif looks awesome--nice!

Thanks!

[nikitamarysolomanpvt]

LGTM

[veena14cs]

@veena14cs The text is visible behind state buttons. I think to solve this you will need to make the elevation of textview to be around 6-8dp. You might need to introduce CardView also.

I fixed this by giving elevation to framelayout. I have not used cardview. PTAL once.

[veena14cs]

@BenHenning to identify correct answer is submitted , we are using result.labelledAsCorrectAnswer.
But this is not working on some explorations.

@veena14cs Please mention those explorations too.

For Prototype Exploration result.labelledAsCorrectAnswer is not working.

[rt4914]

LGTM. Its great.

[rt4914]

@veena14cs Do not delete this branch. Needs this to track another issue.

[mschanteltc]

This animation looks great and would be suitable if the app is on battery saving mode.

When it's not on battery saving mode, can we animate it so that the "Correct" toaster rises, then fades down? It would use an "Ease-In-Out" animation going up with a duration of 0.4 s. The correct toaster will stay for 3s. After it would fade and move down also with an Ease-In-Out animation with a duration of 0.4 s. The beginning and ending state of the "Correct" toaster is 20 px below the middle state where the toaster stays in place.