Web App UI - HackMD

# Web App UI Anqi Wang, Weihao Chen :::success Codepen URL: https://codepen.io/aw3487/collab/wvjRLQL/5671bf85b4045e761a1409e2f5c0f3a1 ::: - Define our problem - > - To help pre-school kids (kindergarden age) learn quantitative differentiation via vitualizing numbers from 1 to 9 with illustration diagrams in an instructional game format. - Think about your application as a collage of components. - - Components users interact with > 1. Illustration diagrams represent each number by showing different amounts of objects on them. > 2. Answer boxes will be located below the diagrams which allow users to type their answers for the number each diagram represents. > 3. "Check" button will be underneath the anwser box. > 4. "Menu", "Counting Song", "Log in", and "contact us" Buttons. - Components that react to user interaction > 1. "Menu" button will ideally show navigation list which users can select and redirect to other math games. > 2. "Counting Song" button ideally will play background music by clicking to play or stop. > 3. "Log in" button will ideally pop out a small window for learners or their parents to log in to their accounts in order to record the learning progress. > 4. "Contact us" button at the end of the page will help users find developers' information. > 5. The right or wrong judgement will be on the pop-up window once the users type and submit the answer. - Think about the behaviors of your components and document how their BEHAVIORS/ACTIONS would unfold (if this was a working JS prototype.) - >- When the answers are all correct, the computer will record the answers. Then message jumps out and asks users whether they want to go to the next challenge. >- Hitting the "menu" button will allow users to select challenges which they have passed before to retrieve to. While those unlocked challenges will remind not clickable in grey. >- "Submit" button will change colors when user's answer is correct. >- Music icon in "Counting Song" button will rotate indicate the music is on. >- Clicking "Log in" button will jump out a form allow users type in their usernames and passwords. Sign-up entry will be next to it for convenience of creating a new account. >- After successfully logged in, users may view their profiles and achievements. >- Clicking the illustration diagrams will enlarge the images for better observation. - Describe step by step what the user does, then how the computer reacts for the most interesting aspects of your idea with specificity. - > - Users firstly will sign up for a new account or log in their accounts to record their process. But the guest mode is allowed for just experiencing the game without creating any account. "Counting Song" button at the top will play numbers related songs as background music that users can decide if they want them to be on. > - Then the users will start the challenge by observing each image and distinguish the number of animals in each image. By typing in corresponding quantative number in the answer box and hit submit button, the users will get automatic judgment that saying you are right if user's answer is correct or try again if user's answer is wrong in a pop-up window. Once the user completes all the questions on a page, the computer will record the answer and invite user to the next challenge. In the bottom of the website, there is a “contact us" button allowing users to contact developers for any question or suggestion. - Articulation Challenge (Extra) specificity is rewarded: - - Try to use DOM specific language like: parent, children, class, id, css, properties, values, etc. > - Clicking on the button element with unique id "info" will pop out a window about designers' information, which created by a Bootstrap Modal Form. > - Changing the font of "Log in" button by modifying font-family property's value with class name "log-in" via css. > - To add some images to help learners visualize numbers, we insert "img" element as the children of a parent div class name of "card". - Try to use DATA specific language like: boolean, number, string, array, object >- When the users enter their answers in the answer box, the computer will compare the type-in number with our answer book to recognize correctness and then inform users.This is a kind of Boolean object we think. - Please include a little bit of reflection on the process you went through - what did you learn, what was challenging, how do you think you need to improve, what are the next steps forward for you and your learning! etc. - > - When we try to figure out how to generate a pop-out window to indicate correctness for each question, we are stuck because we haven't learned any javascript yet. Fortunately, Lisa suggested us try to use alert which is one of the easy properties in javascript to solve our issue. Under her help and explaination, we successfully create the mechanism to check answers and give feedbacks. > - We also learned bootstrap is a great tool to help developer save time on creating complex formats and adding functions. Bootstrap can also be a foundation that developers can customize and create more beyond default bootstrap's content.