Home About Prepare Take Part Information Challenge Site Contact

The TCS OCC Tutorials

This section provides some tutorials that are specific to solving the tasks found in this Challenge.

Quick tips

Widening the Blockly workspace
The space for your blocks can be increased by collapsing the question menu:
hide menu button

Disabling blocks in Blockly
By right-clicking on a block you can disable it:
hide menu button

This is the equivalent of commenting out code in other programming languages

It can be useful when trying to find out which part of your code is doing something unexpected.

In Picture module questions, if the picture you have made is getting in the way of the shadow image you are wanting to see. Disabling the blocks that produce your image is one way of keeping your code and seeing below.

Keyboard shortcuts
Clicking on a block selects it and any blocks it contains. It is now possible to copy, paste and delete with the keyboard in the same way you normally complete these operations on your computer.
e.g. Paste: ctrl-V (or cmd-V on a Mac)


Tutorial index:


1. Blockly Coding Tasks

This type of task is very flexible: Task authors can set problems where a variety of solutions can be given credit for producing the correct answer. These tasks use Function blocks and take this form:

Function Example

How to answer Blockly Coding tasks in the TCS OCC Challenges:
Write all of your code in the function. There is no need to write any code outside of the function. The task author will have provided the necessary parameters and some suitable test data to pass to the function. The Execute block passes these values to the function block as it calls it. (It is OK to change these values to provide yourself with new tests.)

Recommended Practice:
It is not necessary to understand how to create functions to answer these tasks. Your code needs to form a mini-program inside the function block provided. However, there are a few things that you do need to know:

Function Example

The Execute Block
The Execute block is made especially for these challenges and performs these tasks:

  1. When the Run button is pressed, Execute acts like a Print block
  2. When the challenge is in Review mode and the Run and save button is pressed, Execute gives output in the same way as the Print block and also activates the grader.
  3. When the challenge is live and the Run and save button is pressed, Execute gives output in the same way as the Print block and also stores the user's answer for later grading.

The grader works by trying input/output pairs to work out whether to mark the tasks as correct or incorrect. The test data, given in the task, forms one such input/output pair but there are also hidden input/output pairs entered into the system by the task author. To be marked as correct, a solution has to have all input/output pairs evaluate correctly. In other words your function has to work as asked for, not just work with the test data.

Functions, Procedures and Subroutines
It is important to realise that Functions and Procedures are defined differently in different programming languages. In Blockly a function can:

Variables, Parameters and Arguments
Variables are areas of memory that values can be assigned to and are referred to by an identifier (name). Parameters are variables in a function that are defined when the function is written. The values for these parameters have to be passed to the function when the function is called. Arguments are the values passed to the parameters when a function is called. e.g. in the Blockly code above the convert function expects to be sent the temp in Fahrenheit parameter and returns the temp in Celcius variable. The Execute block calls convert and sends the argument 68 to the function.

In Blockly, all variables are global, that is, they can be changed inside or outside a function. It is not recommended that they are initialised outside the function because this is not good practice for what should be local variables, it is unnecessary and, in certain circumstances, can cause marking errors.

Declaration, Initialisation and Assignment
When you, or the task author, creates a new variable its identifier block becomes available in the Variable blocks menu – it has been declared but no value has been assigned to it. Initialisation is the process of assigning an initial value to a variable. Creating a new variable in Blockly does not do this.

When a function is created in Blockly and parameters defined for it, this declares new variables in the Variable blocks menu so that the programmer can use the parameters in the function.

Any variable can be used as a return value. If the question writer adds one to the end of the function block, this will be available in the Variable blocks menu as a declared variable with no value defined.

Note carefully:

Example 1
This will be marked as correct, however, it is not recommended that you add any code outside of the function. In these sort of tasks, it is intended that all of your programming should be completed inside the function.

Function Example

Example 2
This will be marked as wrong because the parameter is assigned the value 68 when the function is called but then reset to 0 in the first line of code in the function.

Function Example

Example 3
This will be marked as correct and follows recommended practice.

Function Example

Example 4
This will give the correct output but be marked as wrong!
(This is due to the way the marking program has saved the temp in Celsius variable outside the function and then the function returns another value.)

Function Example  

2. Blockly Turtle Tasks

The turtle tasks provide a set of tools that allow the programmer to create drawings and animations by thinking of themselves as a robot and writing controls that turn right or left, go forward or backward, etc. as if riding along.


