Correct/Incorrect/Complete question images

[Pnella]

@PatriciaMoller and I have been doing some talking, I've been doing some illustrations for this which she will use to explain what this is about and what it could look like.

[PatriciaMoller]

The idea was to have these after a question has been answered correctly/incorrectly, to make the event livelier.

It hit me that using text maybe isn't a good idea, as they would have to be localized. Maybe using fancier version of the the symbols used on the map would be better from that perspective.

Maybe they could be further animated the Spritesheet+JSON method mention here could be applicable

Illustrations found here: Wrong, Correct

[kaimikael]

Oh, I love those!

[PatriciaMoller]

En extension of the Correct gif:

The "bubble" shrinks and goes to the progress bar. When it "hits", the number goes up

[pjotrsavitski]

Can not comment about the animation technique to be used (have to check out the sprite approach first).

We should probably not use texts within the images. We could create a complicated elements and animate those, but then we are no longer talking about sprite animations (that would become too complicated).

We should also keep to one approach, instead of rushing with too many visuals. By that I mean: we either have those (or something similar) or jumping question markers. The visuals should not be too overwhelming.

[PatriciaMoller]

The text used when I did this mockup is an image of text (so, a sprite). Do you mean text, as in actual strings of text, shouldn't be used?

Maybe having both, in their current forms, would be overwhelming as you say.
I apologize that I rush and I throw so many different workflow suggestions. I want to find a way so I can make animations and visual assets as "ready-to-use" as possible and figure out what kind of assets would be needed from my end. Web-based platforms like this is a bit of a new territory, as I have mostly worked in game engines.

[pjotrsavitski]

Yes, if we just want to stick to images/sprites or anything else, then we should keep away from texts. We could use the complex HTML elements and animate those instead (this would allow translating). But that would make using sprite animations that you have liked impossible.

Not a big deal. It takes time to try out the visual things and it sometimes take a long time to understand how something could be applied (especially when one uses other libraries or frameworks; Google Maps API is one example, it does not really let you access the DOM nodes, but wants you to use the Marker object and make manipulations through it, but that does not have all the animations we would need; this is why it is easier to just use some animated images because the API to make changes exists).

[PatriciaMoller]

One correct, Multiple Correct and Match pairs should these, as they do have correct answers.
Information doesn't need it, since it's just a box of text to be read.
Photo and Embedded feel trickier as they don't necessarily have to be questions.
Freeform as well, as there is no way to know if they're actually correct when. Maybe having a "Submitted!" image for those three?

[pjotrsavitski]

Yes, that is one possibility. We should probably differentiate between those that automatically checked and those that are not (if that is important enough).

[PatriciaMoller]

Not super important maybe, but I think it could feel rather strange if someone wrote gibberish in a freeform and got rewarded with a "Correct!".

Having different images could seem inconsistent to some, but it would also give more correct and representing feedback for what they did.

[pjotrsavitski]

Agree with that in full. It would seem strange indeed.

…

On 2 Nov 2017, at 17:05, PatriciaMoller ***@***.***> wrote: Not super important maybe, but I think it could feel rather strange if someone wrote gibberish in a freeform and got rewarded with a "Correct!". Having different images could seem inconsistent to some, but it would also give more correct and representing feedback for what they did. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[PatriciaMoller]

Suggested CSS-animations:

Correct: In - bounceInUp . Out - bounceOut.
Wrong: In - bounceInDown. Out - bounceOutDown.
Submitted: In - bounceInRight. Out - bounceOutLeft.

"Submitted" image found here

[PatriciaMoller]

Updated Correct, Incorrect and Submitted images

[kaimikael]

Is this anything that we will implement in the released version? I have received requests from Korkeasaari as well for fancier feedback when answering questions.

[pjotrsavitski]

Will see how things go. If I manage to get visuals running without issues and fast enough. Then a more or less generic solution would allow that to be implemented without too many complications.