Sei sulla pagina 1di 14
e-Learning System on Computer Hardware Technologies User Manual T.A.Lasitha Niwanka Gunasekara

e-Learning System on Computer Hardware Technologies

e-Learning System on Computer Hardware Technologies User Manual T.A.Lasitha Niwanka Gunasekara

User Manual

e-Learning System on Computer Hardware Technologies User Manual T.A.Lasitha Niwanka Gunasekara

T.A.Lasitha Niwanka Gunasekara

e-Learning System on Computer Hardware Technologies User Manual T.A.Lasitha Niwanka Gunasekara

1

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

2

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.

3

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

:

Intel or AMD X86 based processor of 500MHz of speed.

RAM

:

Minimum of 128 Mega Bytes

Graphics

:

A video adapter with a 32 Mega Bytes of memory

Storage

:

40 Giga Bytes

Disk Drives

:

32X CD ROM Drive

Display

:

15” multimedia monitor

Software requirements:

Operating System

:

Windows XP with service pack 3

Web Browsers

:

Google Chrome, Internet Explorer 7, Opera 10. Must be fully updated with the latest Flash Player 10 plug in.

Fonts

:

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 browser’s Java Script must be enabled. (It is enabled by default in most of the latest versions)

4

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.

5

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.

Simply click on one of the language buttons to proceed. Figure A – Language Selection 

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.

6

6 Link to the next section of the course. Figure B – Home Page (English) Normal
6 Link to the next section of the course. Figure B – Home Page (English) Normal

Link to the next section of the course.

Figure B Home Page (English)

Normal

Mouse

over

to the next section of the course. Figure B – Home Page (English) Normal Mouse over
to the next section of the course. Figure B – Home Page (English) Normal Mouse over
to the next section of the course. Figure B – Home Page (English) Normal Mouse over
to the next section of the course. Figure B – Home Page (English) Normal Mouse over
to the next section of the course. Figure B – Home Page (English) Normal Mouse over

Figure C Examples of links

7

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

Click on any one of the buttons to proceed to that section. Figure D- Course content

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.)

to indicate its interactivity.(See Figure E for an example.) The text glows and changes size to

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

glows and changes size to indicate a link to another page The four quick links to

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

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

Figure E Interactive text links

8

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 used to view the content of that page. Sub-Navigation menu. Note how they
sub navigation menu used to view the content of that page. Sub-Navigation menu. Note how they

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)

9

9 Figure G – Drop down collapsible panels The opened panel is highlighted in Aqua Blue.

Figure G Drop down collapsible panels

The opened panel

is

highlighted

in

Aqua

Blue.

The

panel which could

be

opened

is

shown

in

lime

green

when

the

pointer

is

placed

in lime green when the pointer is placed The player in action Figure H – The
in lime green when the pointer is placed The player in action Figure H – The
in lime green when the pointer is placed The player in action Figure H – The

The player in action

Figure H The Flash Player

10

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

and fast forward buttons with the seek bar of the player. Figure I – The Flash

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.

given time they choose. See figure J for an illustration. Click the large “Play” button to
given time they choose. See figure J for an illustration. Click the large “Play” button to
given time they choose. See figure J for an illustration. Click the large “Play” button to

Click the large “Play” button to start the video. You could instead press the player control’s “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

Fifth button is used to go directly to the home page of the system.

o

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

Then the help button is there to access the help tutorial page.

o

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.

and would be done in future versions of the system. Figure K – Navigation panel Figure

Figure K Navigation panel

versions of the system. Figure K – Navigation panel Figure L – Exit confirmation message 

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

12 Figure M – Under construction  The help section consists of a video guide which

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)

the display size, playback issue remedies and on viewing the translated output.(See figure N) 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 PC’s 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, JavaScript’s would be blocked by default and until you manually enable them the content of the collapsible panels and tabs would appear overlapped and unreadable.