3. Blockly Maze Tasks

The Blockly maze tasks are simply about guiding a robot from its starting position to the target square in any way that works. Some mazes are simple, some more complex. Sometimes there are constraints that you need to overcome such as the number of blocks allowed or the types of blocks available.


4. Blockly Picture Tasks

The Blockly picture tasks provide an alternative way of programming images to the turtle tasks. In this module images are created by placing shapes and lines on the canvas using x,y coordinates that start from (0,0) in the top left hand corner of the canvas. This module requires you to think about precedence and also naming of objects. Shapes at the top of your block stack are implemented first. Those afterwards are placed on top. If you simply duplicate a block and do not change its name then the shape gets evaluated once and then re-evaluated a second time removing the first instance. Don't forget to name your shapes individually! This does however give you the opportunity to use code that then refers to individual shapes by name.


5. Blockly Movie Tasks

The key to understanding these tasks is to realise that the code you write is executed 101 times in a movie time loop to create an animation. This means that in some instances your code might not complete in each frame!

The process of drawing each movie frame is like this:
1. Remove old objects (shapes and lines).
2. Execute the code blocks in the workspace
3. Draw the objects onto the canvas.

The main blocks:
time block returns the frame integer from 0 to 101.

shape block creates a shape with the parameters shown.

Add shape: name me needs to be unique for each shape object added or weird things will happen!

number of sides: 3=triangle, 4=square ... 9=nonagon, all other integers create a circle

colour: sets the colour to that shown in the colour picker

radius: sets the radius of the containing circle in the same units as the scale on the canvas

position X: sets the x coordinate of the centre of the containing circle in the same units as the scale on the canvas. Note that the top left corner of the canvas is (0,0)

position Y: sets the y coordinate of the centre of the containing circle in the same units as the scale on the canvas.

Example 1:
red square movie
This will produce a movie of a square moving from left to right across the canvas


Example 2:
blockly movie example 2
This will produce a movie of a red circle moving from left to right across the canvas until time is greater than 50. At that point the circle will appear to change to green and stay in the centre of the screen.


Example 3:
blockly movie example 3
This will produce a movie of a red circle moving from left to right across the canvas until time is greater than 50. There is also a green circle drawn in the centre of the screen for the whole animation. This is because for each frame the whole of the code above is evaluated.


Example 4:
Below is an example that is not recommended:
blockly movie example 4
It is important to remember that there is a clock ticking in the Movie module and the code you write is evaluated each tick from the start. If your code includes loops there is a danger that they will not be fully evaluated in the time available and unexpected outcomes might result.

The example above produces a movie of a red circle moving from left to right across the canvas until time is greater than 50. At that point the circle will appear to change to green and stay in the centre of the screen. However, this may not do this for the reason you think! In the first 50 frames the time block keeps returning the frame number which is less than 50 so the while loop keeps iterating forever during these frames continually redrawing the same red circle on to the canvas in the same position during each frame. In frame 51 the time block returns 51 so the code skips the while loop and draws a green circle in the centre of the canvas.


6. Blockly Image Tasks

In the Blockly image tasks you are provided with an image and asked to manipulate its data to alter it.

To do this you can reference individual pixels by their x,y coordinates. (Remember that the coordinates are from (0,0) in the top left corner.) It is usually easier though to loop through all pixels with the for P in pixels block:
pixel loop block

Inside the loop, you can then add blocks that alter each value of P in the image. Try this simple program that sets the R value of every pixel to 255:
small program

There are getter and setter blocks provided for a variety of pixel and image properties so try them and out and see if you can produce some of the filters provided in applications such as Photoshop.

Some computer science:
A byte can store values from 0 to 255. This turns out to be a very useful amount of information in a huge range of situations in computer science. With images it provides a useful way of saving the colour of a pixel in an image. In JPGs the data can be stored in three bytes: One for red, one for green and one for blue. So a pixel with RGB values (0,0,0) will appear black and one that has the values (255,255,255) will be bright white. In PNG images there is also a fourth byte that stores a transparency value where 0 is completely transparent and 255 is not at all transparent.

The data for each pixel in a PNG can be accessed as a small tuple (array): (R,G,B,A). These are the blocks that get and set these complete pixel data values:
P value blocks

Alternatively there are blocks for getting and setting just the R,G,B or A pixel values individually:
P value blocks