Drawtivity - help

Creating an authoring account

Go to the register page and fill in your details. On successful submission of your details you will be emailed an initial password to login to the system. Once logged in you will be able to reset this password.

NB - the Drawtivity system may be set up to accept only email addresses from specified domains. If this is the case this will be indicated in a message on the registration page. In this case you will not be able to register on the website unless you have access to an email address on one of the allowed domains.

Changing your password

Once you are logged in click on the My details menu item. The update your details page that is displayed allows you to edit your name, email, organisation and password registered on the system.

Authoring Drawtivity activities

The sequence of steps involved in creating a Drawtivity activity are:

  1. Create a new activity and set the activity title
  2. Define the activity settings
  3. Compose the activity text
  4. Upload the image to be used in the activity
  5. Draw the answer line or area for the activity
  6. Add any pop-up notes to be displayed as feedback
  7. Go to the publish page to preview and test the activity
  8. Download the activity files
  9. Set the activity as complete

Each of these steps are described in more detail below.

1. Create a new activity and set the activity title

When you are logged in to the Drawtivity system your default view is a page listing your activities. Above and below the table displaying this list of activities are Add new activity links. Click on one of these links to open the Create new activity page. At this point you only need to give this new activity a title and click the Create activity button. You will then return to your activity list with the new activity listed at the top of the table. To complete your activity you now progress through the stages presented by the icons listed from left to right for this activity in the table staring with the activity settings.

2. Define the activity settings

The appearance and behaviour of each Drawtivity activity is defined by its settings. The activity settings page is opened by clicking on the related activity settings icon in the activity list table.

The colour pickerColour related settings - a number of these settings define the colour of various aspects of the activity. These colours are defined using hexadecimal notation of the form #FF0099 (more info. on colour hex codes). In order to help you define these colours appropriately a pop-up colour picker will appear when you click into one of these text boxes. You then move the vertical slider and drag the circular colour picker to choose the desired colour. To select this colour click on the coloured button in the bottom right of this colour picker window. This will write the related colour hex code in the related activity setting text entry box.

The use of each of the activity settings provided are described below (NB - where values are gievn in brackets for a setting these indicate the suggested range of values to be used for this setting):

Type related

  • Activity type - sets whether the activity involves drawing a line (e.g. the path of a river on a map, or a line on a graph) or drawing an area (e.g. defining the shape of a muscle on an anatomy diagram)

Appearance related

The following group of settings determine the overall appearance of the activity:

  • Skin background colour - the base colour for the activity background frame.
  • Skin bar colour - the base colour for the bar at the bottom of the activity that contains the activity buttons.
  • Skin fade (0-200) - defines the degree of vertical colour fade used in the skin background and bar. A value of 100 results in no vertical colour fade. Values greater than 100 produce a colour fade from lighter to the base colour from top to bottom. Values less than 100 produce a colour fade from darker to the base colour from top to bottom.
  • Skin alpha transparency (0-100) - the degree of transparency of the activity background and bar. A value of 0 makes the activity background and bar totally transparent. A value of 100 makes the activity background and bar totally solid. An example use of this setting would be to make these aspects of the activity transparent to blend the activity into a background web page.
  • Button colour - the default background colour of the activity buttons displayed at the bottom of the activity. This and other activity colours are defined with a hexadeciaml code and can be selected using a pop-up colour picker (see above for more info. on the colour picker).
  • Button over colour - the background colour of the activity buttons when the cursor is placed over them.
  • Button text colour - the colour of the text in the activity buttons.

Introduction related

The following settings relate to the activity introduction which appears in a pop-up panel above the activity buttons at the bottom of the activity.

  • Display introduction - a checkbox which sets whether an introduction message is to be displayed.
  • Introduction background colour - the colour of the introduction panel background.
  • Introduction text colour - the colour of the introduction message text.
  • Introduction close icon colour - the colour of the introduction panel close icon
  • Introduction alpha transparency (0-100) - the alpha transparency of the introduction panel background. A value of 0 makes the panel background totally transparent.

Cursor related

  • Cursor colourCursor colour - the cursor is the cross that appears when the mouse cursor is positioned over the activity image. This settings determines the colour of this cursor and may need to be amended to ensure that this cursor is visible when displayed over whatever colours make up the activity image (e.g. a dark activity image would necessitate the use of a light coloured cursor).

Drawing related

The following settings relate to the user drawing aspect of the activity:

  • Example circle pointsDrawn point type - a select box which determines the symbol used to display where each drawn point is placed (the options available are cross, plus, circle and square).
  • Drawn point colour - the colour of the drawn points. This should be set to ensure these are visible on the activity image (e.g. a dark activity image would necessitate the use of a light coloured points).
  • Drawn point size (1-99) - the dimensions of the drawn points in pixels.
  • Drawn line/area colour - the colour of the drawn line or area.
  • Drawn line width (1-6) - when the activity type is set to line, this setting determines the width of the drawn line in pixels.
  • Drawn line/area alpha transparency (0-100) - the alpha transparency of the drawn line or area. A value of 0 would make the drawn line or area totally transparent and a value of 100 totally solid. A degree of transparency is often appropriate to allow the user to view the background image through their drawing.

