Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

COMP1111 Programming Gold 2021-22

Summative Assignment 1 Resit:

Client-side scripting

Markers: Suncica Hadzidedic ([email protected]) and Ryan Crosby ([email protected])

Expected workload: 15 days, 3-4 h/day => 50 h

Components marked: code, documentation

Total marks: 100

Weight: 40% of module mark

Coursework submission

Deadline	4 August 2023 14:00 UK time
Format	Via Gradescope: - README.txt with execution instructions - HTML, CSS and any media - client-side JavaScript - .eslintrc - Dataset - and JSDoc (out html)
Plagiarism, collusion	Students suspected of plagiarism, either of published work or work from unpublished sources, including the work of other students, or of collusion will be dealt with according to Computer Science and University guidelines - https://www.dur.ac.uk/learningandteaching.handbook/6/2/4/

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 the book / publishing domain, e.g.:

- Best selling books, highest rated books, Big 5 publishers recommended books, top independent publisher rated books

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:

- See examples of book datasets on: Search | Kaggle

- Alternatively, search online resources for other music datasets that correspond better to your website, e.g., on:

- AMiner; Registry of Open Data on AWS; Google Dataset Search; Awesome public datasets; opendatasoft; Microsoft Research Open Data

- 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 of your choice, e.g., books and authors, books and reviews

- 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 of your 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 of your website.

o Apply user interface/experience design guidelines, you can 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 of use, 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 of the source of original code and/or data (including licenses) were included.

4. Marking Criteria

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

	Mark          /100
1. Website functionality	40
2. Website design and development skills	40
3. Code quality	20

Please note that introducing more complexity to the design and development of your website will increase your mark. 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 of more than two types of interactive visualisations; use of more 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.

Testing environment. Your submission will be tested on:

§ Windows 10 with Chrome

§ Visual Studio Code

§ Bootstrap