04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 1/15
Assignment 2 (CourseWork 2)
(https://canvas.sussex.ac.uk/courses/14704/files/1276857/download?wrap=1)
CourseWork 2 MUCO
Assignment 2
This assessment provides a programming exercise in JavaScript with opportunities to answer questions on multimedia on the web. It is worth
20% more than the first assignment and incorporates the final test. It is designed to do online and you should expect to spend many hours
carrying out its tasks and learning as you do so.
Scenario
Your employer wants to see which intern to appoint to a post as a web developer. She has set you 4 tasks testing your ability to
understand programming in JavaScript and multimedia. She is not assessing CSS.
Instead of an interview where you do the tasks under supervision complying with UK Government guidelines on social distancing, she has set a
series of problems and questions for you to solve and submit via a Solution Document (SD). The SD will become your report.
NB: For all code sections copied to your SD, please use http://www.planetb.ca/syntax-highlight-word to make sure the formatting of your code is
maintained (select HTML or JavaScript in the options)
Tasks
Your four tasks are:
1 The Wikipedia Simulation website (20 marks)
2 The programming exercise on text compression (42 marks)
3 The programming task on image loading from base64 (8 marks)
4 The answers to questions that form a Report. (30 marks)
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 2/15
Total marks 100. This will be weighted to 60% of the overall grade.

Task 1: The Wikipedia Simulation (15 marks for coding the program + 5 marks for entry)
You are asked to carefully consider W3Schools’ reference for local storage at https://www.w3schools.com/html/html5_webstorage.asp
(https://www.w3schools.com/html/html5_webstorage.asp) because the company wishes to be sure you can do research to solve problems. In
particular, you are expected to do research and asks you to look at am incomplete web page. Download, load into a browser and run the file
below:
(https://canvas.sussex.ac.uk/courses/14704/files/1276857/download?wrap=1) wiki_sim_starter.html
(https://canvas.sussex.ac.uk/courses/14704/files/1276858/download?wrap=1)
It should look like this:
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 3/15
It will not work. It needs your corrections and completion. (Note that the style sheet is not present nor part of the assessment but you can use
one so the link is left in for you.)
When corrected and the Load example text button is clicked and then the create your wiki entry button is clicked, the local storage looks like this
(in Chrome when F12 is pressed; other browsers have similar development tools):
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 4/15
The local storage item has been given a name for its key, myEntry, and its value is a string copied from the textarea in the form with an id of
entryBox. You will be creating and deleting this key using local storage methods. You can look these up in W3Schools or other sites, but don't
worry because the code is deliberately transparent, so you should just need to work it out. Local storage is an associative array, like a map in
Java; a key->value arrangement. It is not expected to be used on smartphones but is widely used commercially on larger devices It stores data
on the client's machine. The data can be megabytes in size, controlled by the user of the device and may be permanent or temporary (session
storage). Photographs can be stored in the base64 code string (see task 3). There is currently no edit facility, just removal, and restoration of a
modified string value. Total storage is about 10 MB you are told. The key must be unique or named; here it is named. In a database system,
keys (primary keys) uniquely identify a table row (tuple or record) with many columns (or fields), which may be of many types, not just string. A
database has a CRUD (create, read, update and delete) front end for database administration. Databases are usually stored on a server, not
the client, whereas local storage as its name suggests is stored on the client. Local storage is much simpler and although several keys could
have unique identifiers describing records, it cannot be a named group like a table and each key has a single value; no collections are possible.
They are quite different and your employer will ask you to advise her on both for her Wiki in the final task.
You will observe on loading the form runs a function, myLoadItem(), that fills the entryBox with an example text or a text value retrieved from
local storage by its key, myEntry. You need to complete this function.
You will note that the form never submits to an action page because it is intercepted by JavaScript, the function createItem().

It stores the text to local storage as a string value under the myEntry key. You need to complete this function.
You need to complete the delete and display functions too.
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 5/15
The next part of this task requires you to demonstrate what you learnt about audio sampling. The page should load an example of an entry
using the onload event handler for the body. It has information on Covid-19 but you must change it so that it explains how sounds are
represented in web pages and pros and cons of sampling.
var someText = "COVID-19.."//change the content of this variable in the loadExampleText() function
Your new content should be between 200 and 300 words. Its content will be assessed for accuracy and your comprehension. Marks are also
earnt for loading into the textarea's entryBox. A person should be able to type over an entry in the form’s textarea when the page is rendered
and then save their entry to the local client’s local storage. When the page is refreshed (reloaded), the new entry should be shown like a
Wikipedia page. So, the employer should be able to test your page by loading the example from JavaScript storage, overwriting that with her
own, storing that in local storage, refreshing the page and seeing the latest entry. The deletion of the local storage is also assessed as that
requires the removal of the key.
All of the tasks are repeated inside the code. Remember that this is designed for development and learning, so take your time.
Note: You can test your work by locally storing the example entry and refreshing the page. If it worked, it should be in the box!
When complete, copy your source code to the SD as part of your report. You also need to submit the code as a zip file.

Task 2 (42 marks)
You need to know these equations:
Compression can be lossless or lossy - you are supposed to know what that means.
A compression algorithm takes as input uncompressed text “The cat sat on the mat” and outputs compressed text “* cat sat & * mat”. The
compressed text can be expanded to the original input i.e. compressed text can be uncompressed. Explain by writing to your SD some informed
comments:
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 6/15
(a) Is this example lossless or lossy compression? (1 mark)
(b) What is the space savings percentage to the nearest integer? (1 mark)
(c) What is the compression ratio to the nearest integer? (1 mark)
The next part of this task requires you to do your own research.
Download, load into a browser and run the provided web page from your employer:
compressedTextStarter.htm (https://canvas.sussex.ac.uk/courses/14704/files/1276857/download?wrap=1)
Look at https://compressedTextStarter--ciphers.repl.co (https://compressedTextStarter--ciphers.repl.co) . It is reproduced here in case
you have technical connection problems:

Input

04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 7/15

Compressed

Uncompressed (expanded)

Compress
Expand

Uncompressed length here

Compressed length here

Space saving % = 100 - (Compressed Size/Uncompressed Size * 100)%

(d) Complete line 61 onwards for the expand() function. (10 marks)
After compression, you should now have this:
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 10/15
(e) Complete line 26: var saving = 0//to do: finish the equation; see the rubric on the web page! (5 marks)
(f) What are the compression savings to the nearest integer on the given text? (2 marks)
Write your first and second name in English characters into the textarea. Click compress and then click expand. This is what the Prime Minister
of the UK would get:
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 11/15
Screenshot your own result. Copy to your SD.
(g) Explain your compression savings. (2 marks)
(h) Explain why Mr. Johnson saved 8%. (2 marks)
The rubric (algorithm) is naïve. It does not replace all occurrences but replaces it once only. (See
https://www.w3schools.com/jsref/jsref_replace.asp (https://www.w3schools.com/jsref/jsref_replace.asp) ref global replacement.)
(i) Change the code outString = outString.replace("MULTIMEDIA","0"); at line36 to do global replacement. Compress Multimedia
Multimedia Multimedia. The space savings should be 85%. What is the compressed text now? Write your new code and answer to your SD.
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 12/15
(5 marks)
(j) Expand the text. What is the uncompressed text now? Why is it that text? (5 marks)
(k) Fix it! Write your new code and answer to your SD. (5 marks)
(l) Try an entry of 2020! into the program and see the result! Write why the rubric used is flawed when numbers are in the text and when
punctuation is used. You do not have to fully explain the nonsense of the uncompressed text – the company is looking to see that you
understand the reasons the expand function fails. (5 marks)
(m) We have examined text compression. When this is done with a video file, much the same happens. We need a CODEC to play the video.
What does the acronym mean? (2 marks)

Task 3 (8 marks)
"data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJ
RU5ErkJggg"
The above is what it says that it is: a png image in that code format. Write an statement in HTML that will show the image rendered on a
web page with the attribute alt explaining what the image looks like. (8 marks)

Task 4 (30 marks)
Remember to write answers to your SD that will form the report.
(a) Back to the first task, the Wikipedia simulation.
(i) Read about PHP and MYSQL https://www.w3schools.com/php/php_mysql_intro.asp
(https://www.w3schools.com/php/php_mysql_intro.asp) This is a database approach that stores data in a base (a database) on a server, or, for
our purposes here, not on the client. The Wikipedia entries could be stored in a database on a server or even on the so-called cloud. You are
not expected to know the PHP/MYSQL but the approach to the storage of data because as part of your interview for a position with us we need
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 13/15
to be sure you are able to transfer skills to new projects. Indeed we do not know which database system we shall use, but it will require a
user name and password to log in.
(i) What are the four SQL commands to read a record, write a new record, update a record and delete a record called? (4 marks)
(ii) Consider local storage methods. Which one of them is equivalent to reading a record? (2 marks)
(iii) Which one of them is equivalent to writing a record? (2 marks)
(iv) Which one of them is equivalent to updating a record? (2 marks)
(v) Which one of them is equivalent to deleting a record? (2 mark)
(b) So, now you may be in a position to tell us in about 200 words 3 reasons why local storage for the Wikipedia simulation is inferior to the
database server-side approach when we roll out the application? (6 marks)
(c) Tell us 3 reasons why local storage is good for the prototype! (6 marks)
(d) We want to store photographs from customers on our Wikipedia pages. Compare the local storage system and the remote database server
system from the point of view of (i) privacy and (ii) security. (If you are unsure which is which, recall or look-up what happens when you install an
app on your smartphone or turn on the webcam of your laptop. Your permission is about privacy; if it asks for a password, it’s about security.
You can copy the template below:
Local Storage Database
Privacy
Security
(6 marks)
End of the final assignment
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 14/15
Assessment Information
For each criterion, your work will be judged on the 100 marks divided by 10 available before weighting as:
Judgement Mark Description
Not
attempted
0
Fail 1 - 3
You made an attempt but with significant errors or omissions,
showing insufficient understanding
Basic 4 – 5
Your work is on the whole correct, showing a basic understanding of
the course material.
There may be some minor errors.
Good 6 – 7
Your work shows a deep understanding of the course material and
your ability to apply your own thinking when using the material. Errors will be few and mostly not
significant.
Excellent 8 – 9
Your work shows a complete and thorough understanding
supplemented by your own independent thinking and research. There are almost no errors.
Exceptional 10 Your work exceeds the standard expected at the first-year undergraduate level.
1
2
04/04/2020 Assignment 2 (CourseWork 2): IY1: Multimedia Computing (MUCO)
https://canvas.sussex.ac.uk/courses/14704/pages/assignment-2-coursework-2 15/15

1 to 4 marks indicate the minimum standard required for an ordinary pass. 5 marks indicate the minimum standard required for a lower 2nd class
honours (2:2)
2 to 6 marks indicate the minimum standard required for upper 2nd class honours(2:1). 7 marks indicate the minimum standard required for 1st
class honours.