Answer related

  • Toggle answer - if this setting is checked the user can repeatedly click on the activity feedback button to toggle between viewing the activity answer and score, and amending their drawing. Unchecking this setting means the activity user has one attempt at drawing their response and viewing the feedbakc and score.
  • Answer fade (0-100) - sets the degree of additional transparency applied to the user's drawn response when activity feedback is displayed. A value of 0 will make the user's drawn response disappear when the activity feedback is displayed. A value of 100 will not fade the user's drawn response when the activity feedback is displayed.
  • Answer colour - the colour of the activity answer line or area.
  • Answer line width (1-6) - if the activity type is set as line, then the width in pixels of the asnwer line.
  • Answer alpha transparency (0-100) - the alpha transparency of the answer line or area. A value of 0 would make the answer line or area totally transparent. A value of 100 would make the answer line or area totally solid.
  • Answer animate - a checkbox which determines if the display of the answer is animated to be drawn a point at a time.
  • Answer animation period (1-1000) - if animating the display of the answer, this sets the time period between each point being displayed. The value is set in milliseconds, where a value of 1000 is equivalent to 1 second.
  • Answer display points - a checkbox which determines whether point symbols are displayed on the answer line or area.

Pop-up notes related

The following settings relate to the optional pop-up notes that can be displayed in activity feedback.

  • Pop-up notes background colour - the background colour used in the panel behind pop-up note text.
  • Pop-up text colour - the colour of pop-up note text.
  • Pop-up notes width (100-400) - the width of the pop-up notes panel in pixels. The height of the pop-up note panel is set dynamically to include all the note text. You may wish to increase this width if you have large amounts of text to display in these pop-up notes.
  • Pop-up notes background alpha transparency (0-100) - the alpha transparency of the pop-up note background. A value of 0 makes this background totally transparent and a value of 100 makes it totally solid.
  • Pop-up notes roll over colour - when a web link is defined for a pop-up note the note can change colour when the mouse cursor is positioned over the note to indicate this. This colour setting determines this roll over colour for the pop-up note background.

Scoring related

The following settings relate to the automated scoring facility offered by Drawtivity activities (more info. on the activity scoring mechanism). Amending the lower and upper limit values changes the sensitivity of the scoring mechanism to the accuracy of the user's drawn response. In order to determine the appropriate scoring limits for an activity, it is suggested that you test your activity (using the preview available on the activity publish page) and vary these scoring limits within the suggested ranges.

  • Score activity - a checkbox which determines whether the activity will generate a percentage score as part of the activity feedback.
  • Lower limit (5-10) - this number sets the accuracy required to score 100% for this activity. Increasing this value will reduce the level of accuracy required. Reducing this value increases the level of accuracy required. A value of 0 makes it virtually impossible to achieve 100%.
  • Upper limit (20-40) - this number sets the accuracy required to score 0% for this activity. Increasing this value will reduce the level of accuracy required (making it easier to get a score above 0%). Reducing this value increases the level of accuracy required (making it more difficult to get a score above 0%).
  • Score text colour - the colour of the score text that appears on the activity bar at the bottom of the activity.

Once you have completed the activity settings click the Update settings button to save these settings and move on to the next step which is to compose the activity text.

3. Compose the activity text

The activity text is opened by clicking on the related activity text icon in the activity list table. This page allows the text that appears in the activity buttons and introduction and OER panel to edited (the OER panel provides details on copying and adapting this activity). The following text entries are available:

  • Activity title - the title of the activity displayed as the title of the displaying webpage.
  • Introduction - an introduction to the activity which appears in the pop-up panel at the bottom of the activity.
  • OER button - text on the OER button which reveals the OER panel.
  • Introduction button - text on the button which hides and reveals the introduction panel.
  • Delete last point button - text on the delete last drawn point button.
  • Reset button - text on the button which resets (deletes) the user's drawn response.
  • OER title - the title text in the pop-up OER panel.
  • OER text - the text displayed in the pop-up OER panel.
  • Notes - these notes are displayed on the activity's public page on the Drawtivity authoring system and should give advice to educators who may wish to use or amend this activity.

Click the Update text button to save your activity text. The next step in creating an activity is to upload an image to be used in the activity.

4. Upload the image to be used in the activity

A Drawtivity activity involves the drawing of a line or area on top of an image. The image used within the activity needs to be a JPG, GIF or SWF formated file with dimensions of 600 by 450 pixels.

Important! - All Drawtivity activities authored on this system are licenced by the Creative Commons attribution 3.0 Unported Licence. This means that you need to be sure that any image used in your activities is available for use under this licence before it is uploaded to the system.

