E Projects

Last updated: 2024-07-21 15:48:13

E.1 Overview

The course grade will be partially (see Section D.1) based on two projects (one in Semester A, and one in Semester B). In each project, the students will develop a website based on the course materials:

  • Project 01 (Chapters 1–4)—A web page with a list of items that you can filter interactively (Section E.3.1)
  • Project 02 (Chapters 5–8)—A web map displaying a GeoJSON layer with symbology, legend, popups and map description (Section E.3.2)

E.2 Data (for Project 02)

Project 02 has to display a vector layer that you chose in agreement with the instructor.

Each group will choose one layer that has the following:

  • Either a points, lines or polygons layer
  • Has at least one text or numeric attribute (property)
  • Approved by instructor before submitting the first exercise

The layer should not exceed 7 MB in size (uncompressed)!

Before submitting the project, the data needs to be approved by the instructor. This can be done by e-mail or in class. It is your responsibility to make sure the data source was approved. Submitted project using unapproved data will not be accepted!

Some ideas for data sources:

E.3 Project requirements

E.3.1 Project 01

  • Content: A web page displaying a list of items.

  • You can’t use any JavaScript libraries.

  • Submitted files:

    • HTML, CSS and JavaScript code, in one index.html file
    • In case you choose to prepare a list of images (see below) loaded from local image files, then you should submit a .zip archive containing the index.html file along with the image files. You are welcome to confirm with the instructor whether the files are arranged correctly, before submission.

  • The website should display a list of items:

    • The items may be ordered or unordered list items, paragraphs, images, etc.
    • You can choose any topic you like for the items: places you’ve visited, courses taken at the university, interesting movies or books, car models, etc.
    • The contents of each item need to be dynamically constructed from an object defined in your script. That is, the list should be initially empty, and the list items should be constructed automatically using the object elements (see 4.11).

  • The website should contain a title and a description. The description should specify:

    • What are the items in the list?
    • Who is the author of the list? (your name)

  • Add at least two CSS rules to your website. The rules must have an effect on the website appearance (i.e., the website will look different with and without each of the rules). For example, you can specify different font sizes, colors, positions, etc.

  • See Grading (Section E.5) for other aspects to be aware of in the submission:
    • Include JavaScript code comments
    • Make sure JavaScript code does not produce any errors
    • Make sure there are no layout issues

E.3.2 Project 02

  • Content: A web map displaying a GeoJSON layer with symbology, legend, popups and map description.

  • The web map must be created with the Leaflet library.

  • You can’t use any JavaScript libraries except for Leaflet.

  • Submitted files:

    • HTML, CSS and JavaScript code, in one index.html, or in combination with .css and .js files
    • A .geojson file with the GeoJSON layer(s) loaded on the map

  • Note that the GeoJSON layer loaded on the web map needs to come from a separate valid GeoJSON file provided along with the index.html file. (It should be possible to open the file in a GIS software)

  • Make sure you use a relative file path for loading the GeoJSON file(s), and any other resources. For example, if the file is in the same directory as the index.html then use just the GeoJSON file name. Using an absolute path is incorrect, because the web page will not work on a different computer.

  • The GeoJSON layer needs to have a variable style based on its properties (i.e., symbology).

  • The layer needs to be associated with popups giving a summary of all or some of the properties for each feature.

  • The map must have a legend, in agreement with the symbology:

    • The variable name will appear in the legend title
    • The colors and the corresponding values will appear below

  • The map must have a description text box specifying the following information items:

    • Where did the data come from
    • What can the user see on the map
    • How can the user interact with the map
    • Names of the authors of the map

  • See Grading (Section E.5) for other aspects to be aware of in the submission:

    • Include JavaScript code comments
    • Make sure JavaScript code does not produce any errors
    • Make sure there are no layout issues

E.4 Submission

  • The projects may be submitted individually or in pairs.

  • Submission of each project should consist of a single ZIP file (Not RAR!) which includes a single directory. When uncompressed, the directory should include an index.html HTML file as well as any other files which are needed to render the web page, such as CSS, JavaScript and GeoJSON files. The ZIP file name should include the last names of the students who are submitting the project.

  • The ZIP file should be submitted through moodle.

  • The project will be checked by running a local server with R (Appendix H) on the submitted directory, then navigating to http://localhost:4321/ in the Chrome browser. It is advised to do the same when checking your website to make sure everything works.

  • Make sure the code does not use any absolute file paths (such as C:\JavaScript\Project1\points.geojson). Using an absolute path will cause errors when running on a different computer!

  • Make sure there is only one HTML file, that it is named index.html, and placed in the root directory

  • If you are using Hebrew or special characters—please make sure this does not cause encoding errors in the above configuration. If you are not sure, you can send the project in advance to verify no encoding errors appear, before submitting it.

E.5 Grading

Projects will be graded based on the fulfillment of the following requirements:

Requirement Grade
The projects must use the dataset agreed on with the instructor in advance. Projects using different data will not be accepted.
Grade for late submissions will be reduced by up to 5% for each day. Re-submission due to using data which was not approved will also be considered as late submission.
The web page displays the required content and has the required interactive behavior, as described above for each project 50%
The web page loads and runs without any JavaScript errors, in exactly the same file and folder configuration as submitted. This applies to any type of causes for an error, such as missing objects, wrong file paths or file names, etc. 30%
Page design is acceptable when viewed on an ordinary desktop screen, for example: there are no text or boxes going out of the browser viewport, etc. 10%
There are comments in the JavaScript code correctly describing what each code section does 10%