# MSTU5003 Project: Web App UI
### Group 6: Wentao Wu, Yifan Chen, Zhiyin Wang, Qinya Xu
<span class="link">:link: [Our Project Page](https://codepen.io/ww2640/full/poVQqLa) :link:</span>

---

# Description of Application & ***User Interaction***
### Introduction
For our project, we designed a web interactive toy to help users learn knowledge about coffee. This application consists of four sequential sections: origin, roasting, brewing, sharing. Following these sections, users will start to learn about the "Journey of a Bean -- How coffee travel from around the globe to their hand." At the end, users will be able to create their own unique taste of coffee and share to their social media.

Our target audiences are anyone who are interested in learning coffee. And we incorporate the idea of constructionism in the learning process.

### Step 1: Origin
At the beginning, users will able to select the origin of coffee on a world map. By clicking the yellow buttons which marked the location of countries, users can view the introduction of the coffee flavor produced specifically in that region. **Ideally when the user click the button for different regions, an interactive list will be appended to the bottom of the html section showing users all the different countries and coffee varieties in that region. The displayed coffee varieties may differ according to the region. Therefore we will use DOM to locate the interactive list and modify the content**. The purpose of this section is to allow the user to explore the abundant coffee world through interaction. After users select the variety that they interested in, by clicking the button "confirm variety" (right now is "confirm origin"), they will be able to select one unique coffee bean, which lead the users to the next section -- put this type of coffee bean into a coffee roaster. **Again, ideally we would not use anchor element to move around the webpage through `href = #id`, but instead would let the webpage totally change content to section 2 using Javascript function `nextSection()`. Also, a new variable called origin will be declared in the script and store the ID of the chosen coffee variety in the form of a number for later use**.

>[color=skyblue]Our current interaction in detail: When the user clicks on the button on the map, there will be a `aria-describedby=popover#####` added at the end of the button element, which enables the popover function. When the user hits the "confirm origin" button, html of the first carousel item (the map) changes from `div class="carousel-item active"` to `div class="carousel-item"`. After transitioning to the second carousel item (user's choice of bean), an `active` is added to the class of the sencond carousel item. The button "Accept This Choice" is an anchor element that has a href to the id of next section i.e.,`href=#roasterlevels`.

### Step 2: Roasting
Before clicking the red button: Start roasting, users need to play around with two parameters: heat and time, which represent the temperature of the roaster and how long the roasting process would be. **We will register a listener to heat slider's `OnValueChange` event and callback to a delegate "Change roaster color" with the slider value. As a result, the color of the roaster will vary correspondingly with the change in sliders to indicate the tempreture of the roaster. These two range sliders would each return a unique number to each variable in the Javascript. Once the user clicks the "Start Roasting" button, a function `roast(heat, time)` would be called taking in two parameters from the range sliders. Then, a canvas element will be appended below the "Start Roasting" button and through Javascript a graph simulating the change in coffee temperature would gradually be drawn (right now we are using an image to indicate the final result).** In our project, we use the full-city roast (210 - 221 °C) as an example. **But ideally, the `roast(heat, time)` function would return an object of `{roasteLevel: a string (e.g. "cinnamon roast"), roastQuality: another number}`**

Users can also learn more about the relationship between coffee flavor and heat/time adjustment by checking url "this website." Finally, users can confirm their choice by clicking the button "That's the bean I want!", which will lead them to the third section.

>[color=skyblue]Our current interaction in detail: We use collapse function of boostrap. When user hits the button "Start Roasting!," value of `aria-expand` changes from `false` to `true`, and a `class` is added to the end of button element to unfold the collapsed items (the heat graph and the second confirm button). At the same time, a `show` class is added to the end of the unfolded `div`. Like in the previous section, the button below the heatgraph is an anchor element that will direct to the next section.

### Step 3: Brewing
In this section, users need to first read and get a general understanding of each brewing method before choosing the one they think would fit their coffees the best. As users select their method, **A designated section for it will show up, this can potentially be achieved by assigning an ID number to each method's "Choose this method" button and use a `chooseMethod(id)` function to show the designated section**. In the new section, users are able to adjust temperature, time and grind size by moving the sliders. **Similar to the roasting section, the three sliders will also return three number variables.** We use Pour Over as our example here. **When the "Let's test it out" button is pressed, a function `brew(time, temperature, groundSize)` will be called and return an object with 2 properties: `{extractionRatio: a percentage number(16), totalDissolvedSolids: a number(1.5)}`. Then, another function `calculateScore()` will be called and return an object with 5 properties: `{aroma: score(number), body: score, balance: score, acidity: score, sweetness: score}`. The scores are calculated using the origin ID, 3 roast object values, and 2 brew object values**

>[color=skyblue]When the user clicks on any of the six buttons, the html of the first carousel item (the description of brewing methods) will change from `class="carousel-item active"` to `class="carousel-item"`, which disactivates the carousel item. This action will also activates the next carousel item by adding an `active` class to the second carousel item (the decision of brewing method). When the user clicks on the "let's test it out" button, the page will go to the next section because the button is an anchor element that has a href that linked to next section's id,`href=#sharing`.

### Step 4: Sharing
Finally, users create their own cup of coffee with the information of origin, roast level and brewing method according to what they selected. **The script will append information to the `<span>` element in the `.result-bean` class in this section in the order of origin, roast level and brewing method.** The coffee created by users will also get simulated scores **In Javascript, a pentagon statistics chart will be created using the five properties returned from the calculateScore() function and the corresponding scores will be drawn on the chart**. At the end, users can name and share their unique coffee flavor through the link to social media. **Before actually sharing, a Bootstrap modal will showup with a preview of the content being shared. The Javascript will dynamically change the content in the `.modal-body` to correctly reflect the user's decision.**

>[color=skyblue]Clicking on the social media buttons will give rise to a pop-up window. This is enabled by adding a `show` class to the pop-up window when clicking on the buttons.

## Reflection
- 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.
### Wentao Wu:
Figma is such an AWESOME tool for website planning. I have learned that with a sophisticated prior planning, designning webpage can be much more efficient. One challenge I faced was to actually think about how the user experience would be. How the flow of the website should go, how big the fonts should be, and so on. As a result, I have spent a ton of time making the website at least satisfactory to me. In the future, I would love to learn more convenient tricks for improving UX and learn JS that can make the website much more interactive.

In the technical aspect, I learned how to layout the cards while using the bootstrap grid system. This task is not as easy as it seems, because each BS cards have a pre-determined width, so when I tried to use `col-lg` or similar classes, the end result is not centered as it should be. Also, I managed to change the pentagon statistic graph to better fit our webpage. Reading the JS and modifying it is actually fun! As Lisa Lei requested, I have explained the JS part to my teammates. In addition, I also added many carousels in the webpage while manipulating the next button. By deleting the next button in the format and add the `data-bs-target="#originCarouselControls" data-bs-slide="next"` to the button I want, I managed to create a fancy animation simulating different steps in various sections.

### Yifan Chen:
I faced a problem in letting the location button scaling with the map picture in different screen width and height. To make sure that the button is in the right position in different screen width, I tried may approaches and finally find one that will work.

First, the map image is a background image of div and I restricted the the size using calc() function(Or just add an image with bootstrap class="img-fluid"). And the button is displayed abosolute and is anchored to the left-top of their parent. Next, use `left: 30%;`(map width equals parent's width so it's ok to set directly using `left`, but top-margin cannot use `top`) and`margin-top:calc(100vw * 0.7 / 1.8974);`(view width * desired relative position / (pic width/height)). As a result, the button will scale with the background picture.

During the process, I learned about the position property of CSS and some tricks in making responsive website. I think I need to improve the design of a website and how to use code to acheive the disired layout.

### Zhiying Wang:
I got a lot of hands-on experience on Boostrape during the process and I became more familiar with it. I learned some wonderful functions such as collapse function and using anchor element to direct users to the next page when clicking a button. In addition, during the collaboration with my group members, I found out the importance of adding a closing tag as soon as possible (even before adding the actural content) because it will affect people who are working on the later parts. However, I got frustrated with the layout of elements, such as how to center elements, how to put texts before slider, etc. During the class session, I learned how to put text before the slider using `label` before the `input` (I also figured out that slider was one kind of input element!). I plan to work on developing a more clear understanding on the visual structure of code, such as the formatting of blocks and the use of grid system to achieve desired results.

### Qinya Xu:
During the process, I learned many new bootstrap tricks, such as how to use Collapse to hide and show the content in order to make the "Start Roasting" button works. Also, how to create a range slider by adding html and css rules (https://www.w3schools.com/howto/howto_js_rangeslider.asp)
When building the second section, I faced a lot of challenges, even though I can build the lay out by using bootstrap's Grid system (container, row, column). It is difficult to create a nice, clear lay out for the section. Additional css rules need to be adjusted. Another challenge is indentation. As I went through the project process, I found that it is hard for me to keep the format of my code clear and accurate. I think what I need to improve is remember to use shortcut so I will not forget the closing tag and spend time checking. As a beginner of code learning, I think I need to spend more time exploring the bootstrap official websites and practicing on CodePen.

<style>
.link{
font-size: 2rem;
}
</style>