Q1. Department of Mathematics — Web Application [6 marks]
Two new logical sections are required for the Mathematics department’s single-page web application: a Courses section that contains a list courses that the department offers, and an Infographics section that contains just a heading
named Infographics — this section will feature future infographics planned to be published by the department. A user should be able to switch between the two sections and viewing a section should only show the information relevant to that section.
The list of the mathematics courses are provided by the endpoint https://api.test.auckland.ac.nz/service/courses/v2/cour ses?subject=MATHS&year=2020&size=500 Links to an external site.. Include as much relevant course details as you can.
When you are able to successfully display the list of courses, add a further interaction to the courses: when a user selects (clicks/touches) a course, fetch the course timetable and display this to the user. Start with a simple alert to display the information, and come back to look at better ways of presenting this after completing the other sections of this assessment. The
course timetable is available from the
endpoint: https://api.test.auckland.ac.nz/service/classes/v1/class es?year=2020&subject=MATHS&size=500&catalogNbr={catalo gNbr} Links to an external site. where {catalogNbr} is obtained from the course list. For example, 162 is the catalogNbr for MATHS 162.
You are not allowed to use loops for processing collections of items. Instead, you must use the forEach (Links to an external site.) method of JavaScript arrays.
Please note that you are not allowed to use any libraries or frameworks. Please keep your style (CSS) and script (JS) external. You will be required to submit these as separate files.
Please don’t use a CORS proxy when one is not required. Using proxies unnecessarily creates additional latencies and hotspots. There will be penalties if you used one when not required. Hot-linking to resources (such as images and vCards) do not require the use of a CORS proxy. The endpoints to get the list of courses and class schedules do NOT require CORS proxies (why?).
If you need to use a CORS proxy and if you are working on a Windows device, please consider using one on your local machine — a CORS proxy runnable on Windows is available to you.
If you have no access to Windows OS, or if you cannot get your local proxy to work, use one of the CORS proxies provided at:
1. https://cws.auckland.ac.nz/cors/CorsProxyService.svc/prox y?url={URL}Links to an external site.
2. http://redsox.uoa.auckland.ac.nz/cors/CorsProxyService.sv c/proxy?url={URL}Links to an external site.
Note that the URL, in the context of these CORS proxies, must be URL-encoded (Links to an external site.) (why so?).
Local CORS Proxy on Windows OS
Please download from Canvas a copy of the CorsProxy. This is available from Files – Part 1 Resources. Extract the service to, for example H:\CorsProxy, and run the following command on Windows Powershell:
& “C:\Program Files\IIS Express\IISExpress.exe” /port:8181 /path:H:\CorsProxy
If this worked, you will now have a local CORS proxy running.
See http://localhost:8181/CorsProxyService.svc/help (Links to an external site.). You can test if the proxy does work by going to http://localhost:8181/CorsProxyService.svc/proxy?url=https:/ /unidirectory.auckland.ac.nz/rest/search?orgFilter=MATHS (Links to an external site.). If you check the response from this URL (e.g., with W3Client or simply F12 on your browser), you will see the HTTP header Access-Control-Allow-Origin: * (while the original un-proxied URL will not have this header).
Q2. Department of Mathematics — Infographics [4 marks]
The mathematicians would like to showcase in
their Infographics section an infographic displaying average
lecture attendance data in the previous 7 teaching days. The data is dynamically sourced fromhttps://cws.auckland.ac.nz/qz20/Quiz2020ChartService.svc/ g Links to an external site..
The data is supplied as a percentage — the percentage of the students attended the lectures across all of the lectures in Mathematics. The range of the data therefore will always be within 0 and 100 (inclusive) and the data will always be positive integers. In the infographics, each 10 should be represented by a full logo of Mathematics. Parts of 10 should be represented by a partial logo. For example, if a percentage is 53, then the corresponding chart element will have five complete logos to represent 50, and a 0.3 fraction of the logo to represent the remaining 3. The example below illustrates a possible infographics for the data [20, 2, 80, 95, 53, 40, 51].
You can use a horizontal or vertical bar chart as you see fit.
Add to the Infographics section a dynamically-generated SVG chart of the infographic representing the data you fetch from the server. If a user refreshed your Infographics section, they should be able see the changes in data, if there is any.
For testing purposes, please display the data you sourced from the server alongside the infographics — for example, below the chart.
Here are some potentially useful pieces of information.
The
have for this assessment, we will not entertain any extension or additional time. Please manage your time well. The assignment dropbox allows multiple submissions, and it is the latest submission that is considered for marking. Therefore, it will be safe to submit versions well-before the dropbox closes. We will not be able to consider any other forms of submission than dropbox submissions.
Please submit to the Assignment Dropbox Links to an external site. the following items.
1. The HTML file (called UPI.html where UPI is your UPI).
2. The CSS file (called UPI.css where UPI is your UPI).
3. The JavaScript file (called UPI.js where UPI is your UPI).