# Manual

This manual servers as a simple guide for the two key flows currently available in the ASMT project.  
Seeding Data and Viewing Analytics.

## Urls
[Frontend](http://localhost:3000/)  
[Swagger/API backend](http://localhost:3001/)  
[Mongo-Express (mongodb viewer)](http://localhost:8081/)

## Seeding Data
Visit the `Swagger/API backend` link above.  
From here click on `Interactive API Doc!`  
![backend_home](pictures/manual_backend_home.png)  
This is the swagger api documentation page. This page is the result of the `api.yaml` in the backend project and creates a convenient frontend to interact with the backend API. In this case we want to seed data, that will be at the bottom of this page under the **Seed** header.  
![swagger_home](pictures/manual_backend_swagger.png)  
From here you can simply click on the `/seed` or `/seed/clear` items and you'll be presented with a breakdown of the parameters sent and the ability to try it out.  
![swagger_seed](pictures/manual_backend_seed.png)  
In this case click on "Try it out" after selecting `/seed`, this converts the payload preview to an editable text box where you can modify the parameters as you see fit.  
![swagger_try_it_out](pictures/manual_backend_try_it_out.png)  
Each one of these counts defines the amount of data to be created **per course**. (viewInstanceCount will randomly select a value from 1 to the parameter for randomness **per user**)  
After setting the properties to your liking, simply click the blue execute bar below and the request will execute.  
![swagger_execute](pictures/manual_backend_execute.png)  
After this complete you can navigate to the `Frontend` or `Mongo-Express` to see the data!  
![mongo_express](pictures/mongo_express.png)
![mongo_express_data](pictures/mongo_express_data.png)

## Viewing Analytics
Visit the `Frontend` link above.  
Select "Courses" from the top bar.  
![courses_link](pictures/manual_frontend_main_page.png)  
Select a Course from this page  
![select_course](pictures/manual_frontend_select_course.png)  
After selecting a course you are brought to the Course Details page.  
Here you can select a lecture as well as view Course level information.  
![select_lecture](pictures/manual_frontend_select_lecture.png)  
After loading, you will be presented with the Lecture Details page.  
Here you can view Lecture and Student level analytics specific to this lecture.
![lecture_details](pictures/manual_frontend_lecture_detail.png)  
Outside of the text data, you are able to hover over the heatmap and see the ranges for the data you are hovered over.
![lecture_details_heatmap](pictures/manual_frontend_lecture_detail_heatmap.png)  

At any point while moving through these page, you can use the breadcrumbs above the page content to move back to the course, lecture, or home views.
![breadcrumbs](pictures/manual_frontend_lecture_detail_breadcrumb.png)