embedding the interactive interview exercise into … · web viewinteractive exercises for...

Interactive Exercises for Destinations®

Installation GuideThe Interactive Exercises are the result of a University of Reading - Centre for Career Management Skills Destinations® Fellowship project and were devised, designed and created by John McMenamin of the University of Westminster Careers and Student Employment department.

Contents

Manual Installation of the Interactive Exercises into Destinations®..............................2

Embedding the Interactive Exercises within Destinations®...........................................3

Instructions for adding the Interactive Interview exercise to an existing page....3

Instructions for creating a new page within Destinations®.................................4

Creating a new object for the Interactive Interview...................................4Creating the new unit for the Interactive Interview...................................5Editing the navigation and sitemap to include your new unit....................7Adding your new unit to the Destinations® sitemap.................................9

Instructions for adding the Interview Quiz and Interactive CV...........................10

Instructions for adding the Interview Quiz...............................................10Instructions for adding the Interactive CV...............................................13

Instructions for adding the Body Language Quiz................................................16

These instructions assume the following:

You have FTP access to the server hosting your Destinations® installation You know what FTP means You are comfortable with transferring files via an FTP client to and from the

server hosting your Destinations® installation

If any of the above concepts are alien to you, then you should pass these instructions to someone with familiarity with them. Ideally, these edits will be carried out by the person who managed your initial installation of Destinations®.

John McMenamin 04/12/2009

1

Interactive Exercises for Destinations® - Installation Guide

Manual Installation of the Interactive Exercises into Destinations®

The installation of the Interactive Exercises will be carried out in stages so that you can decide which of the exercises you wish to make available on your installation of Destinations®.

1) Download the DestinationsInteractives.zip file from the Destinations® Community Google-group page.

2) Extract the contents to a working folder. This can be deleted once the installation is completed.

The contents are stored in two folders: /flash and /video. These two folders follow the same directory structure as Destinations® and can be copied across to the existing installation without fear of overwriting existing content.

3) Access your Destinations® server using your preferred FTP client.

4) Copy the /flash and /video folders to the Destinations® root folder. The folders already exist and you will be adding additional content to them that does not overwrite any of the existing content.

That’s the easy part done. The next step is to go about adding the new content to Destinations®.

The procedure for adding new pages to Destinations® is a little complicated but not impossible. The instructions on the following pages will walk you through the process of adding the interactives as either additional content to existing pages or as new pages in their own right.

2


Embedding the Interactive Exercises within Destinations®

Instructions for the following:

Instructions for adding the exercises to existing pages within Destinations®

Instructions for creating a new page within Destinations® to house the exercise

Instructions for adding the Interactive Interview exercise to an existing page

It is assumed that you have already uploaded the Interactive Interview Exercise files to your installation of Destinations®.

1) Identify the page that you wish to add content to (navigate to it and check address bar): For example, /units/unit-int031.shtml

2) Download the .shtml file from your file server and open it in Notepad.

3) Identify the object relating to the content. In the example below, the object is “objects/info-0110.htm”:

4) You can close the shtml file now as you will no longer need it.

5) Open the relevant .htm file relating to the content from the “objects” folder (info-0110.htm in the above example) Note: it may be necessary for you to download the file in order to edit it.

6) Identify where within the page you would like to include the interactive exercise and then paste the code below in the appropriate place:

<span class="imgCenter" id="activity">You need <a href="../html/players.shtml">Flash Player</a> 8 or above to use this feature.<br />You will also need javascript enabled in your browser.<br /> </span> <script type="text/javascript"> //<![CDATA[

3

var FO = {

movie:"../flash/InteractiveInterview.swf",width:"750",height:"550",majorversion:"8",build:"0",bgcolor:"#FFFFFF"}; UFO.create(FO,"activity"); //]]> </script>

7) Upload the modified object page and test it.

Instructions for creating a new page within Destinations®

It is assumed that you have already uploaded the Interactive exercises to your installation of Destinations®.

There are 2 files that you will need to create in order to introduce new content and a further 2 files that you will need to edit to show the new content.

Note: The naming of the files isn’t very important, as long as you know and have a record of the files you create/edit for future reference.

The two files you will create will be:

Object – this is the actual content Unit – this is the page that contains the content

The two files you will edit will be:

Nav file – this is the page navigation and you will need to add your new unit/object to it

Site map – you will need to add your new page to the site map in order for it to be found via the site map route

Creating a new object for the Interactive Interview

1) Create your new object using Notepad.

The content of the new object is entirely up to you but must contain the code between the two red arrows below. If you would like to have a simple page that comprises only the interactive exercise then the object file will be as follows:

 <div id="rightMenu">

</div>  <div id="middlebox">

 <span class="imgCenter" id="activity">You need <a href="../html/players.shtml">Flash Player</a> 8 or above to use this feature.<br />You will also need javascript enabled in your browser.<br /> </span> <script type="text/javascript"> //<![CDATA[

4

