Material Math MVP Issues Brainstorming

# Material Math MVP Issues Brainstorming ###### tags: `Material Math`, `Organizing Issues` # #6 Add a user profile page ### Why is this important? A user profile page lets the users create and have a profile for themselves. This information would be required at the backend level of the application for example when the user has to be presented with their stats. ### Is this urgent? Yes, since this page is the first step toward backend development of the application and building a database. ### Overview The profile page will display all the user settings. It will give them the ability to change their information. ### Tasks - [ ] Design a user profile page on [Figma](https://www.figma.com/file/tExg6nS5uSG1ZnUzJnAwkx/Prototype?node-id=0%3A1) - [ ] Get the design approved - [ ] Integrate the page in the app Information to be displayed/changed 1. Personal Information * Name * Email * Age 2. Account Information * Username * Password * Connected Accounts (e.g. Gmail, Facebook, Github) ### Labels Domain: User Experience Priority: Medium Type: Enhancement Role: UI Designer Role: UX Designer --- # #10 Animated Feedback for Correct/Incorrect Answers ### Why is this important? It is important to let the user know how they are progressing through their math practice. Animated feedback will help users subtly evaulate themselves while they are playing and practicing on how they are performing. ### Is this urgent? Yes, as it is the main way to let the user know if their answers are correct or incorrect while they are playing. ### Overview Animated feedback for correct/incorrect answers lets users know how well they are practicing while playing. ### Tasks - [ ] Select Lottie animations for correct and incorrect answers. - [ ] Implement the animations in the app. ### Labels Domain: User Experience Priority: Medium Type: Enhancement Role: UI Designer Role: UX Designer hacktoberfest-accepted --- # #12 Add a beautiful splash screen ### Why is this important? A splash screen acts as a beginning page for any application where the name and logo of the app can be displayed. ### Overview A beautiful splash screen will give a pleasant feeling to users as they enter the app. ### Tasks - [ ] Review the splash screen design on [Figma](https://www.figma.com/file/tExg6nS5uSG1ZnUzJnAwkx/Prototype?node-id=0%3A1) - [ ] Develop the splash screen - [ ] Integrate the splash screen in the code ### Labels Domain: User Experience Priority: Medium Type: Enhancement Role: UI Designer Role: UX Designer hacktoberfest-accepted --- # #15 Add a stats page (Frontend perspective) ### Why is this important? A stats page will give the user their stats concept wise so they can see how they are progressing in each concept. ### Is this urgent? Yes, as this will provide a frontend to display user stats. ### Overview Stats will be counted across all concepts, and we will present aggregated as well as individual concept stats on a stats page. ### Tasks The stats page should include a concept selector and the selected concept's stats would be displayed in form of aggregated and individual stats as: * Total number of questions attempted * Time spent practicing * Percentage of correct questions Tasks: - [ ] Create the design for the stats page on [Figma](https://www.figma.com/file/tExg6nS5uSG1ZnUzJnAwkx/Prototype?node-id=0%3A1) - [ ] Develop the stats page - [ ] Integrate the stats page in the code ### Labels Domain: User Experience Priority: Medium Type: Enhancement Role: UI Designer Role: UX Designer --- # #16 User gamification (not complete) ### Why is this important? A gamification aspect in the app makes users want to use it more and try and become better at it. ### Is this urgent? ### Overview This is done to encourage users to use the application more. * Day Streaks * XP Levels ### Tasks - [ ] ### Labels Domain: User Experience Priority: Low Type: Enhancement Role: UI Designer Role: UX Designer --- # #17 Post Practice session page (Merged with issue #22) --- # #21 Create a stats module to keep track of a user's practice stats (not complete) ### Why is this important? The stats module will provide a way to store all of the user stats so that they can be generated on the stats page ### Is this urgent? Yes, as this will be part of the backend to the application. ### Overview We'll create a StatsModule that deals with the logic and storage of user stats. This module will be used to display user stats on the stats page. The StatsModule will take care of: * Percentage of correct questions [#18 (closed)]() * Number of questions attempted [#19 (closed)]() * Time spent practicing [#20 (closed)]() ### Behavior When a user answers a question correctly, the stats module would behave as follows: - For the MathConcept and the Total Stats: - Update the count of total questions attempted - Update the time spent - Update the count of correct questions ### Tasks - [ ] ### Labels Domain: Dev Experience Priority: High Type: Enhancement Role: Software Engineer --- # #22 Display report after practice session ends (includes details of issue #17 as well) ### Why is this important? When the user finishes their session, it is important to show them the results of their session for which a report needs to be generated at the end of every session. ### Is this urgent? Yes, as the user would want to know how did they perform in the session and how their practice is going. ### Overview This report is displayed on the post practice session page after each practice session is over. This page shows the currently run practice session information as follows: * XP Levels gained in that round * Percentage of correct questions * Number of questions answered * Concept breakdown * Question breakdown ### Tasks - [ ] Review the post session report design on [Figma](https://www.figma.com/file/tExg6nS5uSG1ZnUzJnAwkx/Prototype?node-id=0%3A1) - [ ] Develop the post session report page - [ ] Integrate the post session report page in the code ### Labels Domain: User Experience Priority: High Type: Enhancement Role: UI Designer Role: UX Designer --- # #56 Add Hex question generator to the math engine (not complete) ### Why is this important? This will expand the concept base of the app from basic arithmetic to include more challenging concepts to practice. ### Overview Being able to mentally convert hex helps Computer Science students. ### Tasks For implementation details [Boltz's implementation](https://github.com/ArsalaBangash/Boltz-Android/blob/master/app/src/main/java/com/arsalabangash/boltz/practice/engine/HexGenerator.kt) ### Labels Domain: User Experience Priority: Medium Type: Enhancement Role: UI Designer Role: UX Designer --- # #57 Add Degree Trigonometry question generator to the math engine (not complete) ### Why is this important? This will expand the concept base of the app from basic arithmetic to include more challenging concepts to practice. ### Overview Practicing degree trigonometry questions in a challenging way is going to make these concepts easier for students. ### Tasks For implementation details [Boltz's implementation](https://github.com/ArsalaBangash/Boltz-Android/blob/7351e3c15a9a4344c4fb89e5ea480ce5fe3c3ddf/app/src/main/java/com/arsalabangash/boltz/practice/challenge/DegreeTrigChallenge.kt) ### Labels Domain: User Experience Priority: Medium Type: Enhancement Role: UI Designer Role: UX Designer --- # #58 Add Radian Trignometry question generator to the math engine (not complete) ### Why is this important? This will expand the concept base of the app from basic arithmetic to include more challenging concepts to practice. ### Overview Practicing radian trigonometry questions in a challenging way is going to make these concepts easier for students. ### Tasks For implementation details [Boltz's implementation](https://github.com/ArsalaBangash/Boltz-Android/blob/7351e3c15a9a4344c4fb89e5ea480ce5fe3c3ddf/app/src/main/java/com/arsalabangash/boltz/practice/challenge/RadianTrigChallenge.kt) ### Labels Domain: User Experience Priority: Medium Type: Enhancement Role: UI Designer Role: UX Designer --- # #62 The app doesn't cover the full height on mobile screens ### Why is this important? Mobiles are a primary device of use, and for a smooth and better user experience, the app display needs to be rendered correctly. ### Is this urgent? The app should cover the full height on mobile screens so that the users can have a complete view of it. This issue needs immediate attention. ### Overview When open in a web browser on mobile devices, the app does not cover the full height on the screen when the address bar is visible in the browser. ![image](https://user-images.githubusercontent.com/19757203/89965027-b52ade00-dc19-11ea-84f0-4a4923f9fcb7.png) ### Tasks - [ ] Modify the styles in the components and pages of the app to fix the height. Useful links: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html ### Labels Domain: User Experience Priority: Critical Type: Bug Role: UI Designer Role: UX Designer --- # #64 Feature Request: Add Github & Open Collective donation buttons to the app This issue needs to be closed. --- # #66 Feature Request: Add a loading indicator between page changes ### Why is this important? Users with slow connections currently have no way of knowing if the app is loading, which leads to poor UX if they are stuck looking at a blank screen. For this, loading indicators need to be placed between page changes. ### Overview Loading indicators between page changes will let users with slow internet connections know the app is in loading stage and isn't stuck. ### Tasks - [ ] Select a suitable loading indicator from Lottie animations that matches the theme of the app - [ ] Use this [vue plugin](https://github.com/SuperbuffNL/lottie-vuejs) to integrate the loading animations in the code. ### Labels Domain: User Experience Priority: Medium Type: Enhancement Role: UI Designer Role: UX Designer hacktoberfest-accepted --- # #67 Refactor: Add Pre-Commit Hooks to enforce code quality Need explanation on this ### Why is this important? ### Overview ### Tasks ### Labels Domain: Dev Experience Type: Maintenance Role: Software Engineer hacktoberfest-accepted --- # #84 Refactor: use vue-svg-loader for all SVG icons Need explanation, also where is PR #83, #79 ### Why is this important? All the SVGs in the app would be optimized with cleaner code and faster load times for the users. ### Overview `vue-svg-loader` is currently being introduced in PR #83. It treats all SVG files as Vue components, and calls `svgo` in the build step to optimize all SVGs, greatly improving load times. This means cleaner code (no more disgusting 10-line long SVGs in the middle of Vue components) and faster load times for the end-user. ### Tasks - [ ] Identify all SVG assets used (e.g. difficulty icons in #83, donation icons in #79) - [ ] Replace them all with separate SVG files and use vue-svg-loader in all component files ### Labels Domain: Dev Experience Type: Enhancement Role: Software Engineer --- # #85 Design Feedback: Simi from Design Buddies Separate issues for feedback given here exist. However, new issues that need to be created are: - Where to put a short description of the app and whether to put it or not. - The streak resets but the user may or may not know about it. For this either make the streak icon bigger or add an animation or a motion (like a jolt) when a streak is added or removed. ### Labels Domain: User Experience Type: Enhancement Role: UI Designer Role: UX Designer --- # #86 App desn't render correctly on Chrome Galaxy S9 Preview Need explanation on this ### Why is this important? ### Overview ### Tasks ### Labels Domain: User Experience Type: Bug Role: UI Designer Role: UX Designer