Animated Feedback for Correct/Incorrect Answers

[milindvishnoi]

No description provided.

[ArsalaBangash]

Implementation Details

VueX

showingAnimatedFeedback: false

setShowingAnimatedFeedback mutation

showFeedback action() {
setShowingAnimatedFeedback(true)
setTimeout(() => {setShowingAnimatedFeedback(false)}600)
}

View

What we want to do is fade out the challenge screen and show a lottie animation. We can use this vue plugin to integrate lottie.

You can find animations on lottie files or from the Boltz Repo's assets

Considerations:

• Maybe we should pause the timer during the animated feedback
• Show a simple red background fade in and out when a question is answered incorrectly
• Show correct animations after 1, 3, 5, 8, 10, and then every 2 afterwards.
• Pick randomly from the boltz animations, but don't select animation twice before the others are used