Project Archive: eCDF 510 (2005-2006)
Tools for Delivering Scenario-Based E-learning both Locally and Across the Internet
 About the Project
  Contacts & Collaborators
  Project Publications
 About the Tools
  Support and Updates
Storyboarding and Delivering PBLi scenarios
 What's New!! (02/4/2009)


Home >Support >PBLi FAQ > Q12. Embedding images which open in a separate window

Q12. I've got images which are too big for the content window. I want these images to be embedded in the scenario file, but displayed in a new browser window when the user clicks on a link. How do I do this?

Q12. Before reading on, click here and, read (and/or print out) this information about how PBLi scenario files are organised when being constructed. *UNDERSTANDING THIS IS VERY IMPORTANT*

Assuming you have read and understood the information under the link above, now let's turn to the method. To tack this task requires some knowledge of how HTML pages work, but not in detail.

The sequence is divided into three parts. Firstly, making a simple HTML file which will display the image. Secondly, adding both this HTML file, and the image file it displays, to the scenario file itself. Finally linking to the (now internal) HTML page so it will be displayed in a separate window when the user clicks on it.

Part 1 - Make up a simple HTML page which holds the image.

Create a temporary directory and copy the image file into it. In that directory, construct a simple HTML page to display your image using an HTML editor or notepad. If entering code directly, the following will do.

<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<img src="myimage.jpg"">

You can add labels or other text to the page as you wish. Repace the italics with your own text. You can format this page however you like.

Save this file to whatever name seems appropriate (e.g. external-image.htm). Make sure the HTML file and image file are in the same directory. Check the file in a web browser to ensure it's displaying what you want. Whatever this file displays will be what users will see when they click the link in the scenario. Make sure you are happy with it before going any further.

Part 2 - Adding the HTML and image files directly to the *.scenario file

1. Ensure you are in the PBLi Builder WITH YOUR SCENARIO OPEN. (this is essential as these new files need to be "captured" when you save your scenario)

2. Manually (i.e. using the Windows Explorer file manager NOT PBLi) find the following directory on the hard drive...C:\Documents and Settings\(your user name)\Local Settings\Application Data\PBLiBuilder\ScenarioData\Media . This assumes the C: drive is the drive containing the Windows XP \Documents and Settings\ folder. (Your user name) will normally be the name you have logged in with. In that directory you should see other image files you may have pasted in in the course of constructing you scenario.

(Can't see any Local Settings folder under your username? If not, it could be that a folder setting on you computer is hiding them from you. With XP, in your File explorer window go to tools>folder options>view tab> and select "show hidden files and folders" in the option list. Then hit the button "apply to all folders". Close File Explorer and re-open. You should now be able to see those folders.)

3. Copy the image file, AND the HTML page which presents it, to the \Media directory.

4. Save your scenario (this will package the HTML file and image into your scenario file)

Part 3 - Linking to the image so it will be shown in a separate window

1. Now in PBLi with the scenario open go to the content window where you want to add the link to the image.

2. Click on the launch external editor button on the toolbar. Itís the one on the far right. This will open up your content window in an external HTML editor (this editor is set by going to Settings --> Preferences in the Builder menu. I tend to use Notepad for mine. Some people use Dreamweaver or the like)

3. You will see the HTML code that makes up a Content Page in HTML. In the HTML code, insert the following code where you want your image to appear.. ;<p><A href="../Media/external-image.htm" target=_blank>Click here</A> to see larger image</p>. (but replacing external-image.htm with your OWN HTML file name of course. You can also change the text outside the tags if you like). Make sure this code is somewhere between the two FORM tags (i.e. <FORM id=report action=../../AcceptReport.aspx method=post target=_parent> and </form>and not outside them or within them.

4. Save the file in the external editor, then close the external editor. You should now see a link at the appropriate place in the content window of PBLi .

5. Save the Scenario

10. Play the scenario to make sure the link works. If it doesn't ..

(a) Check that the image and html file have been put in the right place in step two.
(b) Check that the name of the file corresponds with the name given in the HTML tag.
(c) Check that the image tag in the HTML file contains no pathways. It should be calling the image from the same directory the HTML file is located in.


Latest Developments

Click the following for final reports on..

- PBL-interactive
- Challenge FRAP

Delivery of Outputs
- Institutional Visits
- Web Download

- Support/Updates

- View PBLi Scenarios

(Updated 2nd April 2009)


Copyright Massey University ©2006. All right reserved.