<p>Deactivate your POPUP Blocker!</p><p>BEFORE GOING ANY FURTHER PLEASE ENSURE THAT YOUR POPUP BLOCKER(S) IS/ARE DEACTIVATED. </p><p>THIS CONTENT AND ALL NISL-Ecological Informatics CONTENT USES POPUPS.</p><p>Click here to do the POPUP check! POPUP</p><p>POPUP Check: If you can see this message you are fine!</p><p>Image Source: http://www.danzigercartoons.com/cmp/2005/danziger2296.html</p><p><size>scrolling</size></p><p>So you have gone through your courseGenie Introductory Tutorials</p><p>A list of these will be made!</p><p>FILES that you will need to customize your courseGenie document for publication under the NISL-EI programme</p><p>1) A NISL.zip file which is the template that needs to be unzipped and put into the Coursegenie Config (here is the link and use “save target as” in Internet Explorer or just save the file locally from this web folder) http://planet.uwc.ac.za/nisl/tutorial/files/</p><p>2) When you unzip it will generate a folder named NISL – (to be put within the Config Folder) you will then need to add the following to the schemes.dat file using a text editor (WordPad) NISL,NISL</p><p>After doing this you can open you courseGenie and under settings you will then point it to the NISL Scheme. </p><p>(The Orange theme is to link to our Departmental BCB Corporate colours - but is designed to also reflect the NISL Grey with Rainbow Africa branding.)</p><p>2) A demo.doc - you can use these to author various functionality into Course Genie - I have also attached a zipped file which you can unzip and examine the structure of the SCO (Sharable Content Objects). The link to this authored content is at the following URL - http://planet.uwc.ac.za/nisl/tutorial/docs/</p><p>3) A metadata.dat file - please modify by adding the current data and if your authored it your name and the names of others who wrote were involved with the content development (note I have put my name in - as a generic entry for the metadata.) Please copy this root folder (usually C:\) - you will then be able to import the metadata into your document. http://planet.uwc.ac.za/nisl/tutorial/files/</p><p>Angle Brackets: VERY IMPORTANT!</p><p>The angled bracket characters (usually used as less “~<” than and greater than ”~>” signs) have a special meaning when the document is exported to XML. If you want to use them in your document you have to prefix them with a tilde sign ( ~ ) to show that they are meant literally. For example to say “If x is greater than y” you would use:</p><p>If x ~ ~> y (make sure there is no space between the ~ and the ~>)</p><p>To say ‘income is less than expenditure’ you use: income ~ ~< expenditure (make sure there is no space between the ~ and the ~>)</p><p>Accessibility Check</p><p>With the introduction of the Disabilities Discrimination Act in the UK and Section 508 in the USA, the need for eLearning content to be accessible has become a legal requirement rather than an optional extra – almost definitely South Africa will follow shortly. </p><p>This means certain standards have to be met with respect and briefly these are…</p><p>Layout and Structure</p><p>1. Use headings in content consistently provide text descriptions for each image.</p><p>2. Use a consistent built-in styles to specify caption, summary, row and column headers for data tables</p><p>3. Use the Metadata dialog box to add meta-data in the Word source document </p><p>Navigation</p><p>1. Use clear, descriptive text for hyperlinks</p><p>2. Either set hyperlinks to open content in the main window, or warn users in the text of the page that hyperlinks will open a new window</p><p>3. Either set popups to open content in the main window, or warn users in the text of the page that popups will open a new window</p><p>4. Use short meaningful text for page titles Colour</p><p>1. Avoid certain colour combinations e.g. “red on green” and ”green on red” as this cannot be seen by colour-blind persons. </p><p>2. A rarer form of colour-blindness involves blue with yellow/orange so cyan letters on an orange background is really difficult for some people to read. 3. Ensure that you have reasonable contrast between lettering and the background Text</p><p>1. Use clear, simple language Images</p><p>1. Add meaningful alt text to all images using the standard Word method</p><p>2. For complex images, add a D-Link to a page containing a long description of the image</p><p>3. Avoid flickering images and unnecessary animated images</p><p>4. Avoid using images of text Multimedia</p><p>1. For audio clips, use the D-Link feature to provide a text transcript</p><p>2. For video clips, either make sure the video is captioned or use the D-Link feature to provide a text description</p><p>3. For video clips, provide a link to an audio file describing the video content</p><p>4. Use the option to automatically generate a link to download the appropriate player</p><p>Scripts and forms</p><p>1. If selftest questions are used, provide an accessible alternative - for example put answers on a following page, or link to a text document version of the selftest</p><p>Metadata</p><p>Access the Metadata from the courseGenie menu This will open up the following dialogue box</p><p>Initially select the Export Tab and this wil open the following dialogue box Select the Import Metadata</p><p>Many of the fields in your Metadata will now have been filled in with information, you now simply need to edit this information so that it is correct for the specific document you wish to publish.</p><p>Under the Description Tab complete the following fields which will be unique to this document</p><p> Title</p><p> Description</p><p> Keywords</p><p> Objectives Description, Keywords and Objectives are all captured in the HTML code that is viewable (View | Souce | in Internet Explorer) e.g. “A CourseGenie Demonstration” and this will become the Heading for the entire document</p><p>Under the Rights Tab you will only need to change the Author</p><p>Under the Version Tab you will only need to insert the correct date.</p><p>That completes the Metadata</p><p>Settings: General</p><p>Access the Settings from the courseGenie menu. This will default to the General Tab</p><p>Please ensure that Page root is set to page (as depicted in the graphic above) – if this is NOT done you will not be able to view the SCORM in KNISL </p><p>In the Footer you can add some HTML to create links to NISL login, to our Home Page and email details for feed back. Here is some specimen HTML that you can copy and paste into the Footer.</p><p>~<a target="_blank" href=http://knisl.uwc.ac.za~> NISL-EI~</a~> | Go to ~<a target="_blank" href=http://planet.uwc.ac.za~> Planet Website~</a~> | ~<a href=mailto:[email protected]~>Feedback~</a~></p><p>It is very important that you include your Email Address under Feedback</p><p>If you have correctly unzipped and installed the NISL template you will be able to select NISL from the Scheme drop down.</p><p>Ensure that the Media Box is ticked but I suggest that Accessibility Check is not ticked (as depicted in the graphic above) unless you have been very good and provide every image with an ALT Tag.</p><p>Making ALT Links</p><p>To put ALT tags on an image in MS Word you use the Format Image - to access this you simply click once on your image and a black box will be drawn around it which you can drag to make it bigger and smaller. Click again an menu will appear from which you select Format Picture. On selecting the Format Picture the following dialogue box will appear Complete your description and click OK to insert ALT Tags for providing alternative text to your picture.</p><p>If you are sure that all images have ALT tags and were saved in separate folder and the image inserted it would be a good choice to tick the Accessibility Check box. This will also check each of your Tables and that you have inserted headers for them. Settings: Navigation</p><p>Access the Settings from the courseGenie menu. You can now move to the Navigation Tab For developing SCORN in KEWL NextGEN it is useful to give full navigation so you should tick the Index Page to generate a Front Page for your website which is essentially a site map since it produces a link to every html page. The Index Page for this Tutorial for setting up courseGenie authored content for the NISL programme – there is hover for each link in the entire tutorial. The structure is managed at two levels – the Chapter level indicated by Capital Letters and the Page level indicated by numbers.</p><p>It is ABSOLUTELY ESSENTIAL to provide Navigation Buttons by ticking the Buttons box. FAILURE to tick this box will mean that will have no navigation in your application. The reason for the Button Box is for commercial Learning Management Systems like WebCT and BlackBoard you can import the SCORM and it will use its own navigation. KEWL.NextGen simply unzips the content so you will need to provide the navigation. The Navigation buttons are provided with a Hover and Mouse Over effects the Arrows and NISL will change to Orange.</p><p>The Navigation for courseGenie authored content which is provided at both the top and the bottom of the page to reduce the need for unnecessary scrolling. </p><p>The Navigation Column is extremely useful since it provides Chapter headings and the title for each page of content so you can jump from one page to another page rather than going linearly forward and backward. You can set the width for the Navigation Column which for NISL must be set to 180 pixels wide.</p><p>The Sections provides different ways of presenting your Navigation Column. Since most NISL courses are quite long and typically are composed of some 300 plus HTML pages it is important that you tick Show sections and just pages in current selection under Sections. It is IMPORTANT that you un-tick both the Hyperlinks and the Popups so that these documents open up in their own window rather than Parent Window since it would then be very easy to close application while exploring the link.</p><p>In the Settings Dialogue Box illustrated above in this page all the settings have been correctly reflected so all you need do is have the exactly the same settings as illustrated and everything will be fine.</p><p>The Content tab simply lists the various output options. If you simply wanting HTML content to put onto you website use the Normal HTML pages. For NISL use the SCORM v1.2 package – this will produce both the HTML and a zipped SORM package. The zipped SCORM is used to upload content to KEWL.NextGen.</p><p>The Assessment column simply allows you to export your quizzes to a management system. As KEWL.NextGen does not have any tracking and mark management system you do not export the assessment (as illustrated below) Checking your Media Files</p><p>This is a very short media clip and is by way an introduction to this tutorial and should start automatically. It was developed using Audacity and exported as an MP3 file. MEDIA: realaudio</p><p>Using the couseGenie and the Media will give you access to inserting various media objects. In the example below we have inserted the introduction that you are hearing into the web page. Since the Autostart button is ticked it wil start automatically In line with our compliance policy you will need to add information using the Accessibility Tab. In the example below we are providing a Description TAG and provide a link to download the appropriate Media Player. It is important that these setting are always used. Publishing your content</p><p>OK so you now have all the material in your Word Document appropriately Marked Up with the courseGenie Style Sheets. In this case I going to assume that you have been GOOD and did all of the step to make sure this is Disability Compliant in which case you will need to use the following settings…. From the couseGenie and the Generate Course… </p><p>You will be asked where you wish to publish you material on your Local PC. It will produce a Folder that is the SAME NAME as your MS Word document. In the case below this is not the first time we have published the material so a folder called NISL_COURSEGENIE already exists and so you simply overwrite the contents into this folder. If all goes well you will get the following confirmation dialogue box </p><p>Before closing use the Check Box to Preview in Browser. Troubleshooting problems in generation of content</p><p>It WILL happen that your content does not get generated and there are usually a few simple reasons why this has happened.</p><p>The following are the main reasons</p><p>1. Images have no ALT Tags 2. Tables have split cells or are without formatting Tags for Columns and Rows 3. There are either ~< or ~> characters in your text which have not got the tilde sign ( ~ ) put in front of them so the XML generation is informed to ignore these characters.</p><p>Images ALT Tags</p><p>If you get the following Message while it is generating the content it means that you checked the Accessibility box and there is a missing Alternative Text description for the image. The Image with the missing Alt Text tags will be shown to help you correct the problem.</p><p>If this has occurred your content will not be generated and you will get the following Error Message at the end of the operation. You will need to follow the instruction provided in the Alert box and re-submit your material for content generation.</p><p>Invalid Tables</p><p>Below illustrates a table that was incorrectly formatted for courseGenie</p><p>Table 1: Three common web browsers and the operating systems that they are supported on.</p><p>In the above table the second row has split cells and this will produce the following Error Message</p><p>Under no circumstance will this table be able to be published using courseGenie.</p><p>In the Table below the split cells have been taken out and the table now has uniform rows and columns. Spaces have been used to separate Linux from Windows under the FireFox</p><p>Table 1: Three common web browsers and the operating systems that they are supported on.</p><p>If you have your Accessibility box checked. The Accessibility box will prevent any Table without formatted “headings” for columns and rows to be generated At this point you could opt to uncheck the Accessibility box or you can add Formatting to “headings” for columns and rows. If you chose the later you can generate a table that looks like the following: </p><p>Table 1: Three common web browsers and the operating systems that they are supported on. Web Browser Mozilla FireFox Savanna Konqueror Operating System Linux Windows Apple Mac Linux</p><p>Text Errors</p><p>The most usual reason for getting an error with the formatting of text is due to the angled bracket characters (usually used as less “~<” than and greater than ”~>” signs) which are reserved for opening and closing XML instructions. Having a ~< is especially problematic since you have opened up for XML instructions which will become invalid as it tries to interpret your text and there is no ~> to close the instructions. The ~> is less critical since you are closing text that had never been opened for interpretation by the XML, it is nevertheless wise to search for all ~< and ~> signs and place a tilde (~) in front of them so the XML will ignore these instructions. Accidentally embedding one Style Tab into another Style Tab</p><p>It is very important that you maintain a couple of spaces between applying different style sheets since again the XML tags are effectively opened and then closed. If the following appears in your Word document (or something similar) your XML code will get broken and the content not generated.</p><p>The above case will result in either broken code or will result in un-intended formatting. It is very important that you maintain at least TWO spaces between different Style Tabs. If you put more SPACES in than is necessary courseGenie will ignore these and it is also important to relies that changes of FONT with text bodies or with Style Tabs will be ignored. This feature of courseGenie ensures that very consistent HTML code is produced.</p><p>Publishing your SCORM in a LMS</p><p>So you have got this far with successfully generating HTML and a zipped SCORM file.</p><p>What is SCORM? This stands for Shareable Content Object Reference Model. This is a standard for web-based E-learning. It defines how the individual instruction elements are combined on a technical level and sets conditions for the software needed for using the content. The SCORM standard uses XML and it is based on the results of work done by AICC, IMS, IEEE, and Ariadne. </p><p>What is LMS? This stands for Learning Management System and is a software application or Web-based technology used to plan, implement, and assess a specific learning process. Typically, a LMS provides an instructor with mechanisms to create and deliver content, to monitor learner participation, and to assess learner performance. A LMS usually provides learners with the ability to use interactive features such as threaded discussions, video conferencing, and discussion forums. </p><p>Open our in-house open source Knowledge Management System http://knisl.uwc.ac.za</p><p>Now select the NISL-EI Management course and the follow screen should appear. Now select the SCORM (highlighted in yellow) and this will open the following dialogue box.</p><p>Select Import SCO and browse to where your local SCORM content (stored as a zipped files) is located. In this case will load a SCORM document entitled NISL_COURSEGENIE_SCORM</p><p>Your SCORM content is now available to be viewed or linked to. It will be listed with other SCORM documents that have been uploaded.</p><p>You will now need to create a link from your Course to the SCORN content. To do this you must make a note of the URL for the SCORM content. To do this you simply select the appropriate SCORM document and then use the Play SCO. This will confirm, firstly that your SCORM did load properly and is running smoothly with all the appropriate navigation in place, and secondly provide you with the URL for that particular SCORM content that you wish to link to.</p><p>In the above example the following link will access your SCORM content (providing that you are logged into KEWL NextGen). Here is the URL that I will be pasting into my course content. http://knisl.uwc.ac.za/index.php? module=scorm&action=play&sco=NISL_COURSEGENIE_SCORM</p><p>Using the Red X icon (top right corner) this will return you back to the opening page in the KEWL NextGen and you can the select both the course and page you wish to insert the hyperlink to this content. Simply clicking on the text that you hyperlinked will take you to your SCORM content.</p><p>This concludes the tutorial on developing SCORM material using courseGenie for NISL-EI courses. </p>