4/7/2021 Lab 8 https://mycanvas.mohawkcollege.ca/courses/56088/assignments/ XXXXXXXXXX/5 Lab 8 Due Mar 23 by 11:59pm Points 10 Submitting a file upload File Types dart Available Mar 17 at 12am - Mar...

Web application dart app using vscode


4/7/2021 Lab 8 https://mycanvas.mohawkcollege.ca/courses/56088/assignments/463997 1/5 Lab 8 Due Mar 23 by 11:59pm Points 10 Submitting a file upload File Types dart Available Mar 17 at 12am - Mar 26 at 11:59pm 10 days This assignment was locked Mar 26 at 11:59pm. Lab: Asynchronous Programming Introduc�on In this lab you are given some random data to use to generate objects and then display the data of the generated objects in both tabular & chart formats. This lab is another good practice for OOP, but more importantly it is an essential practice exercise to prepare for the coming test. Many of the component in the test are present in this lab. NOTE: The coming test will not include asynchronous programming or Futures. Accordingly, this exercise is a bit more challenging than the test. You can eliminate the asynchronous part of the methods to have a more realistic practice for the test. Grading: You will submit the main.dart file only. Don't edit the html or css files. All new elements or styling should be dynamically created in dart. Part A: Ge�ng Started Create a new Dart web application project. Download the data.dart (https://mycanvas.mohawkcollege.ca/courses/56088/files/9773671/download? download_frd=1) file. Copy this file to the web folder inside your project directory. This file contains the data to be used to create the objects. It has a variable named "data". It is a 2D list of 50 rows. Each row has 2 decimal numbers representing potential values for creating the program objects. To use data in this file; just import it at the top of your main.dart: import 'data.dart'; You should also include these styles in the head section of your index.html  https://mycanvas.mohawkcollege.ca/courses/56088/files/9773671?wrap=1 https://mycanvas.mohawkcollege.ca/courses/56088/files/9773671/download?download_frd=1 4/7/2021 Lab 8 https://mycanvas.mohawkcollege.ca/courses/56088/assignments/463997 2/5 html, body { width: 100%; height: 100%; margin: 0; padding: 20px; font-family: 'Roboto', sans-serif; } table, th, td { border: 1px solid grey; } You will need to modify only the dart code in main.dart & add the necessary package for drawing charts in pubspec.yaml. Part B: An improved Rectangle class (2 marks) The code snippet below provides an improved implementation for the Rectangle class you previously used in an earlier lab. class Rectangle { double width; double height; // the constructor builds the object only if we provide valid dimensions Rectangle(double w, double h) { if (w > 0 && h > 0) { width = w; height = h; } else { throw Exception('Invalid dimensions'); } } // perimeter method Future perimeter() async { // calculate perimeter var p = 2 * (width + height); // return perimeter only if less than 50; otherwise throw an exception if (p < 50)="" {="" return="" future.delayed(duration(seconds:="" 1),="" ()=""> p); } else { throw Exception('Rectangle is too large'); } } // TODO: add area method  4/7/2021 Lab 8 https://mycanvas.mohawkcollege.ca/courses/56088/assignments/463997 3/5 // return area delayed by 1 second only if less than 250; otherwise throw an exception } Copy this code into your main.dart then add an "area" method as instructed in the TODO comment. Part C: Data Visualiza�on using a Table (4 marks) Start by changing the text in the div with id "output" to 'Rectangles'. Use the given data to create a List of Rectangle objects. Since some data is invalid; you will end up with a list of less than 50 rectangles. Use this list to dynamically create a table in dart then add it to your html file right below the #output div. The table should have a header row with 5 cells (ID, Width, Height, Perimeter, Area) & 5 columns; the first is the row number starting from 1 the second & third display the width & height of the created rectangle the fourth displays either the perimeter of the rectangle or the error message if it's too large the fifth displays either the area of the rectangle or the error message if it's too large CHALLENGE: (unmarked; for practice only, not to be submitted) Add a div below the table that displays the following: Maximum and minimum perimeters Maximum and minimum areas Average perimeter & area Part D: Data Visualiza�on using a Line Chart (4 marks) Out of the valid rectangles that were created from the data; there are a few that were marked as "too large" due to either their perimeter or area or both. These shouldn't be included in this step. Create a Line Chart that has 2 data lines. The x-axis is the ID of the rectangle, while one line plots the perimeter of that rectangle & the other plots the area. Add this chart below the table. Make sure it displays well by adjusting its width, height & possibly customize it too. CHALLENGE: (unmarked; for practice only, not to be submitted) Add two horizontal lines to the chart representing the average perimeter & area values as calculated from the previous step.  4/7/2021 Lab 8 https://mycanvas.mohawkcollege.ca/courses/56088/assignments/463997 4/5 Lab 8 (1) Part E: Data Visualiza�on using a Pie Chart (Bonus) (2 marks) Out of the 50 possible rectangles we could have created from the 50 given pairs of dimensions; we ended up with 3 categories: 1. valid rectangles 2. valid rectangles with too large perimeter and/or area 3. invalid rectangles Draw & insert a pie chart representing the ratios of the 3 possible categories in percentage. Part F: Submi�ng your work Upload the main.dart file ONLY to the dropbox by the deadline for full marks ... PENALTIES: Failure to follow the submission instructions will result in a 20% penalty (-2 marks) Submitting an application with errors will result in a 20% penalty (-2 marks)  4/7/2021 Lab 8 https://mycanvas.mohawkcollege.ca/courses/56088/assignments/463997 5/5 Total Points: 12 Criteria Ratings Pts 2 pts 4 pts 4 pts 2 pts 0 pts Rectangle class 2 pts Full Marks 0 pts No Marks Table 4 pts Full Marks 2 pts Acceptable 0 pts No Marks Line Chart 4 pts Full Marks 2 pts Acceptable 0 pts No Marks Pie chart (bonus) 2 pts Full Marks 0 pts No Marks Penalties 0 pts No Marks -1 pts Full Marks 