User dashboard: add badges to dashboard

[jonfroehlich]

I am splitting up #1363 into individual pieces for the user dashboard.

This Issue covers adding badges, which I want to keep simple for now but grow outward in the future.

Currently, I've mocked up badges for:

• Num completed missions
• Total label count
• Total validations performed
• Total distance explored

There is also a larger software engineering architecture question about how to implement badges so that:

• There is a shared backend code in calculating badge level (so we don't have all this disparate front end logic peppered throughout the code) because eventually we will want to show badges not just on user dashboard but also on the primary screen's right sidebar and mission screens
• We track when a badge is earned and whether it's been awarded (maybe in BadgesTable.scala?)

But for this initial user dashboard MVP, I could just implement the logic in the frontend itself via conditional checks since all badge levels are earned based on threshold checks.

Badge Mockups

I'm not a professional designer by any means and my goal here was to quickly mockup ideas and implement something (which is better than nothing). We can, of course, improve these over time.

Labeling activity badges

Validation activity badges

Distance audited badges

Mission complete badges

[jonfroehlich]

Here's an initial mock:

[gari01234]

this looks really cool!

[jonfroehlich]

Thanks @gari01234. We've long wanted to incorporate more game design elements into Project Sideawlk and the push to make mapathons a bit more fun (e.g., with leaderboards) gave us another opportunity to revisit this!

[jonfroehlich]

This is what it looks like in code (still working on it):

[jonfroehlich]

Now looks like:

The remaining TODOs here are:

• Work with @misaugstad on a backend class where I can call getCurrentMissionBadgeLevel and receive an integer corresponding to the current mission badge level. The more general version of this might just be getCurrentBadgeLevel(String badgeType) where badgeType could equal mission, distance, validations, labels, etc. We might also want to add getCurrentBadgeLevels, which returns a HashMap of "mission_badge_level", "distance_badge_level", etc. as keys and corresponding integers as badge levels. Update: per our discussion, gonna move backend badge support into new issue
• Need to make a CSS translucency overlay to badges not yet earned
• Need to make dynamic "encouraging statements" that tell us how many more "things" that are necessary until reaching the next level. Again, will need to work with @misaugstad on the backend class here getActivityAmountUntilBadge(String badgeType) which would return a number (an Integer for missions, labels, and validations and a Float for distance) that represents how much activity is necessary until the next badge is reached. We'll also use this function in the updated mission sidebar for helping track and visualize how close users are to earning new achievements.

[misaugstad]

@jonfroehlich is the plan still to make an initial MVP version that doesn't include that back end code, where you just have the logic on the front end?

[jonfroehlich]

I can do that, yes. But I was also thinking we might want to architect out a lightweight backend as described above. The computations can be simple and not tied to a specific badge database but this way front end doesn’t do anything smart except show/hide appropriate badges based on levels returned from backend

…

Sent from my iPhone

On Sep 29, 2020, at 1:03 PM, Mikey Saugstad ***@***.***> wrote:  @jonfroehlich is the plan still to make an initial MVP version that doesn't include that back end code, where you just have the logic on the front end? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[misaugstad]

I think that if it isn't overly complex, we should move forward with the all front end MVP. Given the number of things on my plate, we'll probably get the code out on production much sooner this way

[jonfroehlich]

Sure. I'll do that and then make a new Issue for making a more sophisticated backend that's shared across mission screens, mission sidebar, and user dashboard.

Note to self: tips on conditional statements, etc. in Play framework here: https://www.playframework.com/documentation/2.8.x/ScalaTemplates

@misaugstad, since this MVP will need a whole bunch of if/elseif blocks in the Scala template, do you know how to do that? I could only find syntax for if/else (not if/elseif/else) in the docs. I did find this on Stack Overflow.

[misaugstad]

Honestly, that sounds incredibly annoying, and I try to keep as much logic out of the template scala files as possible. Would you be able to just do it in JavaScript? Maybe by just showing/hiding elements based on the data you have? Getting the data might look like

<script type="text/javascript">
    var auditedDistance = @getDistanceAudited(user.get)
</script>

[jonfroehlich]

Makes sense. I’ll try something! It probably won’t be as clean as our eventual implementation.

…

Sent from my iPhone

On Sep 29, 2020, at 3:02 PM, Mikey Saugstad ***@***.***> wrote:  Honestly, that sounds incredibly annoying, and I try to keep as much logic out of the template scala files as possible. Would you be able to just do it in JavaScript? Maybe by just showing/hiding elements based on the data you have? Getting the data might look like <script type="text/javascript"> var auditedDistance = @getDistanceAudited(user.get) </script> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[jonfroehlich]

Current version, which now dynamically calculates which badges to show based on user progress and also dynamically prints out an "encouraging" statement (which can be changed, of course).

Still need to:

• Support metric (everything is in imperial currently)
• Create metric badges for distance
• Support Spanish translations. Not exactly sure how to use the messages table in JavaScript... but that would be the easiest

[gari01234]

Spanish translations

Your missions: Tus misiones
Distance: Distancia
Labels: Etiquetas
Validations: Validaciones
Accuracy: Precisión

Just "X" more missions until your next achievment: Sólo "X" misiones más hasta tu próximo logro
Just "X" more miles until your next achievment: Sólo "X" kilómetros más hasta tu próximo logro
Just "X" more labels until your next achievment: Sólo "X" etiquetas más hasta tu próximo logro
Just "X" more validations until your next achievment: Sólo "X" validaciones más hasta tu próximo logro

missing something?

[jonfroehlich]

Thanks @gari01234. I'm gonna have a set of dynamic encouragement statements that I'll need translated. Stay tuned.

In the mean time, here are some testing screenshots:

[jonfroehlich]

OK, @gari01234, here are some of the translations I need:

• "Awesome!"
• "Woohoo!"
• "You can do it!"
• "Amazing work!"
• "Nice job!"
• "Keep it up!"
• "Now we're rolling!"
• "Thanks for helping!"
• "You're more than halfway!"
• "Making great progress!"
• "Great job!"
• "Congratulations, you've earned all of your badges!"
• " more until your first achievement". For example, "36 more labels until your first label achievement"
• "Just more until your next achievement" . For example, "3 more missions until your first mission achievement"
• "Your labeling accuracy. If N/A is shown, then not enough of your labels have been validated by other users."

[jonfroehlich]

Added dynamic support for badges and text for metric vs. imperial:

[jonfroehlich]

Working on these dynamic translations now:

After completing one labeling mission:

After completing three validation missions:

[gari01234]

OK, @gari01234, here are some of the translations I need:

"Awesome!" "¡Increíble!"
"Woohoo!"
"You can do it!" "¡Puedes lograrlo!"
"Amazing work!" "¡Increíble trabajo!"
"Nice job!" "¡Buen trabajo!"
"Keep it up!" "¡Sigue así!"
"Now we're rolling!" "¡Ahora estamos avanzando!" (Not so sure about this one)
"Thanks for helping!" "¡Gracias por ayudar!"
"You're more than halfway!" "¡Estás a más de la mitad de lograrlo!"
"Making great progress!" "¡Estas haciendo un gran progreso!"
"Great job!" "¡Gran trabajo!"
"Congratulations, you've earned all of your badges!" "¡Felicidades, te has ganado todas tus insignias!"
"3 more until your first achievement" "3 más hasta tu primer logro"
"36 more labels until your first label achievement" "36 etiquetas más hasta tu primer logro de etiquetas"
"Just 3 more until your next achievement" "Solo 3 más hasta tu próximo logro"
"3 more missions until your first mission achievement" "3 misiones más hasta tu primer logro de misiones"
"Your labeling accuracy. If N/A is shown, then not enough of your labels have been validated by other users." "Tu precisión de etiquetado. Si se muestra N/A, significa que no se han validado suficientes de tus etiquetas por otras personas usuarias"

[jonfroehlich]

Thank you!

…

On Sun, Oct 4, 2020 at 9:38 AM Gari01234 ***@***.***> wrote: OK, @gari01234 <https://github.com/gari01234>, here are some of the translations I need: *"Awesome!"* "¡Increíble!" *"Woohoo!"* *"You can do it!"* "¡Puedes lograrlo!" *"Amazing work!"* "¡Increíble trabajo!" *"Nice job!"* "¡Buen trabajo!" *"Keep it up!"* "¡Sigue así!" *"Now we're rolling!"* "¡Ahora estamos avanzando!" (Not so sure about this one) *"Thanks for helping!"* "¡Gracias por ayudar!" *"You're more than halfway!"* "¡Estás a más de la mitad de lograrlo!" *"Making great progress!"* "¡Estas haciendo un gran progreso!" *"Great job!"* "¡Gran trabajo!" *"Congratulations, you've earned all of your badges!"* "¡Felicidades, te has ganado todas tus insignias!" *"3 more until your first achievement"* "3 más para tu primer logro" *"36 more labels until your first label achievement"* "36 etiquetas más para tu primer logro de etiquetas" *"Just 3 more until your next achievement"* "Solo 3 más para tu próximo logro" *"3 more missions until your first mission achievement"* "3 misiones más para tu primer logro de misiones" *"Your labeling accuracy. If N/A is shown, then not enough of your labels have been validated by other users."* "Tu precisión de etiquetado. Si se muestra N/A, significa que no se han validado suficientes de tus etiquetas por otras personas usuarias" — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2281 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAML55PA3Y7YYQX6UKAVYP3SJCQHRANCNFSM4R4TAJ7A> .

-- Jon E. Froehlich <https://jonfroehlich.github.io/> Associate Professor Paul G. Allen School of Computer Science & Engineering University of Washington http://makeabilitylab.io @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter Help make sidewalks more accessible: http://projectsidewalk.io

[jonfroehlich]

Because it might be useful to use in the future, here is Google's "CrowdSource" game with badge implementation: https://youtu.be/WmzwfFWEodw. The video shows us the user experience for their "validation" interface, their badge system, and their leaderboard.

[misaugstad]

@gari01234 would you be able to provide a few more translations for us?

Your labeling accuracy. If N/A is shown, then not enough of your labels have been validated by other users.
Icon showing curved path to destination
Minimalist map icon with large destination marker
Checklist next to a pencil
Target with an arrow in the bullseye

[gari01234]

@gari01234 would you be able to provide a few more translations for us?

Your labeling accuracy. If N/A is shown, then not enough of your labels have been validated by other users.

Tu precisión de etiquetado. Si se muestra N/A, significa que no se han validado suficientes de tus etiquetas por otras personas usuarias

Icon showing curved path to destination

Icono que muestra el camino curvo hacia el destino

Minimalist map icon with large destination marker

Icono minimalista de un mapa, con un gran marcador de destino

Checklist next to a pencil

Listado junto a un lápiz

Target with an arrow in the bullseye

Blanco con una flecha en la mira.

I feel that this is a "are you a robot?" test. 😂 I guess it's for the icons 😉

[misaugstad]

I feel that this is a "are you a robot?" test. joy I guess it's for the icons 😉

Hahah it really does feel like that. Yeah it is alt text for the icons :)