The Wrap! Files

The Wrap!

Welcome to The Wrap! This is a semi-automated learning object wrapper. It uses javascript to interpret the contents of a text file and generate a webpage containing media and interactive components. By editing the contents of a few files and folders, you can build your own media-rich interactive web content.

What it contains

The Wrap! consists of a number of different files and folders. Each has a specific role in making The Wrap! work.

The index_tall and index_wide.htm file are webpages that bring all of the functional parts of The Wrap! together and render as media-rich interactive pages. They both display exactly the same content - one displays it in a tall-page format, the other in a wide, two-column format. These pages shouldn't be edited.

Once you know what format you wish to use, you can always rename your preferred format page as index.htm, and delete the other one.

The icons folder contains a collection of icons that can be used to embellish text. These are usually placed at the beginning of a paragraph. When these icons are rendered in the webpage, they present at full size. These can be edited and/or replaced.

The media folder stores all of the images, audio, video and flash files that are to be included in the page. This folder also contains 'players' that allow audio and video to be rendered in the page. Media can be deleted from /replaced in this folder, but the players must not be deleted.

The scripts folder contains the programs that make The Wrap! work. These scripts read the .txt file, parse it, embed the media, build the interactive components and check user responses. This folder and its contents must not be edited.

The styles folder contains a single file named default.css - this is a stylesheet that specifies page/font styles, sizes and colors. This file can be edited or replaced, but any replacement stylesheet must be named default.css for The Wrap! to work.

The downloads folder stores any documents, files, etc. that you wish to link to for the purposes of downloading from your learning object.

The text folder contains 4 text files - head.txt, first.txt, second.txt and foot.txt - these files contains the content of the finished page. These are simple text files, and as such cannot contain the fancy formatting that word processors generate. They should be edited using a simple text editor such as MS Notepad. These file can be edited or replaced, but any replacement file must have the same name for The Wrap! to work.

If you wish to edit the xxxx.txt files using MS Word, save a copy of the file as a word document (xxxx.doc) first. When you have finished editing the file, save it as a plain text (xxxx.txt) file, replace the original file and check the 'allow character substitution' box to ensure that smart quotes, etc. are replaced with simple characters.

Having said all this, none of The Wrap! is encrypted or protected in any way. If you have the skills to modify this package to better suit your needs, then go for it!

How it works

If you double-click on the index.htm file, it will try to open in your default web browser. You may get a warning that scripts are trying to run - if this happens, you must allow the scripts to run if you want the page to work. These scripts build an interactive webpage according to information contained in the .txt file.

The ability of The Wrap! to work is limited by the browser that is used to render the webpage. At the moment, The Wrap! works consistently in Firefox and Safari, and most functionality appears to work in Internet Explorer. Googe Chrome won't allow The Wrap! to access the .txt file at the moment.

Objects built using The Wrap! are intended to work from both local storage devices (e.g. datasticks) and servers.

The .txt file contains three different types of content.

1. Comments. Comments in the .txt are always preceded by two slashes //. These tell The Wrap! to ignore the comment when the webpage is rendered. Comments allow you to document what the learning object is trying to do. Use them as and when you see fit.

2. Paragraph text. Any text that is simply typed into the .txt file without comment slashes will be rendered as text in the webpage. Formatted text (for example, headings, tables or dot-point lists) must be built differently.

3. Functional text. This includes media information, formatted text information and interaction information. Functional text is always contained within [ square brackets ]. The Wrap! identifies functional text by the use of these brackets. For this reason, [ square brackets ] cannot be used for any other purpose. Information contained within the square brackets is separated by double (||) and single (|) vertical lines. For The Wrap! to understand what is intended by or expected from the functional text, there are rules for how functional text is written. These are straightforward but necessary.

The flow of content in the rendered page matches the flow of text in the .txt file.

Functional text: media

Media is embedded into the webpage by including functional strings like the ones below into the .txt file. The following examples will demonstrate how media is embedded.

Images

[ img || demo.jpg || left | center | right | thumb | full ]

