e-Learning System on Computer Hardware Technologies

User Manual
T.A.Lasitha Niwanka Gunasekara

Table of Contents

Table of Contents ........................................................................................................................... 1 Introduction .................................................................................................................................... 2 System Requirements .................................................................................................................... 3 Installation Guide Lines .................................................................................................................. 4 Using the system ............................................................................................................................ 5 Known issues and remedies......................................................................................................... 13

Introduction
First of all let us congratulate you on deciding to enhance the knowledge in computer hardware technology. This electronic learning system is a self explanatory system developed using a minimalistic design approach which intends to deliver you with essential aspects of computer hardware knowledge as effectively as possible. This document consists of information on the minimum requirements, the step by step installation guide of the solution, the guidelines on using it and finally an issues & remedies section to cope with problematic situations.

System Requirements
This software consists of mainly HTML, CSS, JavaScript and Flash components. Thus it is Operating System independent and requires mainly an up to date web browser with Java Scripting enabled. Yet the following configuration is mentioned as the least possible configuration which would host the software flawlessly.

Hardware requirements: Processor RAM Graphics Storage Disk Drives Display : : : : : : Intel or AMD X86 based processor of 500MHz of speed. Minimum of 128 Mega Bytes A video adapter with a 32 Mega Bytes of memory 40 Giga Bytes 32X CD ROM Drive 15 multimedia monitor

Software requirements: Operating System Web Browsers Fonts : : : Windows XP with service pack 3 Google Chrome, Internet Explorer 7, Opera 10. Must be fully updated with the latest Flash Player 10 plug in. Malithi Web Font (Sinhala) , Arial Font (English)

Note : The requirement of the flash player 10 plug-in is compulsory since majority of the content is associated with Flash. The Malithi Font is recommended since the default fonts do create some spacing errors making the content a bit out of position in some areas. (The font is available in the Supporting SW folder of the installation Disc. Simply run the file to install it.) The web browsers Java Script must be enabled. (It is enabled by default in most of the latest versions)

Installation Guide Lines

1. Insert the disc on to the disc drive of your PC.

2. Run and open the disc. In it you will find a folder named eLS. Enter that folder.

3. Inside there will be two subfolders. One is named as System and the later named Supporting SW.

4. Copy the whole System folder into your desired location in the hard drive.

5. To start the course, simply execute the Index.html file inside the System folder.

6. If your computer lacks the plug-ins and fonts, they can be found inside the Supporting SW folder. Simply double click them and follow the on screen instructions.

Note: It is not essential to copy the system to the hard drive of a PC to use it. It could be easily run using the CD-ROM itself but doing so would cause some delays in situations where animations are loaded.

Using the system

By now it is expected that you have double clicked the Index.html web page inside the System sub folder of the CD-ROM. You would be shown a page as shown in figure A below, instructing to select the medium of choice. Simply click on one of the language buttons to proceed.

Figure A Language Selection

Assume that you pressed the English section; you would be presented with a welcome description as show in figure B. In these types of pages, look for an arrow type image/button with the text tag of Continue on it to proceed to the next page. These links would always change color (typically brighten up in lime green) when the mouse pointer is hovered over them. This color changing scheme is used extensively to indicate a possible button/ link throughout the system. See figure C for examples.

Link to the next section of the course.

Figure B Home Page (English)

Normal

Mouse over

Figure C Examples of links

In the next page (Figure D) you will be shown the courses four main topics. Click on any one of the buttons to proceed to that section.

Figure D- Course content

In places where Lime green texts are visible, it indicates a link to another section that you could visit by clicking it. The text would change its color to a brighter green when the mouse is hovered over it to indicate its interactivity.(See Figure E for an example.)

The text glows and changes size to indicate a link to another page

The four quick links to the main topics. This will be shown in every page throughout.
Figure E Interactive text links

Also, throughout all the pages, you will be given links to visit the four main topics whenever you need by the use of four miniature icons representing them.(See figure E) In most sections you would see a menu stacked on the left side of the page. As shown in the figure F, this will be the sub navigation menu used to view the content of that page.

