Head Judge Screen

I’m struggling to finish up the head judge screen this week and I’m facing few problems as well. I managed to assemble necessary information such as absolute score, comparative score and each judge’s scores for the screen

At first, I’m having a problem to display scores on the screen because I wanted the scores to be displayed in progress circular with color according to gsb function and having tooltip function as well showing scores if the performance is multi-piece performance. For example, the tooltip will display (85,90) when the user clicked on the score that has multi-piece performance. For multi-piece scoring, the score that displays on the screen is the average score of multi-piece and that’s the reason why tooltip function is needed because it will show the actual score of the performance. Gsb function colors are listed below.

• amber => 85
• blue-grey => 75
• brown => 65
• white => 0

The problem was how to combine this two functionality (progress circular with color and tooltip). For a beginner like me, yeah it’s a little bit confusing but I managed to do it hehe sorry for being slow. There is another problem which is the judge’s score is overlap with each other. I keep finding a solution to this problem because I think there is a problem with my layout or something but when I told Dr.Shawn about my problem, he gets mad. This is because I didn’t put <td> (html table) at my code and that’s the reason why my information overlap with each other because there are not in their own data table. Aiyoo, why I’m so silly simple thing also I can’t think huhu.

Besides the absolute score, comparative score and each judge’s score on the screen, there are two extra columns for action and add the prize. For action, the function is the judges can choose whether the performer deserves the gold medal, silver medal, bronze medal and no medal. I decided to make the action itself automatically select the medal for the performer based on the absolute score of the performer but it can be manually changed by the judges. The absolute score of each performer is the sum of scores given by each judge divide with the total of the judges so it shows that the absolute score is the overall picture of the scores of the performance. For add prize, the function is the judges can choose whether the performer deserves the 1st place,2nd place, 3rd place, custom prize and the special prize. After discussing with Dr.Shawn, we decided to combine this two function into one which means for action column there will be add prize as well and for making it more attractive floating action button component which is speed dial is used.