Functional text always begins with a defining three-character code - in this case, 'img' for image. This is followed by a || delimiter and then the image filename. The Wrap! currently accepts .jpg, .gif and .png images. Following a second || delimiter, you can put one or more parameters separated by a | delimiter. This example shows you all of the current parameters that you can control. So, if you write left followed by center, you'll get it centered. Your images must be stored in the media folder. If no parameters are included, you don't need to use the second || and the default will be left-aligned and thumbnail-sized.

Icons

[ icn || demo.gif ] Unlike images, icons are always rendered full-size, and left-aligned. Therefore, they don't have any parameters to add. They can (and should) be specified at the beginning of a paragraph, as in this example. Remember that icons are stored in the icons folder, and not in the media folder. 

Audio

[ mp3 || demo.mp3 || left | center | right | small | large | auto ]

Compare this with the previous example. The Wrap! currently only plays .mp3 audio files. The auto parameter will make the audio play automatically when the page loads. Your mp3 files must be stored in the media folder, alongside the media player. With no parameters included, the default player bar on the page will be left-aligned and small.

Video

[ flv || demo.flv || small | medium | large | normal | wide | left | center | right ]

Compare this with the previous examples. The Wrap! currently only plays .flv video files. The normal parameter sets the movie player to a 4:3 aspect ratio; the wide parameter sets the aspect ratio to 16:9. your flv files must be stored in the media folder, alongside the media player. With no parameters included, the default video player will be small, normal and left-aligned on the page.

Flash

[ swf || demo.swf || small | medium | large | normal | wide | left | center | right ]

Compare this with the previous examples. The normal parameter sets the flash object to a 4:3 aspect ratio; the wide parameter sets the aspect ratio to 16:9. Your flash files must be stored in the media folder. With no parameters included, the flash object will render as small, normal and left-aligned on the page.

Functional text: formatted text

Headings

Headings can be put into the webpage by using the hd1 - hd6 codes, followed by the text of the heading. These correspond with the H1 - H6 html tags, and can be tweaked by modifying the stylesheet default.css in the styles folder. The standard default.css stylesheet sets hd1, hd3 and hd5 as centered, and hd2, hd4 and hd6 as left-aligned.

[ hd1 || text ] <=> large, centered		[ hd2 || text ] <=> large, left-aligned

[ hd3 || text ] <=> medium, centered	[ hd4 || text ] <=> medium, left-aligned

[ hd5 || text ] <=> small, centered		[ hd6 || text ] <=> small, left-aligned (same as text)

Lists

Lists come in two basic types - dot point lists and numbered lists. These are embedded by declaring either the 'dot' (for dot points), 'num' (for numbered points 1. 2. 3. etc.), 'abc' (for lettered points a. b. c. etc.) or 'rom' (for roman numeraled points i. ii. iii. etc.) list code, followed by the points in order.

[ dot || point 1 | point 2 | point 3 ]

[ num || point 1 | point 2 | point 3 ]

[ abc || point 1 | point 2 | point 3 ]

[ rom || point 1 | point 2 | point 3 ]

Tables

Simple tables can be embedded using the 'tab' code. The table content should be presented, row by row, cell by cell, separated by single | delimiters. Finally, you must specify how many columns are in the table. Blank cells in the table will be included if you leave blank spaces in the table content sequence.

