Assessment 2
JavaScript Application
Due Date: 22 November 2021 12:00PM (Noon)
INFT 2065 UO Web Development
Overview
Your task is to plot current SA Drivers’ Licence data using pre-configured web services (utilizing jQuery with
ajax requests) to consume the data. You will need to use the jQuery JavaScript library to generate a graph
and several tables based on JSON data and be able to demonstrate and explain your JavaScript code
when asked.
Aim of the assessment:
To demonstrate your capacity to apply your knowledge of JavaScript to a practical task/problem.
Submission Requirements:
You must consume Ajax Data regarding SA Drivers’ Licences and present them on the Licences.cshtml
page as described in the requirements below. The criteria for the assignment are described in the
Marking section, below.
Due Date:
22 November 2021 12:00PM (Noon)
To complete the assignment, you need to undertake the following tasks, in the order described
below. Note that there are several elements which you must include for each task.
The Web Application
A web application containing the necessary database and Web API web services has been created for you.
See Assignment2.zip. Your task is to complete the Licences.cshtml page with the necessary table layouts
and graph using JavaScript (this can be done using plain JavaScript, or one of the available libraries: jQuery
or D3 V5.9.x+).
Two div elements are provided (id=”graphData” and id=”tableData”) to which you will need to
dynamically add new bootstrap layout and html elements as required using your JavaScript. Ensure that no
static/hardcoded HTML is added to the provided html
Task 1: Annual Drivers Licences [35%]
Begin by creating a horizontal bar graph of the data from the SADriversWebAPI Controller. (see Figure 1).
The Graph should display:
The Years on the y-Axis complete with an axis title
The number of Licence holders on the x-Axis complete with title
The graph should span half the available page width and be easy to read
When the mouse/cursor is hovered over a bar in the graph it should highlight a different colour
When a bar is clicked in the graph, it should remain highlighted and trigger the quarterly licence
stats for the selected year.
Figure 1 Sample Graph Format
The Graph must meet the following requirements:
1. This graph can be generated from div elements (or other suitable elements like svg if using
D3 v5.9.x+, NOT table or list item elements). To do this, you will need to become familiar with how
to use a “for-each” loop and how to create html elements and appendTo html. This will require you
to use the jQuery/D3 JavaScript library.
Start by designing your graph statically using plain HTML and custom CSS classes so that you
can determine the html design needed to implement the graph.
Once your “static” graph is in order, translate this to your dynamic ajax and JavaScript code.
Use console.log(“your text” + javaScriptVariable) to help you debug as you write the code. If
there is a problem with getting the web services working, use the console of the browser (F12 in
IE) and the network traffic in the browser to see if data is being sent and received.
2. The Graph should have the year and licence holder count clearly visible on the axes using a
suitable element (h4/svg text in the example). The units of both axes should be clearly indicated.
There is room for improvement in the example design!
3. The bars need to be scaled to consume the maximum available graphing space, i.e. use % not px
or the D3 scale functions. You will need to work out how to best offset the graph so that it doesn’t
start from zero (“0”) Licence holders – otherwise the number of Licence Holders for each year will be
hard to distinguish. The example graph starts from 500k Licence Holders. This value will need to be
dynamically determined using the available data properties and not hard-coded to 500k. You will
need to find the min and max values in the data and then create a suitable offset so the graph looks
good.
4. The colour of the bars are open to your decision but should look professional.
5. When the mouse is hovered over a year bar on the graph, it should be highlighted. When it
highlights, a tool-tip should clearly indicate that the bar can be clicked to view a detailed
breakdown of licence data for that year: “Click to view licence summary for year”
6. Should the Graph fail to load, the graph div should contain a standard error message.
Task 2: Quarter Table [35%]
When a year on the graph is selected, the quarterly breakdown (including Gender) of licence holders should
be displayed in a table to the right of the graph.
The table must meet the following requirements:
1. All data should be correctly formatted using toLocaleString() and right aligned for ease of reading.
At the bottom of the table should be an additional row showing the total number of licences.
2. When the mouse cursor is over a row, the row should automatically highlight, and remain readable.
You can do this using the pre-existing bootstrap classes if the colours are suitable or make your own
CSS selectors using the Content/Site.css external style sheet already linked to the page. If in doubt,
look up the bootstrap table information here: https://getbootstrap.com/docs/4.1/content/tables/
The row should provide user feedback that it can be clicked to view additional information.
3. Each time a different year in the graph is clicked, the previous table should be erased and replaced
with a new table containing the new data. The title above the table will also need to be updated
with the year that was selected.
4. Hovering over a quarter row should display a tooltip to the user with a meaningful message such as
“View age groups for 2018 Q1”.
5. Clicking on a row should highlight the row permanently until another row is clicked.
6. This table must be created inside the pre-existing element from the ajaxwebservice
data source with a timeout and error function. This can be done using any of the
jQuery approaches, but is probably most easily done using jQuery appendTo(). There must be no
hard coded html elements added to the page. All elements in this assignment must be added
dynamically using JavaScript/jQuery/D3 including CSS classes.
7. If the Ajax Fails, the entire table and graph div should be replaced with an appropriate error
message (e.g., “Failed to load Licence Data”). Feel free to include an image of your choice to
represent no data. No table or graph elements should exist if the request fails other than the
two divs provided.
Task 3: Age Group Breakdown [20%]
In this task, you will produce a details table below the quarterly that shows the different age-groups and a
count of licences held by each group relevant to the selected gender, quarter, and year.
Clicking on a quarter row in the annual licence table will generate a details table below the original table
that shows the different age groups and a count of licences for each gender. The table will need to have
an appropriate title that reflects the year and quarter chosen from the annual summary table. At the
bottom of the table should be an additional row showing the total number of licences. All numbers will
need to be right aligned for readability.
Figure 2 Showing the Licence data Breakdown
Additional Guide
The Web Services
Once you have your graph structure configured and made your decision on the JavaScript library to use
(plain JavaScript vs jQuery vs D3v5.9.x+), it is suggested you get started creating an Ajax call to the
SADriversWebAPIController web service and get the data to download to the page.
The relative URL for the web service is "/api/SADriversWebAPI". So, if you run the application in VS2019 and
your root URL shows up as: http://localhost:55968/ then
http://localhost:55968/api/SADriversWebAPI will return the list of years and total driver licence holders. An
example of some of the data returned is available in the ExampleJson/1_YearGraph.json file :
[
{
"year": 2018,
"records": 508339
},
{
"year": 2019,
"records": 513553
},
{
"year": 2020,
"records": 518605
}
]
The next step would be to work out how to read and loop through the data. In the JsonData folder are
various json files showing the data correctly formatted so that you can see the arrays and object through
their indentation. Use these files to help you write your jQuery/D3v5.9.x code.
Once this is working, start creating html elements and assigning them data before appending them to the
page.
Once you have your graph working, clicking on a year bar should navigate you to the next web service
controller used to generate the quarterly table: GetSADriversWebAPI(int year) using the URL:
/api/SADriversWebAPI?year=xxxx where xxxx is the year selected.
Clicking on a row in the generated table should trigger the next webAPI function for the age group table:
GetSADriversWebAPI(int year, string quarter) using the URL:
/api/SADriversWebAPI?year=xxxx&quarter=Q1 as an example.
Examples of the JSON returned can be found in the ExampleJson folder. 1_YearGraph.json provides an
example of the initial graph data. 2_QuarterTable.json provides an example of the quarterly gender JSON
data returned for the year 2020. Lastly, 3_AgeGroupTable.jsonprovidesexample age group data for 2018 Q1.
JavaScript (jQuery)
You must write your own JavaScript code which includes their Ajax requests to perform the above
tasks. As mentioned, you can use one or more of the provided JavaScript libraries to help you achieve the
various tasks.
CSS
The style of the bars and layout of the axis can be done using embedded style elements for testing at the
top of the page as necessary but then move these to the provided Site.css external style sheet. The exact
spacing of the bars is not important but the graph must look professional: clean, be neat and readable.
The statistical information and counts in the bars should be spaced away from the border to be easily
readable. The codes and years markers of the bars should be adequately spaced from the bars to not
overflow onto the chart. The number of style classes should be kept to a minimum unless required as part
of visual feedback during mouse hover or for animations. The use of JSON data in Class Names and the
use of ID’s will incur penalties.
For students who want to use D3 instead of jQuery:
If you wish to use D3 then version 5.9.2 has already been included for you.
Marking Guide
Marks will be allocated in the following areas:
SA Drivers’ Licence Year Graph [35%]
Ajax call to the WebAPI to pull the correct data
Creation of html elements using jQuery/D3v5.9.x, including incorporating data and css classes into the new html
elements
Presentation and use of bootstrap classes where appropriate
Use of jQuery functions over lengthy strings and concatenation
Appending the data to the existing data div.
Code to highlight bar of graph
Quality of graph layout and readability.
Colourisation of data
Timeout and error functions
Quarterly Table [35%]
Ajax call to the WebAPI to pull the correct data
Correct table structure (thead, tbody, tr, th, td)
Presentation and correct use of bootstrap classes.
Quality of JavaScript/jQuery/D3v5.9.x code used to generate the table.
Code to highlight selected row/quarter
Use of bootstrap classes where appropriate
Use of jQuery functions over lengthy strings and concatenation
Timeout and error functions
Age Group Detail Table [20%]
Ajax call to the WebAPI to pull the correct data
Correct table structure (thead, tbody, tr, th, td)
Presentation and correct use of bootstrap classes.
Quality of JavaScript/jQuery/D3v5.9.x code used to generate the table.
Use of bootstrap classes where appropriate
Use of jQuery functions over lengthy strings and concatenation
Appending the data to the existing data div.
Timeout and error functions
Code Quality [10%]
HTML Validation – is your generated HTML valid?
Optimization of jQuery and data being consumed
Strategic use of HTML structure, class names, data attributes, index information and foreach loops.
Reuse of attributes.
Let us know what you think
Post in Assessment Forums if you have discovered something you’d like to share, or if you have questions.