soju0928
commented
5 years ago Problems & Solutions
- I encountered one problem for the bar charts of the ranking page. I am trying to use the Grid component from Material UI to build the bar charts. I have created three blank grids. But I am not familiar with React.js enough and I don't know how to separate each grid and set different heights and colors on them. Then I sent an email to Mr. Seb Zuloag and he gave me some help. This is the feedback from Mr. Seb Zuloaga: https://deco3500-2019.slack.com/files/UL2TXCXK4/FP8011FPV/index.js?origin_team=TKWQTN6HK He used viewpoint height (height: 35vh) and ContainedButtons function to change the style of each bar. He also reminded me to modify some repetition in the CSS part.
- I tried to assign each component on the page in their appropriate locations. But when I zoom in or zoom out the web page, they could not stay at their original locations. I used width: 100% and position: absolute in the CSS but it didn't work. I sent my React.js file to Scott and he adjusted these two pages into a great situation.
We adjusted the text content on the ranking page and only set three top majors for students:
Hand drawing for the ranking page:
A new page in Figma:
According to the feedback of our participants, someone said that he needed to see the personal ranking score to motive him to work on these questions.
Therefore, we added the personal score to let users see their individual results directly.
And we considered that if there were too many majors in one lecture,
Description
After the group discussion, we considered that the Invision Prototype might be too complicated to use and didn't match our final concise design concept. Therefore, we created a more precise Figma prototype and used it to do the evaluation test. Then we built different web pages by using Codesandbox and React.js individually. I was assigned to create the login page and ranking page of the student screen.