Rating with Stars to a user in App


(Khan, Afroz) #1

Hi Team,

Is it possible to show rating with stars in app on the basis of user performance. Like :

• If a user completes 8 tasks out of 10, it should show **** (4 stars) against his/her name.
• If a user completes 6 tasks out of 10, it should show *** (3 stars) against his/her name.
• If a user completes 4 tasks out of 10, it should show ** (2 stars) against his/her name.

That would be very helpful for me if there is any work around.


(Clayton Sims) #2

Hi Afroz,

You can use Case List Calculations with an if() statement conditional to display a calculated output based on the user’s activity.

In most of these examples, the stars themselves are unicode characters that are supported on most phones like: :star: which can be directly copied and pasted into the output of the calculation.

-Clayton


(Michel Akkaoui - de Sousa) #3

Hi Khan and Clayton,

Another option is to calculate the rating in a hidden value from inside the forms and then use icons in the case detail to display the stars.

details here :
https://confluence.dimagi.com/display/commcarepublic/Adding+Icons+in+Case+List+and+Case+Detail+screen

  • If a user completes 8 tasks out of 10,
    the hidden value switch to “4stars” and the mapping target an icon showing 4 stars
  • If a user completes 6 tasks out of 10, it should show *** (3 stars) against his/her name.
    the hidden value switch to “3stars” and the mapping target an icon showing 3 stars
  • If a user completes 4 tasks out of 10, it should show ** (2 stars) against his/her name.
    the hidden value switch to “2stars” and the mapping target an icon showing 2 stars

The bonus with this method is that you can control the aspect of your stars, and you will have the same stars whichever device is used.

Cheers,

-Michel


(Khan, Afroz) #4

Thanks Clayton… I am putting this command

if(#form/count_in_percent < 60, ‘:star:’, ‘:star::star::star:’) but this is not working. output only shows :star::star::star::star


(Khan, Afroz) #5

Thanks Michel. Actually i want to make an start rating question and trying to use unicode :star: but in app it is not reflecting. it shows only unicode not star. Do u have any work around. I have used emojis also but it is showing only white star with a small size and i want to use a medium size star with pale yellow colour.


(Clayton Sims) #6

Hi,

This appears to be a peculiarity with the software we use for the forum or potentially gmail, which is replacing our raw unicode with markup.

Can you copy the Star character itself from here instead and try again? https://emojipedia.org/white-medium-star/

-Clayton


(Khan, Afroz) #7

Thanks Clayton for your support on this. I have used “Star” emoji https://emojipedia.org/white-medium-star/ in app but this doesnt give me fruitful result. it shows small and white Start while i am looking for Pale Yellow star with a big size. You can see the image here


(Clayton Sims) #8

Hi,

How these stars appear is a bit dependent on the phone, as the app just uses the native font rendering.

It might help to go to a page like this: http://xahlee.info/comp/unicode_stars.html on the phone itself and see which of these characters is displayed the most to your liking, and use that for your app.

-Clayton


(Michel Akkaoui - de Sousa) #9

This is exactly why I said that using icons instead of emoji will enable you to control the aspect of your stars…

Emoji’s aspect are based on phone android version / OEM’s software… Icons are more stable.

See this thread for examples of trials : Fun question: Any other text icons that work inside commcare apps?

-Michel


(Khan, Afroz) #10

Hi Michel,

i tried to using icons but it show very small star. Have u used any icons in this case and got a fruitful result ? what should be size ?


(Michel Akkaoui - de Sousa) #11

Hi,

Some documentation about icons in commcare : https://confluence.dimagi.com/display/commcarepublic/Icons+in+CommCare

I have used icons on several apps. I usually cut them at 50x50 pixels and this is enough.

example :

-Michel


(Khan, Afroz) #12

Thanks a ton Michel for your help. Icons with size 50x50 pixels are working. Now i have another query :wink:

Can we show text in colour on the basis of output conditions ? like if a user has not visited to a house for last seven days then his/her name should be shown as RED text


(Michel Akkaoui - de Sousa) #13

nop. it is not possible to color texts in Commcare. (could be a great feature by the way !)
But you can use another icon if you want ! (red flag, little chrono, etc.) You can add calculation in the mapping as shown in the example in the first link I’ve shared.

-Michel


(Khan, Afroz) #14

Thanks Michel for your continuous support. While using icons, the title is disturbed. in my case, in case list “Pregnant” title is somehow disturbed while using icons in case list. u can see blow image


(Michel Akkaoui - de Sousa) #15

Yes, it is not possible to adjust the width of the column when using icons… Usually, there is no titles because the icon is supposed to make sens without it.

If you only present the name and the icon in the case list, a workaround is to include a third column before the icon and leave it empty with just the title Pregnancy.

-Michel


(Khan, Afroz) #16

Hi Michel,

I have created a hidden value which is storing visit date of a user with formula “today()” .
now i want if the next visit date is after two days then it should show “Green icon” in case list and if user was not visited within that two days or crossed those two days then icon should be turned into red.

For example Now what i have done is that if next visit date is greater than today then it should show RED but it is not reflecting red icon and showing green icon.

image

kindly help me on that