For the first practical assignment you are asked to write a DashCode program to implement a Departmental Module Browser based on the two data sources listed below.  The browser should allow the user to find out details about what modules are mandatory for which programmes, and view details about each of the modules.  In addition, the user should be able to list all the modules, and run a search over the module titles.  Full details of the requirements are given below.

The following two data sources are provided, both serve JSON data.

Programmes.js

1. http://www.csc.liv.ac.uk/people/trp/Teaching_Resources/COMP327/Programmes.js
   

This source provides a list of the different Degree Programmes offered by the Department of Computer Science at the University of Liverpool, and lists, under each year, the mandatory modules required by the programme.

Modules.js

1. http://www.csc.liv.ac.uk/people/trp/Teaching_Resources/COMP327/Modules.js
   

This source provides a list of all the different Modules on offer within the Department of Computer Science at the University of Liverpool, and gives details of each of the modules.

To complete the assignment, you will need to build a new Dashcode-based web app which uses both data sources to allow the user to browse the different programmes.  Extend the Browser template to display five views as followed:

View 1 - Programme List

List all of the programmes on offer by the department.  Display both the programme title and programme code.  When one is selected, then navigate to View 2.

View 2 - Programme Details

Display details of the selected programme (title, code, and description), and present the user with a list of the three different years, which when selected, displays the mandatory modules in View 3.  Also include a button which allows the user to view all the modules in View 5.

View 3 - Programme Modules by Year

List the modules mandated by a given module for each year.  For each entry, you should list the module name and module code.  Selecting a module should present the module details in View 4.

View 4 - Module Details

Present the module details, giving the title, module code, description and primary staff member.

View 5 - Full Module Search

Present all the modules offered (in each case listing the title and code of each module), with the ability to restrict the listed modules based on search-terms on the module titles.

As the user navigates between each view, ensure that an appropriate title is displayed, and the title is then bound to the back button of the subsequent view (HINT: this is the default behaviour when the Browser template is used correctly).  To bind between the two data sources, you will need to use the module code as a unique key.  This will require you to write some glue-code by hand.  The following code fragment illustrates how this should be done (note, you will have to modify this code to utilise the data element names and web element names within your solution):

// Extracts the data objects from a separate data source

function populateModuleDetail(moduleCode) {

    // Replace with the the id of the second data source  

    var moduleDataSource

        = dashcode.getDataSource("ModuleDataSource");

    // Replace with the ids of the hierarchical elements

    var content = moduleDataSource.valueForKey("content");

    var module = content.valueForKey(moduleCode);

    var staff = module.valueForKey("staff");

    // Replace with the ids of the

    // web elements to be populated

    document.getElementById("ModuleTitle").textContent

        = module.valueForKey("title");

    // Add additional statements for each of the web

    // elements to be populated.

}

The purpose of this assignment is to demonstrate that you know how to develop a web-app designed for a mobile device, which presents data obtained from a potentially live, independent data source.  Therefore you do not need to hand in any design documentation but your code MUST be well commented so that it explains the role of each of your event handlers.  You may make use of the code presented to you in the COMP 327 lab sessions and lecture notes on Dashcode.  The following marking scheme will be used to assess each submission.

Marking Scheme

1. •Development of a Browser based on the Programme Data Source - Views 1, 2 and 3 (40 marks)
   

2. •Inclusion and population of data in the Module Detail View - View 4 (30 marks)
   

3. •All Module View including search (20 marks)
   

4. •Layout and Design (10 marks)
   

This assignment contributes 10% to your overall mark for COMP327.

SUBMISSION INSTRUCTIONS

Firstly, check that you have adhered to the following list:

1. 1.Your project should be self contained within a single Dashcode Project. The file's name MUST be 'Solution1.dcproj' (capital S; lower-case everything else).
   

2. 2.Your project is developed within Dashcode, not some other language or environment.
   

3. 3.Your program compiles and runs on a machine within the computer science department’s Mac Lab, under Dashcode 3.0. If you have developed your code elsewhere (e.g. your own mac), ensure that it also works on our system before submission. It is your responsibility to check that you can log onto the department’s system well in advance of the submission deadline.
   

4. 4.Your program does not bear undue resemblance to anybody else's! Electronic checks for code similarity will be performed on all submissions and instances of plagiarism will be severely dealt with. The rules on plagiarism and collusion are explicit: do not copy anything from anyone else’s code, do not let anyone else copy from your code and do not hand in 'jointly developed' solutions. 
   

 

To submit your solution you must SUBMIT IT ELECTRONICALLY, and adhere to the following instructions:

Electronic submission:

1. •Your code must be submitted to the departmental electronic submission system at: http://cgi.csc.liv.ac.uk/cgi-bin/submit.pl?module=comp327
   

1. •You need to login in to the above system and select ‘Practical 1’ from the drop-down menu.  You then locate the file containing your program that you wish to submit, check the box stating that you have read and understood the university’s policy on plagiarism and collusion, then click the ‘Upload File’ button.
   

Work will be accepted only if it is submitted electronically following the above instructions.

Finally, please remember that it is always better to hand in an incomplete piece of work, which will result in some marks being awarded, as opposed to handing in nothing, which will guarantee a mark of 0 being awarded.  Demonstrators will be on hand during the COMP327 practical sessions to provide assistance, should you need it.