var FO = {

movie:"../flash/InteractiveInterview.swf",width:"750",height:"550",majorversion:"8",build:"0",bgcolor:"#FFFFFF"}; UFO.create(FO,"activity"); //]]> </script></div>

Any additional content you wish to add above or below the interactive exercise should be inserted at the points indicated by the dotted lines above.

2) Save this file with the .htm extension and upload it to the /units/objects folder within your Destinations® installation.

3) Make a note of the filename as you will need it for the next step.

Creating the new unit for the Interactive Interview

It is necessary to create a new unit in which to house your new object. Units are stored in the /units folder.

1) As before, create your new unit using Notepad

The content of the unit file should be as follows. Copy and paste this into Notepad. The areas that you will need to edit are in red (note: the asterisks are included to make the areas easier to see and should not be included):

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB" >

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="GENERATOR" content="upCast/5.4.2 (Java; I) [infinity-loop]" /> <meta http-equiv="GENERATOR" content="upCast/5.4.2 (Java; I) [infinity-loop]" /> <meta name="Author" content="** Your name here **" /> <meta name="lastChanged" content="** Today’s date here **" /> <meta name="Classification" content="Object" />

<title>** Title of the unit here **</title>  <link rel="stylesheet" type="text/css" href="../css/css-default.css" title="Default" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-access.css" title="Access" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-smaller.css" title="For smaller screens" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-larger.css" title="For high screen resolutions" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-highcontrast.css" title="High contrast" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-lowcontrast.css" title="Low contrast" />

5


Editing the navigation and sitemap to include your new unit

In order for your new unit to appear within Destinations® you will need to add it to the navigation and sitemap. For the purposes of these instructions, it is assumed that you will be adding the new unit to the Interviews section. If you are adding your unit to a different section you should substitute the appropriate nav file where int-nav is used here.

Before you start the editing process, you should first decide where you want your unit to appear within the navigation. In the example below, it was decided to put the new unit between the “Be the STAR of your interview” and “Ask questions!” units. All you need do is take a note of the name of the unit that will be immediately above where your new unit will be going. In the below example this will be “Be the STAR of your interview”.

Before: After:

1) Download the int-nav.htm file from the /includes folder

2) Open the int-nav.htm file in Notepad

3) Find the entry for the unit that will precede your new unit (eg Be the STAR of your interview), you can do this using Edit > Find.

7


4) Having found the entry you will need to move your cursor to the end of this line

of code which ends with </li> (see red arrow above)5) Now, with your cursor at the end of the line, you should copy and paste the

following. As before, replace the red text with the specified content:<li><a href="** filename of your new unit.shtml **" title="** preferred title for the new unit **"><span class="hide">8 </span>** preferred title for the new unit **</a></li>

Your new entry should look like this:

6) Save your modified int-nav.htm file.7) Rename the existing int-nav.htm file on the server to int-nav.old if you want the

option to undo the changes you have made at a later date.8) Upload the modified int-nav.htm file to the server in the /includes folder.

Your new unit should now be visible within Destinations®. The next step will add your new page to the Destinations® sitemap.

8


Adding your new unit to the Destinations® sitemap

This is a very similar procedure to the int-nav edit in the last step.

1) Download the sitemap.shtml file from the /html folder of your Destinations® installation.

2) Open the sitemap.shtml file in Notepad.

3) As before, search for the unit that precedes your new unit in the navigation.

4) Move to the end of the entry for the preceding unit, again this will be </li>.

5) Copy and paste the following at the end of the preceding unit’s entry:

<li><a href="../units/** filename of your new unit.shtml **" title="Click to visit ** title of your new unit **"><span class="hide">** The title of the section in which your new unit appears, eg “On the day” ** - </span>** title of your new unit **</a></li>

There are a lot of elements for you to edit here, so to help you here’s an example of the entry used in the examples so far:

<li><a href="../units/unit-int051.shtml" title="Click to visit Interactive Interview Exercise"><span class="hide">On the day - </span>Interactive Interview Exercise</a></li>

6) Save your sitemap.shtml

7) Rename the existing sitemap.shtml on the server to sitemap.old if you want the option to undo the changes you have made at a later date.

8) Upload the modified sitemap.shtml to the server in the /html folder.

Your new unit is now fully integrated into Destinations®.

9

Instructions for adding the Interview Quiz and Interactive CV

As the procedure for adding these exercises is largely the same as for the one detailed above, the instructions for these exercises will deal only with the “Creating a new object” section. Suggestions will be made for an appropriate location for each of the exercises and the relevant files to be edited will be identified.

For each of the exercises you will need to edit or create an object and unit file. If adding a new unit and object then you will also need to edit the relevant nav file and the sitemap as explained on pages 7-9.

Instructions for adding the Interview Quiz

Suggested location -

Topic: InterviewsSection: On the DayLocation: As a new unit located between “After your interview” and “Find out more”

Files to be created –

.htm Object file within /units/objects/ - see below for content

.shtml Unit file within /units – see below for content

Related files –

