# MSTU5003 PROJECT 001 - Web App UI
**Project Guidelines**: https://docs.google.com/document/d/1TqnLwP8BjxeIYZ5cK4LfatKpQaSH_Qz6c17MGXbubyE/edit

**Team**: (Alex) Yixuan Xu, Chenyou Wu
**Our Codepen**: https://codepen.io/ax2158/pen/porgGwG

## Ideation
**Audience**
Elementary school children who is going to school in person during Covid.

**Problem**
A lot of Covid precautions are often delivered to parents or teachers. However, children who are going back to school lack adequate Covid training and practices. We want to also remind children (who are going to school in person) of some important Covid precautions and have an informal self-assessment.

**Solution**
Our solution is a playful self-assessment web app located at the end of a larger Covid training module. This can help them develop an understanding of how to protect themselves from COVID-19 when they return to school.

**Goals**
* Helping students self-assess how well they remember the Covid precautions advice they recived.
* Provide opportunities for students to observe, experiment and infer the correct precautions. Students will be aware of the basic self-protection guidelines even if they forgot the content provided in the previous trainings.

**Brainstorm Process**
https://miro.com/welcomeonboard/V3c1bEVWRWJjNUFuQXJUM0V6aDZRMDE2UUZNbFUzaElHWlU1eHFQc1JaQmIwcWNIbVlKRE9wM3BRcHBpdU9MenwzMDc0NDU3MzY0MDE5MTUyOTMw?invite_link_id=455130309300

**Wireframe**
https://www.figma.com/file/gJegF8hFSgMYmn8fg09tl7/MSTU5003-Project-1?node-id=0%3A1

## How the Code Works
In this project, we assume that the user/learner are using an LMS, and has already completed some previous learning modules about Covid. Now, they are at a final self-assessment stage. They landed on section 1, a `section` element with id `section1`.

**Section 1**
1. User sees an arrow image bouncing up and down, suggesting them to move the mask image (in an HTML canvas) upwards.
2. When the user hovers over the mask image (in the HTML canvas), the mouse display changes into an up-down arrow to further indicate that they can move the mask image up and down.
3. When user drags over the mask image up to a position where the mask image covers the nose of the face image, the face image is now switch to a smiley face image. The bouncing arrow image's `style.display` is also set to `none`. No more interactions with the canvas is allowed.
4. User reads the question and answers in the`<form>` below the dragging activity.
5. User clicks on one of the radio button`input`, and a modal overlay will show up. This is done by setting the `onclick` attribute of all the radio button inputs to a function called `displayModal(arg1, arg2)`. We pass two arguments into this function: 1. whether the answer is `true` or `false` and 2. the current section number. This function then change the style display of a `div` with id `modal` from `none` to `block`.

**CASE Wrong**: When user clicks on the wrong radio button`input`, the `onclick` function will pass `false` and the current section number. When it's `false`:
* a sound will be played indicating the wrong answer
* the modal content's `innerHTML` is set to be a non-happy emoji
* the display of the try again button will be set to block, while the display of the next button is set to `none`
* When the user clicks the try again button, a `retryCurrentSection()` function will run. Using this function, the modal `div` display will be set to `none` and disappear. Whatever answer the user selected will be reset. And the user is now able to select an answer again.

**CASE Correct**: When user click on the right radio button`input`, he `onclick` function will pass `true` and the current section number. When it's `true`:
* a sound will be played indicating the correct answer
* the modal content's `innerHTML` is set to be a happy emoji
* the display of the next button will be set to block, while the display of the try again button is set to `none`
* When the user clicks the next button, a `toggleNextSection(nextSectionNum)` function will run. Using this function, the the modal `div` display will be set to `none` and disappear. Then, the current `<section>` display will be set to `none` and the next `<section>` with id `section2` display will be set to block. Note: we automate this for every section progression by doing `section+nextSectionNum.toString()`.

**Section 2**