[ tab || content | content | content | content | content || #_of_cols ]

Text Input

[ txt ] will place a generic text input box on the page. When the text box is exited, whatever is in the box will be embedded in the page in the same location, in bold type.

Date

[ dat ] will place a date on the page in DD / MM / YYYY format.

Page Timer

[ tmr || #_of_mins ] will place a timer on the page. After the number of minutes indicated, the timer will turn red to indicate that the nominal amout of time to spend on the page has been exceededd.

Print Button

[ prt ] will place a 'Print' button on the page. When the button is clicked, the print dialog box will appear.

Refresh Button

[ rfr ] will place a 'Refresh' button on the page. When the button is clicked, the page will refresh and all responses and other entries will be lost.

Web Link

[ lnk || link text || complete web address ] will place a hyperlink in the flow of the text. When clicked, the linked web location will open in a new window or tab.

Download Link

[ dwn || link text || filename ] will place a hyperlink in the flow of the text that links to a file that has been placed in the downloads folder. Clicking on the link will attempt to open a fresh window to display the file. Depending on your browser, the document may open in the window, or the download may start automatically. 

Functional text: interaction

All interactions are about capturing responses from the user. These responses will typically be in response to some question embedded in the page. The question is completely separated from the response in the way that The Wrap! functions. This means that the question can be asked using text, audio or video. Responses are captured using a variety of different form fields - text boxes, radio buttons, drop-boxes and check-boxes.

All interactions are defined in basically the same way: - [ type || acceptable / unacceptable responses || feedback ]. Whenever feedback is included, a 'Feedback' button appears after the response is checked, and clicking on this button shows the feedback in an alert box.

When responses are checked, the response field is disabled, and then coloured green or red depending on whether the response was acceptable or not. Disabling the response field is done to ensure that the check response is always consistent with the first user response entered. 

Short-Text Response

[ str || correct | correct || feedback ]

This will put an input text box on the page, followed by a 'Check' button. When the button is clicked, the page will compare what has been entered in the box with all of the correct offerings listed. If it matches any of them, it will be marked correct.

Yes/No Response

[ ynr || y || feedback ] or [ ynr || n || feedback ]

This will put 'yes' and 'no' radio buttons on the page, followed by a 'Check' button. When the button is clicked, the page will compare what radio button has been selected with the correct value listed. If they match, it will be marked correct.

True/False Response

[ tfr || t || feedback ] or [ tfr || f || feedback ]

This will put 'true' and 'false' radio buttons on the page, followed by a 'Check' button. When the button is clicked, the page will compare what radio button has been selected with the correct value listed. If they match, it will be marked correct.

Static-Choice Response

[ scr || *incorrect | correct |*incorrect | *incorrect || feedback ]

This will put radio buttons next to each of the correct / incorrect responses in the order given, followed by a 'Check' button. Incorrect choices must be marked with an asterisk so that the page knows which responses are correct and/or incorrect. When the button is clicked, the page will compare what radio button has been selected with the correct value listed. If they match, it will be marked correct.

Random-Choice Response

[ rcr || correct | *incorrect |*incorrect | *incorrect || feedback ]

This will put radio buttons next to each of the correct / incorrect responses, with the responses being randomly sequenced, followed by a 'Check' button. Incorrect choices must be marked with an asterisk so that the page knows which responses are correct and/or incorrect. When the button is clicked, the page will compare what radio button has been selected with the correct value listed. If they match, it will be marked correct.

Static-Drop Response

[ sdr || *incorrect | correct |*incorrect | *incorrect || feedback ]

This will put all responses in a drop box, in the order given, followed by a 'Check' button. Incorrect choices must be marked with an asterisk so that the page knows which responses are correct and/or incorrect. When the button is clicked, the page will compare what selection has been made in the drop box with the correct response. If they match, it will be marked correct.

Random-Drop Response

[ rdr || correct | *incorrect |*incorrect | *incorrect || feedback ]

This will put all responses in a drop box, with the responses being randomly sequenced, followed by a 'Check' button. Incorrect choices must be marked with an asterisk so that the page knows which responses are correct and/or incorrect. When the button is clicked, the page will compare what selection has been made in the drop box with the correct response. If they match, it will be marked correct.

Static-Multiple Response

[ smr || correct | *incorrect | correct | *incorrect || feedback ]

This will put check boxes next to each of the correct / incorrect responses in the order given, followed by a 'Check' button. Incorrect choices must be marked with an asterisk so that the page knows which responses are correct and/or incorrect. When the button is clicked, the page will compare each of the check boxes with the correct responses listed. If all correct responses are matched, it will be marked correct.

Random-Multiple Response

[ rmr || correct | correct | *incorrect | *incorrect || feedback ]

This will put check boxes next to each of the correct / incorrect responses, with the responses being randomly sequenced, followed by a 'Check' button. Incorrect choices must be marked with an asterisk so that the page knows which responses are correct and/or incorrect. When the button is clicked, the page will compare each of the check boxes with the correct responses listed. If all correct responses are matched, it will be marked correct.

Sort-Order Response

[ sor || first | second | third | fourth | fifth || feedback ]

This will randomly sequence the responses, placing 'shuffle' buttons between them, followed by a 'Check' button. When the 'Check' button is clicked, the page will compare the response sequence with the original sequence. If they are the same, the response will be marked correct.