Data Ethics Canvas

Make sure your .ts file or .json file is inside of the same folder as the index.html and main.html

If it is a .ts file, change the file name to .json.

In order to create a new translation file duplicate the index.html and main.js file and rename it indexYourTranslationName.html. and mainYourTranslationName.js

Inside of your new index.html file scroll to the bottom of the page and change the main.js file name to your newly named js file:

From:

To:

Next, open your newly created mainYourTranslationName.js file. On line 2 you will see a path which references a json file. Make sure the path matches the name of the json file in your root folder.

From:

To:

IMPORTANT! - DO NOT REMOVE THE ./ FROM THE FILE NAME

Finally — assuming you want to choose the where the data is placed with in the bubbles — we will use something called appendChild. Append child is how we put an item inside of another item.

So, lets say we want to put the the first piece of text inside the 3rd bubble

This text

Inside of

To look like this

We use appendChild. AppendChild is exactly the same as saying 'container 3 will contain the data in container 1'. So, lets do this directly below where it says //CHANGE CODE HERE in your main.js file:

Repeat this process deciding where you want to insert the text into which bubbles.

Double click on your html file to see the results

When you are happy with what goes where, we can move on to changing the print settings.

Here is a finished example:

Change the destination to 'save as PDF'. Change the layout setting from portrait to landscape. Click on more settings and change the scale to 24.

Once all of these changes have been made press print