1. User sees an arrow image bouncing left right, suggesting them to move the girl 2 image (in an HTML canvas) to the right.
2. When the user hovers over the girl 2 image (in the HTML canvas), the mouse display changes into an left-right arrow.
3. When user drags over the girl 2 image to the right, at a position where the girl 2 image is at 6 Feet text, the 2 girl images is now switched to 2 happy girl images. An additional confetti image will also be displayed, indicating success. The bouncing arrow image's `style.display` is also set to `none`. No more interactions with the HTML canvas is allowed.
4. Now, the user does similar actions as explained in section 1, clicking on one of the radio button inputs.
5. Refer to above.

**Section 3**
1. When user progresses to `<section>` id `section3`, they can watch an `<iframe>` embedded YouTube video about handwashing. There is a preset start and end time for this video.
2. Now, the user does similar actions as explained above, clicking on one of the radio button inputs. Note that here, when the modal pops up, the YouTube video `iframe` embed will be stopped and reset by JS.
3. Refer to above.

**Section 4**
1. When user progresses to section 4, they can look at a graphic and text.
2. The user then does similar actions as explained above, clicking on one of the radio button inputs. A modal overlay will pop up indicating success or fail.

**Progress Indicator**
* As indicated in previous sections, there is a progress indicator at top that comprises of 4 circles, indicating that there are 4 questions.
* The four circle `<span>`s share a class `.dot`. And everytime the user reaches a new question, a new circle will have a class `.dot-done` added to it, changing its background color from grey to blue.
* Note that at the final section (section 5), the progress `<div>` display will be set to `none`, indicating that the user has completed the training.

**Section 5**
1. When the user correctly answers all previous 4 questions, they reaches section 5, the user can see an animated svg that says congratulations dropping down.
2. User can click on "Download My Certificate" `<button>`, and then they can be prompted to download a PDF of their completion certificate. (We did not make a PDF so when you click it, an alert will show up.)

**(Non-Functioning) Navigation Bar**

* A `<nav>` bar will stay on top as user progresses through the five sections.
* This navigation is just to indicate that this activity is a part of an LMS training, but it's not a main interaction that we emphasize in this project, so we did not write them in JS comprehensivly. If you click on an element in the nav bar, alerts will show up to indicate what they do.
* On the top right, it's a logo for an elementary school. If the user clicks on the logo, it should take them to the main page of the LMS.
* On the top left, it's a dropdown menu button with the user's name. If the user clicks it, a dropdown should show up and it will show the different settings for the user in an LMS.
* Below the navigation, it's a link where if the user clicks on it, the page will jump to the overall training module homepage.

## Our Reflections
We took a challenge in this project and try to achieve some interesting interactions with JavaScript. It was fun but challenging!

This coding process was full of trials and errors and took a lot of research, for example:
* We noticed that initially in section 3, when we start playing the YouTube video, and then click on an answer, that video doesn't stop playing. After more research on YouTube API and StackOverflow, we found a trick that we can reset the `src` of our iframe to the initial when user interact with the form in section 3.
* Initially, we tried to do the dragging activities in plain HTML CSS JS. It was super difficult to calculate the image positions in plain CSS and do mouse dragging interactions. After some trials & fails, Alex suggested a workaround using P5.js libary, which creates HTML canvas for our dragging activities. It worked great and turned out looking great.
* In order to create modal overlays, we initially have different`div`s that have class`modals` in every single one of our`<section>`. The code was really redundant and long. After some testing, we realized that we can pass 2 arguments into our `onclick` attribute: 1. one to check if the currect user selected answer is `true` (correct) or `false` (incorrect), and 2. the other to pass the currect section number. In this way, we reduced our code to contain only one single modal `div`! And then we can dynamically change that single `div` according to the information we pass in.

**Our Collaboration**
As a beginner programmer, Chenyou learned a lot from Alex's good work in programming.
* Kept the structure clear by making full use of elements.
* Loaded fonts in settings.
* Efficiently add icons by adding external stylesheet: Font Awesome.
* Learned `display` properties systemically in order to layout in various ways.
* Applied javascript trigged HTML attributes to make the page more interactive.

Our brainstorming/design sessions together were really helpful. While Alex has a bit more programming experience, Chenyou has more teaching/learning design experiences. Therefore, we can provide different perspectives and complement each other and learn from each other in this process. We also together redefined our audience/context for this project and made our interactions more meaningful.