Sub-Navigation menu. Note how they change color to indicate their interactivity

Figure F Sub-Navigation Menu

In addition to this, a set of drop down collapsible type panels were used to include more content in the small space. As shown in Figure G, you would see horizontal areas of light grey which change into lime green when hovered over with the mouse pointer. Click it once to make the content drop down and visible. When you click it, the selected bar will turn into aqua blue to show that it is active. You should click it once more to close the panel. In most of the sections, you will be presented with video type flash presentations. There are two variants of it. One is used under Assemble Your PC section, where tutorials on assembling the main components of a PC are given. Here you will see a movie with the traditional controls to play, pause and rewind. The movie would begin to play as soon as you load that page and you could control that using the above said controls situated on its bottom area. (see figures H and I)

The opened panel is highlighted in Aqua Blue. The panel which could be opened is shown in lime green when the pointer is placed over it.

Figure G Drop down collapsible panels

The player in action

Figure H The Flash Player

10

Replay, Play/Pause and fast forward buttons with the seek bar of the player.

Figure I The Flash Player controls close up

The second type of flash videos is used to playback presentation slides. That is flash videos which show various slides containing the content. The user can start it and read the slides one by one as it will be changed automatically. A set of player controls are too provided so that the viewer can stop, pause, skip, fast forward and replay the show at any given time they choose. See figure J for an illustration.

Click the large Play button to start the video. You could instead press the player controls Play button too.

Replay, Play/Pause, Previous Slide, Next Slide & Fast forward Buttons.

Figure J Flash Player type 2

11

Finally let us look at the meaning of the symbolic navigation buttons shown on the top right corner of every page. (See figure K) o The first three is used to instantly translate the viewing page into any of those languages denoted by them. o Next is the back button used to move back to previously opened pages (You could simply use the browsers back button instead of this.). o o Fifth button is used to go directly to the home page of the system. Next is the exit button by pressing it, you will be prompted inquiring whether to proceed with the exit command or not. (See figure L) o Then we have the start button used to direct us to the very first page (Language selection page; Figure A) of the system. o o Then the help button is there to access the help tutorial page. Finally we have the expert mode selection button which would be used to give access to advanced content of the current topic the user is viewing. That is if a user requires seeing more advanced content for that topic, it will be made visible to them by pressing this button. This feature is still not fully implemented and would be done in future versions of the system.

Figure K Navigation panel

Figure L Exit confirmation message

The pages which are under construction will be notified by a special page (Figure M). If you encounter any similar situation, use the back button to navigate back to the previous page.

12

Figure M Under construction

The help section consists of a video guide which shows the navigation methodology in the system. It uses the traditional flash player with controls and in addition it provides some directions on resizing the display size, playback issue remedies and on viewing the translated output.(See figure N)

Figure N Help page

13

Known issues and remedies

This system was tested in many web browsers. Out of these the Mozilla Fire Fox web browser has a compatibility issue with the exit button. It would correctly prompt the exit confirmation alert box, yet the actual exit function does not execute correctly in this browser. The only method to do so would be to close the browser itself. This issue is not present in any of the other browsers (Opera, Chrome, Internet explorer). The system was developed in the resolution of 1024 X 768. Thus any displays higher or lower would require the browser to be resized accordingly. Some PCs do not have the Sinhala font Malithi Web installed in them. Usually the default Sinhala font would be used and this might cause some of the content to be over lapped or shifted out of place in the system. You can avoid this by installing the Malithi font located inside the Support SW folder in the CD-ROM. If your browser does not include the latest flash player pug-in installed, a message will be shown in place of the Flash video. If your PC is connected to the World Wide Web, then you could get the necessary plug-in by clicking that message. In some browsers such as the Internet Explorer from Microsoft, JavaScripts would be blocked by default and until you manually enable them the content of the collapsible panels and tabs would appear overlapped and unreadable.