Once you have created your activity image you need to upload the image file on to the Drawtivity authoring system. Click on the add image icon in the activity listing table to access the activity image page.

Click on the browse button to reveal a file dialogue which you can use to locate and select the activity image file on your laptop or PC. Click the Upload image file to add this image to your activity.

5. Draw the answer line or area for the activity

The next stage in authoring an activity is defining the correct answer which will be revealed in the activity feedback and will also be used in calculating a score. To define this correct answer click on the related feedback icon in the activity listing table.

The define activity feedback page displays an interface very similar to the activity itself which you can use to draw the correct line or area on the activity image. The Delete last point and Reset buttons allow you to undo each point of your drawing or to remove your entire drawing. When you are satisfied with your correct answer click the Save button.

Tips for authoring your answer line /area

  1. after placing each point on the drawing you can adjust its position with the keyboard arrow keys
  2. each placed point can also be dragged with the mouse to adjust its position
  3. right clicking on the activity image and selecting Zoom In allows you to work on a zoomed version of the activity image for greater accuracy, right click and select Zoom Out to return to the original view.

6. Add any pop-up notes to be displayed as feedback

An optional aspect of activity feedback are pop-up notes which can be positioned on the activity image to highlight important aspects of the answer. To add pop-up notes to your activity click on the related add notes icon in the activity listing table.

The define activity pop-up notes page displays an interface which again is similar to the activity itself. To add a note click on the Add popup note button. A note icon will then appear in the center of the activity image. Drag this icon to the appropriate place on the activity image. Once the icon has been positioned a panel will appear which will allow you to define the note text and an optional note web address (if a web address is provided for a note then this note will become a clickable link to this web address). Click the Save note details button to record your entries for this note and repeat the process to add further pop-up notes to the activity. NB - to delete or edit a note click on the note icon to reveal the note details panel.

When you have finished click the Save button to record your notes for this activity.

7. Go to the publish page to preview and test the activity

When you have finished the initial authoring of your activity, you can use the activity publish page to preview and finally publish your completed activity. Click on the activity publish icon in the activity listing table to access this page.

At the top of the activity publish page are 3 links you can use to download different versions of the activity files. Beneath these 3 links is a preview of your activity which you can use to test the activity from the perspective of an activity user. You should use the preview to check that your activity has been authored correctly and is responding as anticipated to various types of activity attempts.

To make changes at this stage you will need to return to the activity list table to edit the activity settings, text etc. Once you are happy that you activity is finished you should download the appropriate activity files.

8. Download the activity files

On the publish activity page there are three links available to download different versions of the activity files. Clicking on any of these links will open a browser window with options of what to do with the published ZIP file. You should select to save this ZIP file on to your laptop or PC.

To test your published activity you will need to extract the downloaded zip file and then open the activity index.html file. Below is advice on selecting and using the appropriate activity download version:

  1. Download activity files - the simplest version of the activity that contains a set of files which should be extracted for use stand alone or uploaded as a single stand alone activity in a VLE/LMS (e.g. Moodle). This version of the activity is ideal for carrying out initial testing.
  2. Download activity embed files - a set of files designed to facilitate the embedding of the activity within resources created with authoring software such as Articulate Presenter, Wimba Create etc. In general with such authoring software the Drawtivity activity SWF file (which has a filename of the form "drawtivity345.swf") should be embedded into the resource materials and Drawtivity activity folder (which has a name of the form "drawtivity345") copied into the published files generated by the software. NB - this published zip file does not include an index.html file and so cannot be easily tested.
  3. Download SCORM 1.2 activity files - a version of the activity files for use within SCORM 1.2 compatible VLEs/LMSs. In general the published zip file should be uploaded without being extracted into such a system. The activity will then report user scores and completion to the hosting system.

9. Set the activity as complete

When you have completed the creation and publishing of your activity you should set this activity as complete on the Drawtivity authoring system. This means that the activity will be archived and so not appear in your working activity listing and this also indicates to visitors to the Drawtivity website that this activity is complete and ready for use as an Open Educational Resource (OER). To do this click on the Mark as complete finishing flag icon in the activity listing table.

All completed activities are displayed on your Completed activities page where you can review the number of copies and downloads made of this activity, publish further copies of the activity for your own use and visit the public page associated with this activity.

Managing your completed activities

Once an activity is marked as completed on the Drawtivity system it is displayed in the list on your completed activities page. This list provides an overview of the OER use of your activity such as the numbers of downloads and the copies made for adaptation. The listing also provides links to activity public pages and a facility to revert the activity staus back to incomplete for edits to be made.

Making a copy of an activity - from the completed activities listing click on the view public page icon for the activity you wish to copy. In the box at the top right of the page click on the link Copy this activity to adapt and republish. This will add a copy of this activity to your activity list page where you can start to edit it.

Editing a completed activity - to do this you will need to change the activity status back to incomplete by clicking on the change activity status icon in the completed activity listing. This will move the activity back on to the My activities list page from where you can access the various activity editing pages.