Toolbox Installation Guide

flexiblelearning.net.au/toolbox

Flexible Learning Toolboxes, National VET E-learning Strategy, © Commonwealth of Australia (Department of Industry, Innovation, Science, Research and Tertiary Education (DIISRTE), 2012.

With the exception of the Commonwealth Coat of Arms, the Department’s logo, any material protected by a trade mark and where otherwise noted, all material presented in this document is provided under a Creative Commons Attribution-ShareAlike 3.0 Australia ( ) license.

Table of Contents

Scope and features of the toolbox

How do I install the toolbox on my server?

How do I make use of the communication tools?

The directory structure of this Toolbox

How can I deliver activities and/or units individually?

How do I add, delete or change the order of content screens in an activity?

How do I customise a menu?

What if I only want to install the resources and not the activities?

Using a learning management system

Known issues

Navigation issues

Refresh issues

Accessing PDF files

Accessibility issues

Text alternative navigation

No JavaScript

Flash

Screenreaders

Minimum hardware/software requirements and installation advice for learners.

Hardware

Software

Certificate III in Clothing Production – Installation Guide

Scope and features of the toolbox

The Fashion toolbox approaches learning in an innovative and challenging way and will enable providers to customise learning resources so they are relevant to their immediate audience. The toolbox provides online learning resources for 7 units of Certificate III in Clothing production. Much of the online material is customisable. The toolbox has been designed and developed to conform with W3C Priority 1 Accessibility Guidelines and makes use of an integrated navigation system in order to improve accessibility.

The Fashion Toolbox as released on the CD is a flexible learning resource that can be easily customised to suit individual learning needs and work environments.

The toolbox comes complete with its own internal navigation ready for installation onto a webserver. The toolbox has been designed to incorporate online communication (email, chat forum and Discussion board) tools and you will need to add the necessary links to your choice of communication tools.

The toolbox may also be incorporated into a learning management system such as WebCT, to make use of the system’s tools (eg. communication tools) and features.

It is recommended that you make a backup copy of the Fashion Toolbox CD in case the original becomes lost or is damaged.

How do I install the toolbox on my server?

To install the Fashion Toolbox on your server, follow these steps:

  1. Insert the Toolbox CD-ROM into your CD-ROM drive.
  2. Open a directory browser on your server computer and navigate to the drive that you inserted the CD into.
  3. Either copy all the files and directories in the root directory of the CD-ROM to a nominated directory on your server, or

If you only wish to copy specific units or activities then refer to the section How can I deliver activities and/or units individually? next.

There are no server side technologies utilised in this toolbox so it will not be necessary to configure anything extra to use the toolbox. After all the files are copied to the nominated directory on your server, it’s just a matter of opening a web browser and accessing the index.htm page in the nominated directory.

If you rename any of the subdirectories, you will have to change the appropriate links in the content. Unless it is absolutely necessary that you do this, we’d recommend keeping the directory structure as is to prevent any errors from occurring.

If you have trouble accessing the Shockwave content in the toolbox, it may be necessary to set the appropriate mime type for Flash (application/x-shockwave-flash). This should not be necessary for most installations.

How do I make use of the communication tools?

To link the toolbox to your choice of communication tools (e-mail and the

Discussion board) you will need to insert links to your tools instead of the

place holders in the ‘Your Say’ resource. Go to:

- /pages/comm/commun.htm

and change the links on each icon. This resource is set up so that your communication tools will display in the bottom frame beneath the blue banner.

The directory structure of this Toolbox

Each unit and activity has its own directory for its content (HTML pages) and its associated multimedia resources (images, pdfs and flash files). These units and activities also make use of various shared resources, such as the Glossary, Facts&Figures, Fabrics&Equipment, the Instruction Manual and the OHS Manual.

The files have been organised in a directory structure to make it easier to extract and deliver individual components of this toolbox. The following table outlines the directory structure and explains how to do this:

The Root Directory
index.htm / Homepage for entire toolbox. (set up the toolbox on your server so that it loads this page first)
default.htm / Default Entry page for toolbox (this page is for teacher’s and RTO’s use: learners should not see this page).
disclaim.htm / Disclaimer and copyright info.
credits.htm / Credits.
need.htm / Hardware and software requirements for the toolbox.
/styles/ / The linked style sheets for the content of the toolbox.
Please note that there are two versions of almost every style sheet: one is specifically for Netscape 4.7 and the other is for all other browsers. There is a sniffer function on most pages of the toolbox that determines which browser is being used and loads the appropriate style sheet. The N4.7 style sheet has a capital N in the name.
Eg. fabrics.css and fabricsN.css
/images/ / This directory contains all the generic images used throughout the toolbox.
/media/ / This contains the flash files which are linked to the home page (homepage.swf) and the default page (tester.swf).
/pages/ / All toolbox content is stored within the pages directory. This directory is broken into several sub-directories.
The Flash Originals directory
/flash originals/ / This folder contains all the original flash files for interactions in this toolbox. This directory is broken into sub-directories which are named by the unit and activity, or resource in which they appear in the toolbox.
The Teacher’s guide
/t_guide/ / This directory contains the teacher’s guide which is an RTF document.
The pages directory
/units/ / All of the units are stored within the units directory. Each unit has it’s own subdirectory named with an abbreviation of the unit’s name.
/js/ / The JavaScript files contained in this directory control:
  • the internal navigation
  • some interactions
  • style sheets
  • external window code
  • the functionality of the glossary
  • the functionality of the fabric library.
It is recommended that you do not alter these files unless it is absolutely necessary as this can cause errors to occur in the toolbox.
/comm/ / All files relating to the communication tools are in this directory.
/fabrics/ / All files relating to the Fabrics & Equipment resource are in this directory.
/facts/ / All files relating to the Facts & Figures resource are in this directory.
/instruc/ / All files relating to the Instruction Manual resource are in this directory.
/ohs/ / All files relating to the OHS Manual resource are in this directory.
please note: There is also a directory called /ohs/ in the units folder which is for the unit “Follow defined OHS procedures”
/tour/ / All of the files needed to run the tour section of the toolbox are stored within the tour directory.
The units directory
/images/ / All of the units are stored within the units directory. Each unit has it’s own subdirectory named with an abbreviation of the unit’s name.
cut1.htm
cut2.htm
cut3.htm
ohs.htm
qual.htm
sew1.htm
sew2.htm / These are the frameset pages for each of the 7 units of competency.
/cut1/ / All files relating to the unit ‘Cut work 1’ are in this directory.
/cut2/ / All files relating to the unit ‘Cut work 2’ are in this directory.
/cut3/ / All files relating to the unit ‘Cut work 3’ are in this directory.
/sew1/ / All files relating to the unit ‘Sew garments 1’ are in this directory.
/sew2/ / All files relating to the unit ‘Sew garments 2’ are in this directory.
/qual/ / All files relating to the unit ‘Apply quality standards’ are in this directory.
/ohs/ / All files relating to the unit ‘Follow defined occupational health and safety policies and procedures’ are in this directory.
The Cut work 1 unit directory /cut1/ (all unit directories use these same file naming conventions and directory structure)
/act1/ / All files relating to the activity 1 are in this directory.
/ act 2/ / All files relating to the activity 2 are in this directory.
/ act 3/ / All files relating to the activity 3 are in this directory.
/images/ / Images used throughout this unit (banners etc) are stored in this directory
descrip.htm / This is the overall task page for each activity
footer.htm / Footer for the task page
perform.htm / Performance criteria for the unit
sidenav.htm / The side navigation bar
Top.htm / The top banner for the unit
The Activity 1 directory /act1/ (all activity directories use these same file naming conventions and directory structure)
/images/ / Images used in this activity are stored in this directory
/ js/ / Contains the nav_data file for the activity (which stores the number of pages in that activity)
/ media/ / All SWF files (Flash movies) for interactions for the activity
Other pages /
  • f_set.htm – The frameset for the activity
  • page01.htm - The first page of the activity
  • All other pages are named in the sequence in which they display eg. page08.htm
  • The last page of every activity is named summary.htm
  • Text alternatvies for interactions are named textxx.htm where xx is the number of tha page in which the interaction appears Eg. text02.htm
  • number.htm – the footer containing the page navigation
  • perform.htm - Performance criteria for the activity
  • checklst.htm – The checklist for the activity

The resources directories: /fabrics/ /facts/ /instruc/ /ohs/ (all follow this structure)
/images/ / Images used in this resource are stored in this directory
The sub-directory /nav/ contains images for the menu
/ media/ / All SWF files (Flash movies) for this resource
Sub-directories / Each topic and it’s relevant pages are stored in their own directory Eg. fabrics/fibres/ contains sub-directories
/natural/
/synthetic/
/blends/
In some cases these sub-directories may contain a frameset in which case they will also contain a page titled nav.htm. In this case the frameset page contains the nav_data javascript on that actual page (it is not in a separate file as in the activity directories)
menu.htm / Contains the menu for the resource.

How can I deliver activities and/or units individually?

You can choose to install only select units, or select activities from one unit, on your server. It is important that you maintain the overall directory structure within the nominated directory on your server to make sure that links between pages remain functional.

To copy an individual unit
Copy all files and directory on the root directory of the CD except for the units directory.
Example:
To copy the unit LMTPRCL02AA: Cut Work 1 you would copy the directories to the right. / /units/cut1/
-and all the directories underneath
/units/images/
-and all the directories underneath
Make sure that the specific unit(s) that you copy to the server are located within the /units/ directory. Otherwise, the links between these units and pages in other directories may not function.
There is no need to copy across any of the other unit directories (or their corresponding graphics directories).
To select individual activities
To delete an activity from within a unit, follow the steps above to copy the unit, and then delete the activity directory.
Example:
For example to delete the activity ‘Bundle and Dispatch Cutwork’ from LMTPRCL02AA: Cut Work 1 follow the steps to the right. / Follow the steps above to copy all the resources, tools and the entire unit to the server.
Delete the act3 directory (and all subdirectories) from within the Cut1 directory.
Edit the descrip.htm page located in the Cut1 directory to remove the link to ‘Bundle and Dispatch Cutwork’ (activity 3).

Note that if you are delivering only select units discretely, you may need to edit the links to units on the homepage (index.htm). For example, you may want to give students access to one unit only, and prevent access to other units. To do this you will need to edit the flash file on the homepage. It is strongly recommended that you keep a copy of the original of this flash file in case you accidentally delete some necessary code or content.

Open the file “homepage.fla” in Flash. Open the Action script panel and view the script in the first frame of the layer named “script”. Delete (or comment out) all the code betweenthe comment tags that says:

//Button rollover behaviour and link to ‘unit xxx’

and

//------

This will deactivate the button so nothing happens when the student rolls over it, and also deactivate the link to this unit. If you wish to remove the button entirely from the homepage, expand the folder called ‘units’ in the timeline and go to the layer with the same name as the unit you are removing. Move the first frame of this layer to frame 2. This will stop the button from displaying on the homepage.

For example, to deny access to the unit Sew Garments 2,but leave the button on the homepage, you should delete the following code from the script in frame 1:

OR to deny access and hide the button altogether you should move the following key frame to frame 2 of the timeline, as highlighted by a red circle in the diagram below:

You will then need to export the file as “homepage.swf” to the /html/media/ directory.

You will also need to remove the screen reader navigation link (see accessibility issues below).

The majority of the content is produced in HTML with most of the interactions in Flash. This means that an HTML or text editor can be used to customise almost any content page inside the Fashion Toolbox, but to edit most interactions you will need to be a confident user of Macromedia Flash MX.

How do I add, delete or change the order of content screens in an activity?

Adding, deleting or changing the order of screens in an activity is a simple job. Access the directory for the activity you would like to change (for example units/cut1/act1) and locate the js directory. (units/cut1/act1/js). Look for a file called nav_data.js. This contains a sequenced list of all the content screens in the activity. The sequence represents the order in which screens are displayed within an activity.

Eg.

addPage("page01.htm");

addPage("page02.htm");

addPage("page03.htm");

addPage("page04.htm");

addPage("page05.htm");

addPage("page06.htm");

addPage("page07.htm");

addPage("page08.htm");

addPage("page09.htm");

addPage("summary.htm");

  • To add a new screen into the sequence, simply insert an addPage(“filename.htm”) into the desired position within the listed sequence, where filename.html is the name of the HTML page you would like to insert into the sequence. The new page must be placed in the activity directory.
  • To delete a screen from the sequence, simply remove the addPage(“filename.htm”); from the sequence, where filename.html is the name of the HTML page that you want removed.
  • To change the order of screens in the sequence, simply move the addPage element from one location in the sequence to your desired location.

How do I customise a menu?

The resource pages in the toolbox (such as the Instruction Manual) use a javascript expanding menu. Each resource has it’s own menu page menu.htm. On this page is the javascript which determines which menu item and highlights and expands when a link from an activity to a resource is clicked, and also collapses a topic when a different topic is selected from the menu. Further down the page is the html which lays out the menu items. It is important to note that the links which

So to add, delete or change a menu item you will need to edit both the javascript and the html on the page.

An example of a menu.htm file is shown below (for the OHS resource).

This image shows the way the menu displays. In this case the topic “Cutting” has been expanded, and the sub-topic “Using Machinery” is open in the right frame. Note that the book icon next to the current topic is highlighted, as is the arrow next to the current sub-topic.

The links in this menu are all images, so you will need to create a new image if you are adding to the menu. The original PSD templates for these images have been included – you will need Adobe Photoshop to edit them. Do not alter the size of the image – you can only use a short title. The PSDs are in the html/images/menu/ directory. If you do not have access to Adobe Photoshop, you can create your own image, as long as the size is 130x15 pixels. (Also in this folder you will find the PSDs for the page titles in the resources which may be useful if you are adding content).