Nav file: /includes/int-nav.htm – edit as per instructions on pages 7-9Sitemap: /html/sitemap.shtml – edit as per instructions on pages 7-9 Creating a new object for the Interview Quiz

1) Create the new object using Notepad.




 <span class="imgCenter" id="activity">You need <a href="../html/players.shtml">Flash Player</a> 8 or above to use this feature.<br />You will also need javascript enabled in your browser.<br /> </span> <script type="text/javascript"> //<![CDATA[ var FO = {

10

movie:"../flash/InterviewQuiz.swf",width:"750",height:"550",majorversion:"8",build:"0",bgcolor:"#FFFFFF"}; UFO.create(FO,"activity"); //]]> </script></div>




Creating the new unit for the Interview Quiz

It is necessary to create a new unit in which to house the new object. Units are stored in the /units folder.





<title>** Title of the unit here **</title>  <link rel="stylesheet" type="text/css" href="../css/css-default.css" title="Default" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-access.css" title="Access" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-smaller.css" title="For smaller screens" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-larger.css" title="For high screen resolutions" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-highcontrast.css" title="High contrast" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-lowcontrast.css" title="Low contrast" /> <script type="text/javascript" src="../scripts/styleswitcher.js"></script>

11

Instructions for adding the Interactive CV

Suggested location -Topic: CVsSection: How to target your CVLocation: As a new unit located between “Target yourself to criteria” and “Find out more”Files to be created –.htm Object file within /units/objects/ - see below for content.shtml Unit file within /units – see below for contentRelated files –Nav file: /includes/cv-nav.htm – edit as per instructions on pages 7-9Sitemap: /html/sitemap.shtml – edit as per instructions on pages 7-9 Creating a new object for the Interactive CV

4) Create the new object using Notepad.




 <span class="imgCenter" id="activity">You need <a href="../html/players.shtml">Flash Player</a> 8 or above to use this feature.<br />You will also need javascript enabled in your browser.<br /> </span> <script type="text/javascript"> //<![CDATA[ var FO = {

movie:"../flash/InteractiveCV.swf",width:"750",height:"550",majorversion:"8",build:"0",bgcolor:"#FFFFFF"}; UFO.create(FO,"activity"); //]]> </script></div>




13

Creating the new unit for the Interactive CV

It is necessary to create a new unit in which to house the new object. Units are stored in the /units folder.





<title>** Title of the unit here **</title>  <link rel="stylesheet" type="text/css" href="../css/css-default.css" title="Default" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-access.css" title="Access" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-smaller.css" title="For smaller screens" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-larger.css" title="For high screen resolutions" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-highcontrast.css" title="High contrast" /> <link rel="alternate stylesheet" type="text/css" href="../css/css-lowcontrast.css" title="Low contrast" /> <script type="text/javascript" src="../scripts/styleswitcher.js"></script> <link rel="stylesheet" type="text/css" href="../css/css-print.css" media="print" /> <link rel="icon" href="../favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <script type="text/javascript" src="../scripts/ufo.js"></script> <script type="text/javascript" src="../scripts/fsp.js"></script> <script type="text/javascript" src="../scripts/reveal_hide.js"></script> <script type="text/javascript" src="../scripts/util-functions.js"></script> <script type="text/javascript" src="../scripts/clear-default-text.js"></script> <script type="text/javascript" src="../scripts/textarea.js"></script> <script type="text/javascript" src="../scripts/openwindow.js"></script> <script type="text/javascript" src="../scripts/listCollapse.js"></script>

14


Instructions for adding the Body Language Quiz

Suggested location -Topic: InterviewsSection: Body LanguageLocation: To replace the existing Body Language exercise

Files to be created –NoneRelated files –

act-0009.htm – edit as per instructions belowNav file: /includes/int-nav.htm – edit as per instructions on pages 7-9Sitemap: /html/sitemap.shtml – edit as per instructions on pages 7-9

1) Download the act-0009.htm file from /units/objects2) Rename the act-0009.htm file on the server to act-0009.old in case you wish to

under this action at a later date.3) Open the act-0009.htm file in Notepad 4) Replace the following:

<script type="text/javascript"> //<![CDATA[ var FO = { movie:"../flash/act-0009.swf",width:"350",

height:"350",majorversion:"8",build:"0",bgcolor:"#FFFFFF"}; UFO.create(FO,"activity1"); //]]></script>

with:<script type="text/javascript"> //<![CDATA[ var FO = {

movie:"../flash/BodyLanguageQuiz.swf",width:"550",height:"400",majorversion:"8",build:"0",bgcolor:"#FFFFFF"}; UFO.create(FO,"activity1"); //]]></script>

5) While you are here you can amend a typo in the original Destinations® file. Towards the end of the file – “inteview” should be “interview”:

6) Save the act-0009.htm file and upload it to the server.7) The old body language exercise should now have been replaced with the newer

one.

16

embedding the interactive interview exercise into … · web viewinteractive exercises for...

Documents