Back
Module 1
The Creation of Educational Activities using JClic
Practice session
1
2
5
Exercises
Exercises
Changing the properties of the windows
 
The objective of this practice session is to modify the properties of the two windows in an activity: the main one and the one for the game.
   
Practice

Start up JClic author, go to the menu File | Open File... and choose the project module1.jclic.zip which you have worked with in previous sessions and which is found in the folder C:\Programme Files\JClic\projects\module1 (in Windows), or in $home/JClic/projects/modulo1 in other systems.

Confirm with OK.

Go to the menu Activities. In the column on the left is the list of all the activities in the project. Select the activity info which you created in the previous practice session.

Sometimes the column with the list is too narrow to be able to read all the names on it. To widen it hold the mouse on the extreme right hand side of the column. When a double arrow appears drag the mouse to the right until you have the width you need.

Click on the menu Window. The windows automatically appear as the programme has made them i.e. grey and with the game window in the centre of the main window.

In the central space, Preview, you get a preview of how the window changes as you make the modifications.

In the lower part of the main window there are two sections: Main Window and Game Window, with the tools for modifying them.

Start by modifying the aspect of the main window, which is the one that contains all the elements of the activity. By modifying the main window, you modify the background in the activity.

Click on Background colour. A dropdown menu will appear. The first three parts are for selecting the colour. Each part corresponds to a different way of selecting the colour: Samples, HSB and RGB.

The three show you underneath what the colour is like in contrast to black, white, grey and with text.

Use the one you find most useful in each case.

The menu Samples allows you to choose one of the colours which you have on the colour chart, the other two allow you to adjust the colour to your own personal choice.

With the menu HSB you can move the vertical bar to choose a basic colour and then you can lighten or darken it by moving the little circle in the box on the left with the mouse.

The menu RGB allows you to determine the proportion of red, green and blue with which the colour is formed by moving the arrows to the right or the left or by introducing the numbers for each colour to obtain the exact hue you wish to use..

Try out the three different ways of working with the colours.

The fourth section of the dropdown menu allows you to decide on the Opacity of the colour you have chosen.

If you move the indicator to the left, the colour will become more transparent. To the right makes the colour more solid.

The preview at the bottom of the window also allows you to appreciate the effect of your chosen colour.

The main window can have a solid colour or it can be filled in with a graduating colour.

Click on the button Gradient in the main window. The window Gradient which opens allows you to choose the initial colour and the final one, the cycles and the orientation.

To choose the colours click first on the button First colour, choose the colour and click on OK. Then do the same with Last colour.

The value Cycle indicates the number of times that the gradient is repeated over the surface to be filled in.

Try out different values.To change this value move the arrow on the right. The effect is shown in the example box on the left. If you want an exact value you can write it in the corresponding box.

The value Orientation indicates the inclination of the gradient, measured in degrees over the horizontal. In the same way, as in the anterior value, this can be changed by dragging the indicator or by writing the value in the text box.

Make trial runs until you leave the values in the main window the same as you see in the image.

Use the menu RGB to choose the colours.

The values of the colours of the gradient are:
Initial colour : 102,101,255
Final colour : 153,153,255
These values are the number which appear on the colour chart in the menu Samples in the window Select colour, when you pass the mouse over them, and are also the values in the menu RGB.

Another option for modifying the aspect of the main window is to put a background image.

You can do this by using the button Image, choosing the image you want from the media library.The image can be centered (automatic) or in a Mosaic format, being repeated until all the space has been filled in. You will practice this later.

Verify that the activity is functioning in the test window using the button and observe the effect of the modifications you have introduced.

Close the test window so as to continue working with JClic author.

Now you are going to modify the games window by changing the background colour, its position and the margin.

The game window, like the main one can be filled in with a solid colour or a gradient, but cannot be filled in with an image.

Click on the button Background colour in the game window and choose the colour with the value RGB: 204, 255, 102. Confirm with OK.

Verify again that the activity is functioning using the button .

Close the test window and go back to JClic author.

Return to the game window and mark the option Centered.

Continuing with the properties of the game window modify the value Margin to 26, and verify that the Border option is ticked.

Verify that the activity is functioning in the test window using the button .

Having arrived at this point, this is the aspect that the windows of the activity should have:

Close the test window and save the project with the menu File | Save... select module1.jclic.zip and confirm with Save. Confirm again with Yes, if you are asked if you wish to replace the file.

 
Top