COMP1111 Programming Gold 2021-22

Summative Assignment 1:

Client-side scripting

1. Learning Outcomes

Subject-specific Knowledge

    Interaction between JavaScript programme and the Document Object Model (DOM).

    Using control statements to loop and make decisions.

    Knowledge and understanding of good programming practice (e.g. reuse, documentation and style).

Subject-specific and Key Skills - students will be able to demonstrate:

   an ability to realise solutions to problems as working JavaScript programs

   an ability to apply reuse by exploiting predefined components

   an ability to use software tools related to programming (e.g., web frameworks)

   an ability to communicate technical information.

2. Outline of requirements

In this coursework you should demonstrate your client-side JavaScript skills by designing and developing a website/web application for one of the following domains:

    IT start-ups

    Climate change

    Fashion industry (e.g., sustainability, designer’s web portfolio, online shop for clothing, fashion news, child labour, etc.)

Section 3 provides details about the requirements. Here is an overview:

I.  Select one domain and a dataset for your domain

    preferably JSON, but CSV is acceptable.

II.  Create HTML

    preferably in single page format

    pay attention to user interface design – CSS.

III.  Design web service and implement it in JavaScript. Demonstrate knowledge and skills in:

    control statements, objects and functions

    DOM and data visualisation (preferably D3/SVG).

IV.  Apply good programming practices by:

    using tools that support software development, e.g. web frameworks.

    writing documentation - by using JSDoc

    accounting for code quality.

3. Instructions

Choose a public dataset (or create one) that fits your website’s aim and target audience.

    Find example datasets on:

-    https://github.com/awesomedata/awesome-public-datasets

-    https://msropendata.com/

-    https://www.kaggle.com/

-    https://registry.opendata.aws/

-    https://toolbox.google.com/datasetsearch

-    https://www.aminer.cn

-    Or other sources you find on the web.

    To make it easier on yourself, choose a smaller dataset, or reduce the dataset size.

    Preferably, convert (the whole or part of) the dataset to JSON.

Website functionality:

-   The content of the website should mainly be presented as interactive data visualisations using the data you have selected.

-   Use the selected dataset to manipulate two objects/entities ofyour choice, e.g., news articles, designers, product items, locations, events, places, comments, etc.

-   Input interface - user should be able to input information (search, input text, select from options, etc.) that will update (e.g., filter) data visualisations.

-   Output interface – visualise the selected objects’ data with two different types of          interactive data visualisations. These could be any visualisations ofyour choice, some basic examples are:

o bar or pie charts (aggregating data per e.g., items, year, product, location, etc.);

o line graphs for trends (e.g., viewing trends over an x period of time).

Website design and development skills:

-   Design: Your website must have a clear purpose/aim which is explained/highlighted on the main/home web page.

o The website should preferably be in a single/one page style. Both input and output should be appearing on the same web page ofyour website.

o Apply user interface/experience design guidelines, you can refer to refer to: https://www.usability.gov/what-and-why/user-interface-design.html and

https://www.interaction-design.org/literature/article/user-interface-design-

guidelines- 10-rules-of-thumb. You should primarily focus on:

    usability – ease ofuse, intuitiveness

    responsiveness - adjusting for different devices (e.g., laptop and smartphone) and window size browsing.

-   Development: Demonstrate skills in and use of:

o control statements

o objects and functions

o DOM

o visualisations/graphics - D3 and SVG

o embedding/importing data from JSON/CSV

o HTML+CSS (compliant with HTML5)

o website development tools, e.g. Bootstrap framework.

Code quality:

-    Evaluate the quality of all your code by using ESLint.

-    Fix the identified errors.

o Use the following to configure .eslintrc.js module.exports = {

“extends”: “standard”,

“rules”: {

“semi”: [2, “always”],

“indent”: “off”

}

};

-    Document your code with JSDoc

o Usability: Main methods and parameters were documented.

o Clarity: Enough detail was provided to use the code and maintain it.

o References and acknowledgment ofthe source of original code and/or data (including licenses) were included.

4. Marking Criteria

The distribution ofmarks for Assignment 1 is presented in the table below.

Please note that introducing more complexity to the design and development of your website will increase your mark. For the first three (1-3) marking criteria, your work will be evaluated using the following scale:

1.    Fail (<40) – most of the basic requirements were not met; there are major errors in the website’s functionality.

2.    Approaching expectations (40-59) - basic requirements were mainly met, with some issues in the design and development methods, and some minor functionality errors are present.

3.    Meeting expectations (60-79) – all the basic/mandatory requirements were met; the website is fully functional.

4.    Exceeding expectations (≥80) – the website is fully functional; however, beyond the basic  requirements,  more  complex  and/or  creative  solutions  were  implemented, including, e.g.: use and processing of larger datasets; manipulation of more than two objects; implementation ofmore than two types of interactive visualisations; use ofmore complex and creative visualisations/graphics (e.g., star-burst, interactive maps, etc.); programming skills in JavaScript classes with constructors, prototypal inheritance, code reuse;  very  detailed  documentation,  explaining  all  the  methods  and  parameters; implementation of additional UI design guidelines.

Continuous participation (criterion 4)

10%  of your  coursework  mark  will  be  derived  from  your  on-going  participation  and engagement in the module’s activities and tasks, including: formative assignment, peer review, in-class tasks, group discussions. Participation mark components and their weight are:

Marking:                                   Submitted (1); not submitted (0)

Components                                Weight

35%

25%

40%

bonus