JUNIOR
R FKE PO
ORTAL
U
USING
JA
AVA APP
PLETS AS
S
INTERA
ACTIVE TOOLS
2009/2010
K
KERK
SE
ENG CHU
UON
√
√
MTK 215 ,JL
LN BKT KA
ANGKAR
SG MATI,844400 MUAR
JOHOR
PM HA
ARUN BIN
N ISMAIL
“I declare that I have read this work and in my opinion this work is adequate in terms of
scope and quality for purpose of awarding a Bachelor’s Degree of Electrical Engineering
(Electronics)”
Signature: ....................................................
Name: PM HARUN BIN ISMAIL
Date: ....................................................
JUNIOR FKE PORTAL
USING JAVA APPLETS AS INTERACTIVE TOOLS
KERK SENG CHUON
Submitted to the Faculty of Electrical Engineering
In partial fulfilment of the requirement for the degree of
Bachelor of Electrical Engineering (Electronic)
Faculty of Electrical Engineering
Universiti Teknologi Malaysia
APRIL 2010
ii
I declare that this thesis entitled “Junior FKE Portal using JAVA Applets as
interactive tools” is the result of my own research except as cited in the
references. The thesis has not been accepted for any degree and is not
concurrently submitted in candidature of any other degree.
Signature
: ....................................................
Name
: KERK SENG CHUON
Date
: ...................................................
iii
Dedicated, in thankful appreciation for support, encouragement and
understanding to my beloved mother, father, and sisters.
iv
ACKNOWLEDGEMENT
First of all, it is indeed a great pleasure for me to take the opportunity here to
acknowledge several people and express my sincere thanks for their assistance given
to me to make this thesis possible. To PM Harun Bin Ismail, my supervisor, I would
like to express my deepest gratitude for giving me the opportunity to work with him
in a conducive environment. I have learnt and gained much from him, not only the
insights in the field of my project but also his invaluable guidance, support and the
philosophies of life throughout his mentoring. His words of wisdom will always be
kept close to my heart.
My appreciation also goes to my family who has been so supportive mentally
and financially throughout this project also providing me the opportunity to study
in UTM Skudai and provide support in terms of spirit and financial. I would not
been able to further my studies to this level without them. Their love and endless
motivation have certainly spurred me to scale to greater level of achievements.
Last but not least I would like to thank all members of Electrical Engineering
Faculty for providing this course and giving this golden chance to take an in
depth knowledge on embedded system.
v
ABSTRACT
We could deserve a rapid emergence and broad acceptance of the Internet as a
global medium for disseminating and processing information for the last year .It is
accessible in multiple formats (multimedia) and at extremely fast speeds (hypermedia).
This helps to open new vistas in education by taking full advantage of our basic "senses"
of learning such as visualizing 3D objects and others. We could also see the inception
and development of Java as a powerful programming language from SUN Microsystems.
This project mainly concern on designing an educational dynamic website that is
providing educational information, learning material and interaction for prospective
student at all educational level (Form 5, Form6 / Matriculation), who intend to further
their studies to FKE(Faculty of Electrical Engineering, UTM). In order to make sure
those students truly comprehend website’s content and feel pleasure throughout the
surfing, the website implements Java Applet plug-ins that require Java enabled browser
and browser that is installed with Java Runtime Environment software. Besides, if
student are facing any difficulty during learning process in this website, they can ask for
assistance from moderator via Live Chat service or leave their comments on dashboard
for public view. This portal provides topics in particular Physic subjects which are
considered as entry level requirement to FKE, and a selection of FKE subjects.
vi
ABSTRAK
Sejak beberapa tahun ini, internet muncul dan diterima sebagai media global
untuk pengedaran dan pemproses maklumat yang boleh dicapai dalam perbagai format
(multimedia) dan berfungsi pada kelajuan yang sangat tinggi (hipermedia). Hal ini telah
membuka pandangan baru dalam pendidikan dengan mengambil initiatif penuh dalam
dasar pemahaman pelajar seperti memvisualisasikan objek 3D dan lain-lain.Sejak
kebelakangan ini,kita juga dapat melihat pembangunan tecknologi Java sebagai sejenis
bahasa pengaturcaraan yang sangat berkemampuan daripada SUN Microsystems.Projek
ini dilaksanakan dengan memberikan lebih tumpuan terhadap perekaan sebuah laman
web dinamik berdasarkan pendidikan dengan menyediakan maklumat pendidikan,isi
kandungan untuk pembelajaran yang berinteraksi dengan semua pelajar untuk semua
tahap pendidikan (Tingkatan 5, Tingkatan 6 / Matrikulasi),lebih-lebih lagi kepada pelajar
yang ingin melanjutkan pengajian mereka di FKE. Untuk memastikan bahawa semua
pelajar berkenaan benar-benar memahami isi kandungan laman web yang disediakan
serta membuatkan diri lebih menikmati suasana pembelajaran sepanjang masa, laman
web ini menggunakan Java Applet yang memerlukan pelayar(browser) yang dapat
mempamerkan isi kandungan Java Applet atau pelayar yang dilengkapi perisian Java
Runtime Environment. Selain itu, jika pelajar menghadapi sebarang kesulitan semasa
dalam proses pembelajaran di laman web tersebut, mereka boleh meminta bantuan dari
penyelaras(moderator) melalui perkhidmatan Live Chat atau tinggalkan pesanan pada
paparan dashboard untuk tujuan umum. Portal ini menyediakan beberapa topik mata
pelajaran Fizik yang menjadi teras kepada semua subjek elektrikal dalam FKE, dan juga
beberapa subjek elektrikal pilihan daripada FKE.
vii
TABLE OF CONTENT
CHAPTER
1
2
TITLE
PAGE
DECLARATION OF THESIS
ii
DEDICATION
iii
ACKNOWLEDGEMENT
iv
ABSTRACT
v
ABSTRAK
vi
TABLE OF CONTENT
vii
LIST OF TABLES
xi
LIST OF FIGURES
xii
LIST OF ABBREVIATION
xiv
LIST OF APPENDICES
xv
INTRODUCTION
1.1 Background
1
1.2 Objectives
3
1.3 Problem Statement
3
1.4 Scope of Works
4
1.5 Outline of Thesis
4
LITERATURE REVIEW
2.1 Introduction
5
2.2 Java applet features and educational
5
settings for Java applets
viii
2.3 Similarities and differences between
6
Flash and Java
2.4 Limitations of current educational practices
8
2.4.1 Open Classroom
8
2.4.2 Nature of Information.
8
2.4.3 Classroom Demonstrations
9
and Connections
2.4.3.1 Teacher's Viewpoint
9
2.4.3.2 Learner’s Viewpoint
10
2.4.4 Assessment
10
2.4.5 Cost
10
2.4.6 Transferability and Adaptability
11
2.5 Applications of Java Applets
11
2.5.1 Informational Applets
11
2.5.2 Concept Illustrating Applets
12
2.5.3 Computational Applets
12
2.5.4 Assessment Applets
12
2.6 Java applet related report from conference
2.6.1 Interactive JAVA Applets for
12
13
Power Electronics E-Learning
2.6.1.1 Applets Development Process
13
2.6.1.2 Development Stages of an Applet
14
2.6.1.3 Graphical Design (GUI of applet)
15
2.6.2 Interactive Power Electronics Seminar (iPES)16
2.6.2.1 Contents of iPES
16
2.6.2.2 Example: Rotating Magnetic Field
17
ix
3
RESEARCH METHODOLOGY
3.1 Methodology
18
3.2 Java applet embedding development
19
3.2.1 Java Language and GUI
20
3.2.2 Applets and HTML
21
3.2.3 HTML Java-Specific Tags
22
3.2.3.1 APPLET
22
3.2.3.2 CODEBASE
23
3.2.3.3 CODE
23
3.2.3.4 WIDTH
23
3.2.3.5 HEIGHT
23
3.2.3.6 ARCHIVE
24
3.2.4 Specifying the Applet Directory
24
(For embedding process)
3.3 Dynamic Element development using Java script 28
3.3.1 Structure of Java script
29
3.3.2 Java script Libraries
29
3.3.3 JQuery Library
30
3.4 Learning Material (Java applet and notes)
4
31
RESULT AND DISCUSSION
4.1 Real Time Results
33
4.1.1 Homepage
34
4.1.2 Selection Page
37
4.1.3 Topic page
38
x
5
CONCLUSION
5.1 Concluding Remarks
40
5.2 Future Recommendations
41
REFERENCES
42
APPENDICES
43
xi
LIST OF TABLES
TABLE
2.1
TITLE
Similarities and differences between Flash and Java
PAGE
7
xii
LIST OF FIGURES
FIGURE
TITLE
PAGE
2.1
Mathematical Modeling
14
2.2
M-Model Transformed into JAVA
14
2.3
Development Stages of an Applet
15
2.4
Layout of GUI
16
2.5
Rotating magnetic field applet
17
3.1
Overall Workflow
19
3.2
Web page with referencing Java .class file
21
3.3
The location of class file using CODEBASE
attribute in the same web-server
25
The location of class file using CODEBASE
attribute at different web-server.
25
3.5a
The APPLET tag source code for Rain Fall
26
3.5b
Rain Fall applets and its GUI
26
3.6a
The APPLET tag source code for Transformer applets
26
3.6b
Transformer applets (Upper side) with its GUI
27
3.7a
The APPLET tag source code for Dependence Source applets 27
3.7b
Dependence Source applets (Upper side) with its GUI
27
3.8
Layout of Anything-Slider illustrated in Resistor topic
31
3.9
Layout of Dynamic Drive Drop-Drop panel illustrated in
homepages
31
3.4
xiii
3.10
Layout of Wibiya© Toolbar illustrated in Resistor topic
32
4.1
Pages flow diagram
33
4.2
Upper side of JuniorFKE Home pages
34
4.3
Layout of Dynamic Drive Drop Down panel
35
4.4
Coda Slider with titles that embedded in Middle
part of homepage
36
Wibiya© toolbar with Twitter© Dashboard appear on it
in the bottom part of home page in Junior FKE Portal
36
Selection page using Slick Map CSS to distribute all
topics according to educational level
37
Upper part of Topic page with Anything-Slider for
learning material enclosing
38
Lower part of Topic page with embedded Java applet
from third party website related to particular Topic page
39
4.5
4.6
4.7
4.8
xiv
LIST OF ABBREVIATIONS
3D
-
3 Dimension
HTML
-
Hyper Text Mark-up Language
DHTML
-
Dynamic Hyper Text Mark-up Language
WWW
-
World Wide Web
GUI
-
Graphical User Interface
MATLAB
-
Matrix Laboratory
DC
-
Direct Current
AC
-
Alternating Current
PARAM
-
Parameter
URL
-
Universal Resource Locator
HTTP
-
Hypertext Transfer Protocol
CSS
-
Cascading Style Sheets
GIF
-
Graphics Interchange Format
JPEG
-
Joint Photographic Experts Group
XHTML
-
Extensible Hypertext Markup Language
XML
-
Extensible Markup Language
DOM
-
Document Object Model
PHP
-
Hypertext Preprocessor
ASP
-
Active Server Pages
JSP
-
Java Server Pages
STPM
-
Sijil Tinggi Persekolahan Malaysia
SPM
-
Sijil Pelajaran Malaysia
xv
LIST OF APPENDICES
APPENDIX
TITLE
A
Source Code for JavaScript libraries
user interface component
B
List of applets and List of internet reference
according to topic
PAGE
43
49
CHAPTER 1
INTRODUCTION
1.1
Background
People and organizations use the World Wide Web (WWW) to communicate
globally and instantly. Combined with multimedia, the resulting webs of hypermedia
have opened new possibilities for expression and communication. But something has
been missing from the Web since its introduction to the world in the early 1990s.
Although the amount of Web data traffic and the number of computers offering
information on the Web has risen dramatically, the content of the pages has lacked
important expressive and interactive qualities. So although the Web fostered world-wide
interconnections among people and information, it has only enabled people to observe:
read text, watch videos, listen to music, and explore information.
The unbounded universe of possibilities on the Web may lead some users to feel
that the hyperlinks just keep leading them on, until ultimately, the Web seems just a road
to nowhere. Java changes all this. Java makes destinations possible for Web users.
Java enables developers to create content that can be delivered to and run by
users on their computers. This software can support anything that programmers can
dream up: spreadsheets, tutorials, animations, and interactive games. With the Web page
as the delivery platform, this software can support a variety of information tasks with
true interactivity; users can get continuous, instantaneous feedback for applications in
visualization, animation and computation. Users of the Web in the dawning Java age
may indeed find a there on the Web: a place to play, work, or learn.
2
There are two kinds of Java-programs: applets and applications. Applets are
programs which run embedded in a WWW-side. To run them one needs a Javacapable Web-browser. Applications are independent (stand alone) programs just as
programs written in other computer languages. To run them a byte-code interpreter
(Java) is needed.
Java connects with HTML and the Web through a special HTML tag
called APPLET, which allows developers to include special Java programs called
applets on Web pages. These applets are essentially software programs that the user's
browser downloads (automatically, as part of Web page observation) and executes.
With graphical input and output possible through the applet on the page, Java thus
opens windows to into richer levels of interactivity on the Web.
Dynamic HTML, or DHTML, is an umbrella term for a collection of
technologies used together to create interactive and animated web sites by using a
combination of a static mark-up language (such as HTML), a client-side scripting
language (such as JavaScript), a presentation definition language (such as CSS), and the
Document Object Model.
DHTML allows scripting languages to change variables in a web page's
definition language, which in turn affects the look and function of otherwise "static"
HTML page content, after the page has been fully loaded and during the viewing process.
Thus the dynamic characteristic of DHTML is the way it functions while a page is
viewed, not in its ability to generate a unique page with each page load.
3
1.2
Objectives
The objective of this project is to design an educational dynamic portal
which is:
1.
Design for secondary and tertiary educational level of student.
2.
Provide particular topic in Physic subjects and a selection of FKE
subjects for continuity learning.
3.
To enhance student learning’s experience, Java applets as highly
interactive tools are employed in portal.
4.
A platform for student to ask for assistance via live chat service (solve by
moderator) or leave comments on dashboard for public view (solve by
moderator and student).
5.
A community site for students to share some ideas in term of daily
life experience and others via message board.
6. Encourage asynchronous distance learning and thus help overcome
the limitations (involving both time and space) inherent in
traditional instructional techniques.
1.3
Problem Statement
Due to the disparity and lack of continuity at various level in the Malaysia
Educational system, teacher only carry out their customary duty of teaching where the
students are required to learn and obtain good result. Teachers are not clear (forget) of
what is the main purpose/aims of learning and how important are its implication or
impact on various subject.
At tertiary level, many 1st year students cannot achieve good result because of
the reason stated above, and also because of different learning environment compared to
school. Most of them entering tertiary level are not mentally prepared, mainly because
their expectations are the same as what were previously familiar to them.
4
Hence, this portal will provide some contribution and at the same time narrow
the gap of apparent disparity.
1.4
Scope of Works
Portal design (all pages layout), page’s content (learning materials for particular
topic in Physic and selection of FKE subjects) and Java applets embedded process are
done by using Coffee Cup HTML Editor. For this portal, more than 20 java applets are
embedded into it for demonstration on some electrical theories and application from
particular topics in Physic and selection of FKE subject.
1.5
Outline of Thesis
This thesis consists five chapters. Chapter 1 includes objective, problem
statement, and scope of this project. While Chapter 2 will discuss more on theory
and literature reviews that have been done.
In Chapter 3, the discussion will be on the methodology and software
implementation of this project. The result and discussion will be presented in Chapter
4. Finally, Chapter 5 discusses the conclusion of this project and future work that can
be done.
6 CHAPTER 2
LITERATRURE REVIEW
2.1
Introduction
This chapter reviews the Java applet’s features and educational settings for Java
applets in this project, similarities and differences between Flash and Java, current
educational practices, applications of Java applets and also some example of Java applet
related technical report.
2.2
Java applet features and educational settings for Java applets
Java applet is an application designed to be transmitted over the Internet and
executed by java compatible web browser. An applet is actually a tiny Java program,
dynamically downloaded across the Internet just like an image or sound clip. The
important difference is that applet is an intelligent program. It can react to user input and
change dynamically. Most important feature of applet is security. Java creates a ‘firewall’
between the networked application and computer and thus confines the program to Java
environment not allowing it to access other parts of the computer. Some more distinct
advantages of Applets are:
1. Multimedia can be incorporated in Applets
2. Applets can provide better user interaction
3. Applets are platform independent and portable
4. Applets support distributed and Network computing
6
5. Main program + Graphics + User interface are all embedded in unified
environment
6. Java-compliant WWW browsers as well as Java compiler.
Java applets can be classified as follows for educational settings:
1. Informational applets: Minimal user interactivity. Similar to HELP files
2.Concept illustrating applets: Maximum interactivity. User learns the concept by
exploring the applet.
3. Computational applets: Good user interactivity. Examples, Illustrations, Visualization
4. Assessment applets: Less interactivity. Quiz, multiple choice questions.
To use applets in website or classroom, we have two options: In-house
development of applets and usage of pre-existing applets. It is difficult to develop
applets particularly for those having little or no prior programming experience. Hence inhouse development of applets by lecturer or webmaster may not be feasible (although
Java compiler and run time environment are free).Java applets for education are
available for free on the web. But these have to be searched for, tested and adapted for
portal or classroom use.
2.3
Similarities and differences between Flash and Java
So why is Java not as popular in education field as it was about two years back?
Has Flash overtaken Java? What are the similarities and differences between Flash and
Java? Can use Flash for everything that can be accomplished with Java? Let discuss
some of these questions here. Java is a full blown programming language whereas Flash
is mainly animation tool (although it is equipped with Action Script it is mainly for Front
End design Both support multimedia and both were created to operate on the Internet.
Table 2.1 shows a list of comparison between Java applet and Flash plug-in.
7
Java Flash Allowing for or adaptable to change.
Neither allowing nor adaptable to change. Inefficient use of graphic element
(eg bitmaps).
Supports a wide range of graphic
elements (gif) and features
(opacity).
No visual environment
for design.
Visual
coding
environment.
Complex
computations
easier in Java.
Complex
computations
complex logic difficult
implement.
Scalable to any processor driven
platforms
(computers,
cell
phones, smart cards etc).
Not
scalable.
or
to
Developing software is available
for free.
Developing software has to be
purchased from Macromedia.
Slow download
time.
Fast download
time.
Table 2.1 Similarities and differences between Flash and Java
In reality Flash can not replace Java because Java is a programming language
with very high capabilities. But in the field of education where most of the applications
do not require complex computing but high quality graphics and faster download rates,
Flash seems to have overtaken Java. Most obvious reason for this is the ease of use. With
the visual developing environment of Flash it is easy to create simple animations quickly
which is not so easy with Java. But Java provides more user interactivity, more
dynamism, database connectivity, memory management, garbage collection, reusability
and free open ended use because of which Java has maintained its own place.
8
2.4
Limitations of current educational practices
There are various inherent limitations in the current practices of teaching and
learning. Some of these problems can be solved to a large extent via integration of Java
applets. These aspects can be outlined as follows.
2.4.1
Open Classroom
The use of Java applets can encourage asynchronous distance learning and thus
help overcome the limitations (involving both time and space) inherent in traditional
instructional techniques. Instruction is asynchronous when it does not constrain the
student to involvement in the learning process at a specific time, for example, when
lectures are presented at a fixed time of the day. Instruction is distant when it does not
constrain the student to be physically present in a specific location, for example, when
lectures are presented only in a fixed classroom [1].
Using the internet, teachers and students can access information any time and
anywhere. In the present educational system, teaching hours (including the instructor's
office hours) are often insufficient for students. Now that many students have access to
the internet, such facility can be very timely and convenient for students who wish to
study the course material from home in their own time. The need for physical proximity
can thereby be reduced.
2.4.2
Nature of Information
There are various concepts and phenomena that inherently involve: The first one
is about dynamic information such as chemical reaction simulation or rate of
convergence of a numerical method of integration or motion of a pendulum. The second
one is about Multimedia information. For example, any subjects that involve the study of
concepts from graphics, animation or sound. Finally, this is about interactive information.
This type of information can be any topic that involves change of system parameters for
understanding [1].
9
Such information is usually not be represented, distributed and communicated in
paper form (and even using a blackboard or overhead-projector with transparencies) due
to various limitations. Even though animations can be created using other techniques (for
example, GIF animation tool), they lack interaction. The "mental picture" that a teacher
has is better conveyed to a learner if the information is presented in its appropriate form.
Java applets can complement a lecture and sessions with such information which
is difficult to convey in traditional manner. The use of applets along with desirable
multimedia support provides a representation that is often better in communicating a
concept than a static figure(s) or a written description. It also helps learners visualize the
concept relatively easily. Through the multimedia support of the WWW, information
can be represented dynamically and interactively - both of which Java applets are well
equipped with. Applets that have active GUI elements give control in the hands of the
learner, and thus allow the learner to gain experience with the concept [1].
2.4.3
Classroom Demonstrations and Connections
Classroom demonstrations are an essential component of subjects that are
practically-oriented. In various such courses, for example, which are computationally
oriented, actual computer implementations of algorithms that function in real-time are
usually not introduced in the classroom. Also, the classroom and laboratory components
are separated - the lessons are carried out in the classroom while the implementation of
algorithms corresponding to them is carried out in a computer laboratory [1].
2.4.3.1 Teacher's Viewpoint
The teacher, at best, illustrates a static computer program for an algorithm or a
static image of a computer-generated graphical result. This is often not sufficient. Using
Java applets, teachers can perform classroom demonstrations involving real-time
computations, bringing more realism to the subject matter. They can thus save time in
explaining the algorithmic implementations. The use of hypertext in a WWW document
also facilitates explanation of related concepts (such as an applet performing a
computation and a corresponding lesson). This can bring clarity and continuity to the
lecture by immediate referencing and not referring back-and-forth to, for example,
10
transparencies. During individual study, use of hypertext helps students to recall
concepts already learnt and access prerequisites for a topic, in a natural manner not
possible in a plain text environment [1].
2.4.3.2 Learner’s Viewpoint
It is difficult for students to understand the basic concepts involved in the
algorithms (for example, how the approximation to the area under a curve changes as
one increases the number of partition intervals) unless they see them in action. Java
applets combine these classroom and laboratory components, and provide an
environment where students can "see" the connections by immediately applying the
concepts they have been taught. This also gives students an opportunity to make their
own conjectures and experiment with them. This can lead to a better understanding on
part of students [1].
2.4.4 Assessment
Traditional methods of assessment such as in-class quizzes can be replaced
and/or supplemented with simple Java applets-based multiple-choice on-line tests. This
can increase the range of questions that can be asked, as now one is not restricted to the
paper format. Such tests can give learners a measure of their understanding of the subject
and thus develop confidence. It is also possible to make some of these examinations
openly available so that the learner can carry them out in their own time [1].
2.4.5
Cost
Commercial application packages and compilers which are used in teaching
courses are not readily affordable by all students for personal use. On the other hand,
Java-compliant WWW browsers such as Netscape Communicator or Microsoft Internet
Explorer are available free of cost for academic use. Java compilers and run-time
environments are also freely available for various architectures [1].
11
2.4.6
Transferability and Adaptability
The results of development of Java applets in one instance can be transferable
and adaptable to various other learning situations. Java applets, when used in a
classroom, can bring a stronger integration between (already existing) theoretical and
practical aspects of the subject. There are various courses whose syllabi often intersect
(for example, Geometry and Computer Graphics; Numerical Analysis and
Calculus/Linear Algebra). Java applets (or even individual Java source/class files)
developed for one course could be (re)used by teacher and learners in other courses.
2.5
Applications of Java Applets
In what contexts can applets be used? There are at least four ways that Java
applets can be used in education.
2.5.1
Informational Applets
These applets are similar to the Help files in Windows-based programs whereby
clicking on a tab or choosing an item from a pull-down menu, the user can obtain more
information on the topic. These applets may have minimal interactivity on part of the
user [1].
2.5.2
Concept Illustrating Applets
Such applets illustrate concepts underlying the subject, for example, the notion
of limit in Calculus. These applets should have maximum possible interactivity on part
of the user [1].
12
2.5.3
Computational Applets
These applets can serve as examples of concepts being learnt as well as
illustrating phenomena. They can have the capability of user-interactive visualization of
results and with a built-in graphical user interface (GUI) to facilitate experimentation by
manipulating various parameters which can be "hard-wired". For example, given the
linear equation f(x) = (1/2) x, the applet finds its fixed point iteration, that is, 0. These
applets should have maximum possible interactivity on part of the user [1].
2.5.4
Assessment Applets
Assessment is fundamental to every learning process. To assess student learning,
quiz applets with multiple-choice questions can be designed and implemented. A quiz
can present the user with a set of problems, each with multiple choices that he/she could
select from. Such a presentation can even be "randomly" generated (using Java's random
number generator) from a database of questions. Once selected, the choice can be
processed and appropriate response message with explanations can be displayed. These
applets may have minimal interactivity on part of the user [1].
2.6
Java applet related report from conference proceeding
Here is some reports from conference proceeding that illustrate on development
of Java applet in specific field.
2.6.1
Interactive JAVA Applets for Power Electronics E-Learning
In this paper, Kalaid [2] mention that due to the high nonlinearity and the
13
mathematical complexity of power electronics circuits, their (electronic circuit) analysis
has become more infeasible to describe. Power Electronics Education is a daunting,
challenging task and many undergraduate students find it very difficult to grasp the basic
concepts of many power electronics circuits and understand their physical and
operational modes.
And because of this reason, an interactive power electronics teaching Web site is
proposed and, three main Web pages are developed for students, instructors and
interactive Java Applets. Interactive online materials are posted for both students and
instructors including lecture nodes, simulation problems, examples and exercises,
textbook presentations, and online exams.
Interactive applets are developed for 29 power electronics circuits to help
students better understand the circuit behaviour under certain circuit parameters
variations. Exact steady state waveforms are plotted with flexibility to have students
change different circuit parameters and observe the circuit response in an interactive
manner [2].
Based on above statement, those applets from website were design in-house to
fulfill university’s (Power Electronic) syllabus requirements, and their website were
designed just like UTM ’s E-learning portal to distribute online materials for both
students and instructors.
2.6.1.1 Applets Development Process
Two main simultaneous processes are incorporated together to develop the java
applets software: the Matlab modelling and the instructional design process. For Matlab
modelling, this modelling is a mathematical modelling (M-Model) constructed from preprocessed data that contains reduced equations with their labelling and other metadata.
These M-Models are capable of mapping the concept to a real-world manipulative
environment. The mathematical modelling generation is described in the Figure 2.1 [2].
14
Figure 2.1 Mathematical Modelling
In the next development phase, the M-Models and their descriptive contents are
coordinated together and assembled into a uniform programming language, namely
JAVA Circuit modules are developed and tested by Matlab and then transformed into
JAVA as shown in Figure 2.2 [2].
Figure 2.2 M-Model Transformed into JAVA
For Instructional Design, this design illustrates how to better present the concepts,
convey the objectives of the course in a pedagogical way and appropriate to suit the
targeted audience. Interactive tutorials are accompanied with the simulation engines to
support both instructor lead and self paced learning [2].
2.6.1.2 Development Stages of an Applet
Each applet has the following four development stages: circuit analysis,
circuit modelling, checking fidelity of generated results and Java outputs, as
shown in Figure 2.3 below [2].
15
Figure 2.3 Development Stages of an Applet
2.6.1.3 Graphical Design (GUI of applet)
The GUI is presented in a more informative way and is easy to use with more
user-friendly buttons and graphical panels, as shown in Figure 2.4 [2].
Figure 2.4 Layout of GUI
16
2.6.2
Interactive Power Electronics Seminar (iPES)
This paper introduces the Interactive Power Electronics Seminar – iPES, new
software for teaching a basic course on power electronic circuits and systems. iPES is
constituted by HTML text with Java-applets for interactive animation, circuit design and
simulation and visualization of electromagnetic fields and does comprise an easy-to-use
self-explaining graphical user interface . The software does need just a standard webbrowser, i.e. no installations are required [3].
iPES can be accessed via the World Wide Web or from a CD-ROM in a standalone PC by students and professionals. Since the Java applets are simple to handle, a
student can immediately start working and can concentrate on the theory of a problem.
Due to the underlying software technology iPES is very flexible and can be used for online learning and easily integrated into an e-learning platform.
2.6.2.1 Contents of iPES
The iPES currently does contain 30 Java-applets and therefore does provide an
excellent basis for teaching an introductory course on power electronics including the
subjects listed such as DC-DC converters without output voltage isolation, DC-DC
converters with high frequency output voltage, control-oriented basics of DC-DC
converters modelling ,design of power electronic converters (types of power
semiconductor devices, thermal design, magnetic components), single-phase diode bridge
with capacitive smoothing, effects on the mains, power factor correction, self-commutated
single- and three-phase voltage DC, link inverter, pulse width modulation, space vector
calculus, Line-commutated three-phase half-bridge converter, rectifier and inverter
operation, series connection of line-commutated half-bridge converters, full-bridge
converter, Parallel-connection of line commutated converters, inter-phase transformer,
anti-parallel connection of line-commutated converters, four-quadrant DC machine
drive ,resonance convertersa and U-Zi-diagram [3].
17
2.6.2.2 Example: Rotating Magnetic Field
Figure 2.5 shows an applet that demonstrates the concept of rotating magnetic
field theories. The idea of this applet is to give the student a deeper understanding of the
formation of a rotating magnetic field which is essential for understanding the principle of
operation of three-phase AC machines. Especially, the relation between the physical
positioning of the wires antrophose windings the phase displacement of the currents fed
into the windings should be made obvious [3].
Figure 2.5 Rotating magnetic field for different positions of the time-marker in the
applet showing the time behaviour of the three-phase current system supplying the
windings. A vertical red time-marker can be dragged with the mouse in order to change
the actual point in time considered. While dragging the time-marker the applet responds
immediately and the magnetic field does change accordingly.
26 CHAPTER 3
RESEARCH METHODOLOGY
This chapter describes the methodology employed and considerations taken into
account for this project. It begins with the discussion of the project workflow, followed
by the portal design procedure, techniques and tools utilized in this work.
3.1
Methodology
This project involved the efforts of pages layout design, content developments,
and Java applets embedding process which provide overall portal functionality. The
project workflow is shown in Figure 3.1.
19
Start
Dynamic Page Element (Java script)
Content
development
(Java script)
Java applet
embedding
process
Literature
Review
Documentation
and report
writing
Testing and Improving End
Figure 3.1: Overall Workflow
There are several techniques which have to be familiarized and mastered in
order to produce the complete portal. These comprise the Java script programming that
is used to develop the dynamic page element in this protal. Besides, Java applets are
being applied as a plug-in to run in conjunction with dynamic page element in portal
design. Thus, the basic study on the characteristic and usage of Java language in Java
applets and Java script language is essential.
3.2
Java applet embedding development
This section discusses about the embedding Java applet that are used to interface
between portal and student.
20
3.2.1
Java Language and GUI
Java can be used to write GUI programs ranging from simple applets which run on
a Web page to sophisticated stand-alone applications. There are two basic types of GUI
program in Java: stand-alone applications and applets. An applet is a program that runs in
a rectangular area on a Web page. Applets are generally small programs, meant to do
fairly simple things, although there is nothing to stop them from being very complex.
Applets were responsible for a lot of the initial excitement about Java when it was
introduced, since they could do things that could not otherwise be done on Web pages.
However, there are now easier ways to do many of the more basic things that can be done
with applets, and they are no longer the main focus of interest in Java [4].
3.2.2 Applets and HTML
Before using an applet that has been created, there is a need to create a Web
page on which to place the applet. Such pages are themselves written in a language
called HTML. An HTML document describes the contents of a page. A Web browser
interprets the HTML code to determine what to display on the page. The HTML code
doesn't look much like the resulting page that appears in the browser. The HTML
document does contain all the text that appears on the page, but that text is "marked
up" with commands that determine the structure and appearance of the text and
determine what will appear on the page in addition to the text [4].
Java applets like Java programs consist of one or more class definitions. Once
compiled, these classes are stored as files with a .class extension and they consist of
Java bytecode. Java bytecode is created by a Java-compatible compiler. Unlike Java
applications that typically are executed by a Java-compatible interpreter, applets are
executed within a Java-enabled web browser such as Netscape Navigator 2.x and later
that includes an integrated bytecode interpreter. Applets are embedded within an
HTML document via the APPLET tag that references the Java applet's compiled .class
file [5].Figure 3.2 shows a Web page with referencing Java .class file.
21
Figure 3.2: Web page with referencing Java .class file
3.2.3
HTML Java-Specific Tags
Here's a more complex example of an APPLET tag:
<applet codebase="http://java.sun.com/applets/NervousText/1.1"
code="NervousText.class" width=400 height=75>
<param name="text" value="Welcome to HotJava!">
<hr>
If you were using a Java-enabled browser such as HotJava,
you would see dancing text instead of this paragraph.
<hr>
</applet>
This tells the viewer or browser to load the applet whose compiled code is at the
URL http://java.sun.com/applets/NervousText/1.1/NervousText.class, to set the initial
size of the applet to 400x75 pixels. The viewer/browser must also set the applet's "text"
attribute (which customizes the text this applet displays) to be "Welcome to HotJava!" If
the page is viewed by a browser that can't execute Java applets, then the browser will
ignore the APPLET and PARAM tags, displaying only the HTML between the <param>
and </applet> tags (the alternate HTML).
22
Here is another example of an APPLET tag:
<applet code=A21 width=256 height=256 archive="toir.jar">
<param name=img value=test.gif>
<hr>
We need to convert some of the standard applets to use
archive. Any volunteers?
<hr>
</applet>
In this example, the applet class is A21. Its byte codes (may) reside in the
archive "toir.jar". This archive may also contain the image resource (see resources
documentation) with name test.gif.
Here's the complete syntax for the APPLET tag. Required elements are in bold.
Optional elements are in regular typeface.
<APPLET
CODEBASE = codebase URL
ARCHIVE = archiveList
CODE = applet File ...or... OBJECT = serialized Applet
ALT = alternate Text
NAME = applet Instance Name
WIDTH = pixels HEIGHT = pixels
ALIGN = alignment
VSPACE = pixels HSPACE = pixels
>
<PARAM NAME = appletAttribute1 VALUE = value>
<PARAM NAME = appletAttribute2 VALUE = value>
. . .
Alternate HTML
</APPLET>
CODE, CODEBASE, and so on are attributes of the applet tag; they give the
browser information about the applet. Only important attributes is described in sub
sections below.
3.2.3.1 APPLET
The <APPLET> tag specifies an applet to be run within a Web document. A
Web browser that does not support Java and does not understand the <APPLET> tag,
23
ignores this tag and any related <PARAM> tags, and simply displays any alternate-text
that appears between <APPLET> and </APPLET>. A browser that does support Java
runs the specified applet, and does not display the alternate-text [5], [8].
3.2.3.2 CODEBASE
This optional attribute specifies the base URL (absolute or relative) of the
applet to be displayed. This should be a directory, not the applet file itself. If this
attribute is unspecified, then the URL of the current document is used [4], [5].
3.2.3.3 CODE
This required attribute is the name of the Java applet-the name of the .class file
created by a Java-compatible compiler. The file name must be relative to the current
URL of the HTML file containing the applet unless the CODEBASE attribute is used.
In this case the filename should be specified relative to the location specified by the
CODE BASE attribute [5], [8].
3.2.3.4 WIDTH
This attribute is required and is used to specify the initial width required by the
applet in the web browser. Use a number to indicate the number of pixels required [4],
[8].
3.2.3.5 HEIGHT
This attribute is also required and like the width, it is used to specify the
initial height of the applet in pixels [5], [8].
24
3.2.3.6 ARCHIVE
This optional attribute describes one or more archives containing classes and
other resources that will be "preloaded". The classes are loaded using an instance of an
Applet Class Loader with the given CODEBASE. The archives in archive-List are
separated by ",”. This is used by some client code to implement inter-applet
communication. Future JDK’s may provide other mechanisms for inter-applet
communication. For security reasons, the applet's class loader can read only from the
same code base from which the applet was started. This means that archives in
archiveList must be in the same directory as, or in a subdirectory of the CODEBASE.
Entries in archiveList of the form.../a/b.jar will not work unless explicitly allowed for in
the security policy file (except in the case of an http CODEBASE, where archives in
archiveList must be from the same host as the CODEBASE, but can have "...”'s in their
paths.). This attribute specifies a comma-separate list of JAR (Java Archive) files that
are "preloaded" by the Web browser or applet viewer. These archive files may contain
Java class files, images, sounds, properties, or any other resources required by the
applet. The Web browser or applet viewer searches for required files in the archives
before attempting to load them over the network. [4], [8].
3.2.4 Specifying the Applet Directory (For embedding process)
By default, a browser looks for an applet's class and archive files in the same
directory as the HTML file that has the <APPLET> tag. (If the applet's class is in a
package, then the browser uses the package name to construct a directory path
underneath the HTML file's directory.) Sometimes, however, it's useful to put the
applet's files somewhere else. You can use the CODEBASE attribute to tell the browser
in which directory the applet's files are located:
<APPLET CODE=AppletSubclass.class CODEBASE=aURL
WIDTH=anInt HEIGHT=anInt>
</APPLET>
If aURL is a relative URL, then it's interpreted relative to the HTML
document's location. By making aURL an absolute URL, you can load an applet
from just about anywhere -- event from another HTTP server.
25
Another example, the following Figure 3.3 shows the location of the class
file, relative to the HTML file, when CODEBASE is set to "example/".
<APPLET CODE=Simple.class CODEBASE="example/"
WIDTH=500 HEIGHT=20>
</APPLET>
Figure 3.3: The location of class file using CODEBASE attribute in the same webserver.
Figure 3.4 shows where the applet class can be if you specify an absolute URL
for the value of CODEBASE.
CODEBASE = "http://someServer/.../someOtherDirectory/"
Figure 3.4: The location of class file using CODEBASE attribute at different
web-server.
Figure 3.5a, 3.6a and 3.7a are examples of source code on Java applet which
have been successfully embedded in the proposed portal. Figure 3.5b, 3.6b and 3.7b are
Java applet’s layout corresponding to Figure 3.5a, 3.6a and 3.7a respectively.
26
Figure 3.5a: The APPLET tag source code for Rain Fall
Figure 3.5b: Rain Fall applets and its GUI
Figure 3.6a: The APPLET tag source code for Transformer applets
27
Figure 3.6b: Transformer applets with its GUI
Figure 3.7a: The APPLET tag source code for Dependence Source applets
Figure 3.7b: Dependence Source applets with its GUI
28
3.3
Dynamic Element development using Java script
Dynamic HTML, or DHTML, is an umbrella term for a collection of
technologies used together to create interactive and animated web sites by using a
combination of a static mark-up language (such as HTML), a client-side scripting
language (such as JavaScript), a presentation definition language (such as CSS), and the
Document Object Model.
The intent of web design is to create a web site—a collection of electronic files
that reside on a web server/servers and present content and interactive features/interfaces
to the end user in form of Web pages once requested. Such elements as text, bit-mapped
images (GIFs, JPEGs) and forms can be placed on the page using HTML/XHTML/XML
tags. Displaying more complex media (vector graphics, animations, videos, and sounds)
requires plug-ins such as Adobe Flash, QuickTime, Java run-time environment, etc.
Plug-ins is also embedded into web page by using HTML/XHTML tags.
There are differences between static page and dynamic page. Static pages don’t
change content and layout with every request unless a human manually updates the page.
A simple HTML page is an example of static content. Dynamic pages adapt their content
and/or appearance depending on end-user’s input/ interaction. Content can be changed on
the client side (end-user's computer) by using client-side scripting languages (JavaScript,
JScript, Actionscript, etc.) to alter DOM elements (DHTML). Dynamic content is often
compiled on the server utilizing server-side scripting languages (Perl, PHP, ASP, JSP,
ColdFusion, etc.). Both approaches are usually used in complex applications.
Client-side scripting is a language that generally refers to the class of computer
programs on the web that are executed on client-side, by the user's web browser, instead
of server-side (on the web server). This type of computer programming is an important
part of the Dynamic HTML (DHTML) concept, enabling web pages to be scripted; that
is, to have different and changing content depending on user input, environmental
conditions (such as the time of day), or other variables.
In today’s technology, all Java script source code developed by webmaster
around the globe are easy to obtain from Internet. So, in this portal, some dynamic
elements that develop by Java script can be obtained from internet, modified it and
embedded into portal. Initially, a webmaster needs to be familiar about structure of Java
script.
29
3.3.1
Structure of Java script
JavaScript can either be embedded in a page or placed in an external script file
(rather like CSS). But in order to work in the browser, the browser must be JavaScript
enabled. (The major browsers allow users to disable JavaScript, although very few
people do.) [6]. Scripts were added to page inside the < script > element. The type
attribute on the opening < script > tag indicates what scripting language will be found
inside the element, so for JavaScript use the value text/JavaScript. Java Scripts can also be written in external documents that have the file
extension .js (just in the same way with writing in external style sheets). This is a
particularly good option because java script can be is used by more than one page
without needs to repeat the script in each page that uses it. If somebody wants to update a
script, it needs only be changed it in one place. It also makes the HTML page cleaner and
easier to read [6].
When placing a JavaScript in an external file, we need to use the “src” attribute
on the < script > element; the value of the “src” attribute should be an absolute or relative
URL pointing to the file containing the JavaScript. For example:
< script type=”JavaScript” src=”scripts/validation.js” > < /script >
So there are three places to put Java Scripts, and a single HTML document can use
all three because there is no limit on the number of scripts one document can contain:
1) In the < head > of a page: These scripts will be called when an event triggers
them.
2) In the < body > of a page: These scripts will run as the page loads.
3) In an external file: If the link is placed inside the < head > element, the script is
treated the same as when the script lives inside the head of the document waiting
for an event to trigger it, whereas if it is placed in the < body > element it will act
like a script in the body section and execute as the page loads [6].
3.3.2 Java script Libraries
30
JavaScript files that contain functions that can be used in several pages are often
referred to as JavaScript libraries (because, once the file is included in certain page, its
functionality can be used.) [6]. There are several scripts that offer functionality that can
be used in web pages such as animated effects and drag - and - drop lists, Light boxes
and modal windows, sortable tables, calendar controls and auto - completing text inputs.
Each of these example scripts is built on top of a one of the major JavaScript
libraries which can be used again and again on the Web such as Scriptaculous (which is
actually built on top of another JavaScript library called Prototype), JQuery , Mochi- Kit,
Yahoo User Interface (YUI)and etc.
3.3.3
JQuery Library
jQuery Tools is a collection of the most important user interface components for
the web. These are tabs and accordions, tool tips, overlays, exposing effects and
scrollable. Other JavaScript UI libraries (Script.aculo.us, MooTools and etc) are focus on
desktop-like features such as drag-and-drop, sliders, sortable tables or draggable
windows. They are meant to build "rich internet applications" such as email clients, task
managers, and image organizers or feed viewers. These kinds of applications are very
useful within a small group or when used in intranets; however, normal websites are very
different in nature. Their purpose is to look good and present information. jQuery Tools
are built exactly for that purpose.
The purpose of this library is to enhance an existing site with the great
possibilities that modern JavaScript techniques has to offer. This is essentially the idea of
"progressive enhancement" which is a common design pattern today. Scripting is only
used when it truly makes the pages more readable and user friendly. This is where these
tools come in to play.
Today, there are many user interface components/elements developed by using
some Java scripts library in internet. Some portal such as Webdesignledger.com, Webappers.com and Ajaxrain.com provide varieties of pre-made user interface
component such as slider, drop down panel, multipurpose calendar, light box and etc.
Anything-Slider plug-in developed by using jQuery library, a featured content slider
combined with a “start/stop “ effect, and “moving boxes“ effect ,Dynamic Drive dropdown panel from Dynamic Drive portal, and Wibiya© toolbar developed by Modular
Patterns Ltd, are widely used in this project.
31
Anything-Slider and Dynamic Drive drop-down panel have its source codes
(external CSS file and Java script source code on head tag in web pages) that is
maintained by using Coffee Cup© HTML Editor. For Wibiya© toolbar, there is an
online maintenance platform developed by Modular Pattern Ltd for some application
such as community feature powered by Facebook©, Twitter© dashboard powered by
Twitter, search column ,indicator for current online user and etc. Figure 3.8 shows the
layout of Anything- slider illustrated in Resistor topic. Figure 3.9 and Figure 3.10 shows
layouts for Drop- down panel and Wibiya© toolbar respectively.
Figure 3.8: Layout of Anything-Slider illustrated in Resistor topic
Figure 3.9: Layout of Dynamic Drive Drop-Drop panel illustrated in homepages
32
Figure 3.10: Layout of Wibiya ©Toolbar illustrated in Resistor topic
All related source code for Anything-Slider, Drop Down panel and Wibiya©
toolbar are included in Appendix A.
3.4
Learning Material (Java applet and notes)
Electrical theories notes for electrical topics in Physic subject are obtained from
the following sources:
1) STPM Physics textbook: STPM Physics Volume 2 (Publisher: Pelangi)
2) STPM Physics material online resource: edu.joshuatly.com v2
3) SPM Physic Textbook: Focus Ace SPM-Physics (Publisher :Pelangi)
4) SPM Physic material online resource : one-school.net
All references from internet for Physic subject, selection of FKE subjects and
some resources of Java applets are listed in Appendix B.
35 CHAPTER 4
RESULT AND DISCUSSION
This chapter reveals some pages’ function results and discussions on usage of
portal’s pages.
4.1
Real Time Results
Figure 4.1 shows the Pages flow diagram, where each page has its own specific
functions and objectives. The web address for the portal is: http://juniorfke.200u.com
Selection
pages
Specific
Topic
pages
Main Page
Figure 4.1: Pages flow diagram
34
4.1.1
Homepage
Figure 4.2 shows the upper part of the home page of Junior FKE Portal. In this
figure, there is a user interface component named as drop down panel developed from
Dynamic Drive webmaster (http://www.dynamicdrive.com). Figure 4.3 shows the layout
of drop-down panel. This user interface component tucks away ordinary HTML content
on the page and reveals on demand when the user clicks on the protruding tab. The rest of
the page's content is pushed down when the hidden content is exposed. It comes with a
handful of helpful features, from the use of an arrow image to reflect the current panel
state, persistence of the panel state, option to automatically close the panel when a link or
certain elements within it is clicked on, to the ability to customize the animation speed
(or to disable it entirely). Finally, two public methods exist to expand/ contract the panel
dynamically.
Figure 4.2: Upper side of JuniorFKE Home pages
35
Figure 4.3: Layout of Dynamic Drive Drop Down panel
Figure 4.4 shows the middle part of the home page. It can be seen that there are
5 topics using Coda- slider developed using Java script elements to show those content.
Those 5 topics are “About Junior”, “Semester System”, “Do you know?”, “Theories”,
and “Reference”. Topic “About Junior” states out the objectives and problem statements
of the portal. Topic “Semester System” gives some information regarding semester
system in general. Topic “Do You Know?” exposes some ideas on universities study
culture and some tips that enable student to be self-prepared before entering the
universities. Topic “Theories” provides some main topic links that cover some particular
topics in physic subject and selection from FKE subjects for student to choose and enter.
Topic “Reference” lists out some resources online (Learning material and Java applet)
used to develop the interactive content of Junior FKE.
36
Figure 4.4: Coda Slider with titles that embedded in Middle part of homepage
Figure 4.5 shows the bottom part of the home page in Junior FKE Portal. A
toolbar namely Wibiya© toolbar is used to make the portal as a community site for
students to share some ideas in term of daily life experience and others and seek
assistance from moderator regarding questions about learning material in the portal.
Figure 4.5: Wibiya© toolbar with Twitter© Dashboard appear on it in the bottom part of
home page in Junior FKE Portal
4.1.2
37
Selection Page
Figure 4.6 shows the layout of selection page under Electronics (Components, Circuit
Levels Analysis & Semiconductor Level Analysis) topic. This page covers some particular
topics in physic subject and selection of FKE subject. Those topics are distributed based on
various educational levels from SPM level to University level using Slick Map CSS. Slick Map
CSS is a simple style sheet for displaying finished site maps directly from HTML unordered list
navigation. It is suitable for most web sites – accommodating up to three levels of page
navigation and additional utility links – and can be easily customized to meet individual needs,
branding, or style preferences.
The general idea of Slick Map CSS is to streamline the web design process by
automating the illustration of site maps while at the same time allowing the pre-development of
functional HTML navigation. All students can choose either one of the subtopics to be learnt by
clicking on the tab button.
Figure 4.6: Selection page using Slick Map CSS to distribute all topics according to
educational level
38
4.1.3
Topic page
Figure 4.7 shows the upper part of layout on one of the Topic page (In this
figures: Bipolar Junction Transistor, BJT Topic page) using Anything-Slider
developed from Java script Library. This user interface component is used to enclose
the related learning material to the particular topic page. Topic page can also become
a visual aid instrument especially for lecturers who do not have sufficient time for
power point slide preparation.
Figure 4.7: Upper part of Topic page with Anything-Slider for learning material
enclosing
Figure 4.8 shows the bottom part of Topic page embedded with Java applet from
third party websites. Most of the Java applets are concept illustrating applets which
illustrate underlying concepts of the subject. These applets have maximum possible
interactivity on part of the user. In the present educational system, teaching hours are often insufficient for
students. Now that many students have access to the internet, such facility could be very
timely and convenient for students who wish to study the course material provided by
the portal at home in their own time. The need for physical proximity can thereby be
reduced.
Figure 4.8: Lower part of Topic page with embedded Java applet from third party
website related to particular Topic page
39
41 CHAPTER 5
CONCLUSION
This chapter discusses about the achievement of this project. Additionally,
recommendations for future project are also discussed.
5.1
Concluding Remarks
This project is Educational Junior FKE Portal, a dynamic portal which is designed for
students of secondary and tertiary educational level. This portal provides particular topic
in Physic subjects and a selection of FKE subjects for continuity learning. At the same
time, this portal is able to enhance the students’ learning experience by using Java
applets as highly interactive tools employed in portal. Beside that, this portal is
becoming a platform for students to seek assistance via live chat service (solved by
moderator) or leave comments on dashboard for public view (solved by moderator and
student). In order to ensure that all pre-university students are mentally prepared to enter
the university, some user interface components are used to make Junior FKE portal as a
community site for students to share some ideas in term of daily life experience and
others via message board. Overall, this portal encourage asynchronous distance learning
and thus help to overcome the limitations (involving both time and space) inherent in
traditional instructional techniques.
41
5.2
Future Recommendations
The extents of the works carried out in this project suggest that there are some
future works which can be carried out to further enhance the performance and the
function of the system. Below are some of the future works to be considered:
Firstly, all Java applets used for interactive content development should be
self-made. This is because those applets are maintained by third parties website and
usually student needs to reload twice on pages to make sure that the applets are
completely loaded. There are some appropriate Java applets which are arduous to
embed due to high security setting on Java source code. Hence, it leads to limited
amount of applets which is appropriate for certain topics.
Secondly, it is possible that Junior FKE portals to cover all electrical subjects
from FKE. In this case, the usage of applets in this portal along with desirable
multimedia support provides a representation that is often better in communicating a
concept than a static figure(s) or a written description. It also helps learners to
visualize the concept relatively easier. Through the multimedia support of the Internet,
the information can be represented dynamically and interactively - both of which Java
applets are well equipped with [1].
For final recommendation, this portal can be integrated with web conference
technology which gives ability for Junior FKE Portal to conduct live meetings,
training, or presentations via the Internet. In a web conference, each participant sits at
his or her own computer and is connected to other participants via the internet. This
can be either a downloaded application on each of the attendees' computers or a webbased application where the attendees access the meeting by clicking on a link
distributed by e-mail (meeting invitation) to enter the conference [7].This technology
will be a stepping stone for Junior FKE Portal to became a platform which boosts up
development of distance learning further and hence enhance the quality of learning
experience for all students.
42
REFERENCES
1.
Pankaj Kamthan, “Java Applets in Education,” Irt.org, March1999.
[Online]. Available: http://www.irt.org/articles/js151/index.htm. [Accessed:
March.19, 2010].
2.
Harb, S.; Kalaldeh, K.; Harb, A.; Batarseh, I.; , "Interactive Java applets for
power electronics E-learning," Power Electronics Education, 2005. IEEE
Workshop , vol., no., pp. 26- 33, June 16-17, 2005.
3.
Drofenik U., Kolar J.W., Van Duijsen P.J., Bauer P.: New Web-Based
Interactive E-Learning in Power Electronics and Electrical Machines
Proceedings of the IEEE Industry Applications Conference, 36th Annual
Meeting (IAS'2001), Chicago, Illinois, USA, Vol.3, pp. 1858-1865. Sept.30
- Oct.4 2001.
4.
David J. Eck. Introduction to Programming Using Java, 5th ed. Geneva,
New York: December 2006. [E-book] Available: Hobart and William Smith
Colleges.
5.
Steven C. Jones. Anatomy of a Java Applet: Part 1, Waltham, MA:
December 2006. [Article] Available: Novell Systems Research.
6.
Jon Duckett . Beginning HTML, XHTML, CSS, and JavaScript,1st. ed. Hoboken, NJ: John Wiley & Sons, Inc. 2009
7.
S. Spielman, L. Winfeld , The Web Conferencing Book ,1st.ed. Broadway,
NY: AMACOM .2003
8.
“The APPLET Tag’,
http://java.sun.com/j2se/1.4.2/docs/guide/misc/applet.html
43
APPENDIX A
Source Code for JavaScript libraries user interface component
1. Anything Slider
(Also available on: http://css-tricks.com/anythingslider-jquery-plugin/) <HEAD> tag:
Java Script library linking:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script><script
src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
CSS Script Linking:
<link rel="stylesheet" href="css2/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css2/slider.css" type="text/css" media="screen" />
Java Script Section:
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo",
// Anything other than "linear" or "swing"
requires the easing plugin
autoPlay: true,
// This turns off the entire FUNCTIONALY, not
just if it starts running or not.
delay: 3000,
// How long between slide transitions in AutoPlay
mode
// If autoPlay is on, this can force it to start
startStopped: false,
stopped
44
animationTime: 600,
// How long the slide transition takes
hashTags: true,
// Should links change the hashtag in the URL?
buildNavigation: true,
// If true, builds and list of anchor links to link
to each slide
pauseOnHover: true,
// If true, and autoPlay is enabled, the
show will pause on hover
startText: "Go",
// Start text
stopText: "Stop",
// Stop text
navigationFormatter: formatText
// Details at the top of the
file on this use (advanced use)
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
<BODY> Tag:
Division tag:
<div id="page-wrap">
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li> .. .. ..Content.. .. </li></ul>
<ul><li>.. .. .. Content Here .. ..<li></li>
</div>
</div>
</div>
2. Drop Down panel
(Also available on: http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm)
<HEAD> tag:
Java Script library and CSS script linking : <link rel="stylesheet" type="text/css" href="css/dddropdownpanel.css" />
<script type="text/javascript" src="Java Script/dddropdownpanel.js">
<BODY> Tag:
<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent"> .. .. .. ..Large Content .. ..
</div></div>
<div id="mypaneltab" class="ddpaneltab">
<A href="#"><span>Click here for Important Links</span></A>
</div>
45
46
3. Wibiya© Toolbar
(Also available on: http://www.wibiya.com/)
In<BODY> tag:
<script
src="http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=23625&amp;pl=1"
type='text/javascript'></script>
4. Slick Map CSS
(Also available on: http://astuteo.com/slickmap/)
<HEAD> tag:
CSS script linking
<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
<BODY> tag:
<div class="sitemap">
<h2>Preliminary Site Map</h2>
<ul id="primaryNav" class="col4">
<li id="home"><a href="">Electronic</a></li>
<li><a href="V,I ,R,Power.html">V,I,R,Ohms law &
Power(SPM& STPM& Matriculation)</a>
</li>
<li><a href="">Componenents</a>
<ul>
<li><a
href="resistor.html">Resistor(SPM)</a></li>
<li><a
href="capacitor.html">Capacitor(STPM& Matriculation)</a></li>
<li><a
href="transistor.html">Transistor(University)</a>
<ul>
<li><a
47
href="bjt.html">BJT(University)</a></li>
<li><a
href="jfet.html">JFET(University)</a></li>
<li><a
href="mosfet.html">MOSFET(University)</a></li>
</ul>
</li>
<li><a href="diode.html">Diode(STPM&
Matriculation)</a></li>
<li><a href="inductor.html">Inductor(STPM&
Matriculation)</a></li>
</ul>
</li>
<li><a href="">Circuit level Analysis</a>
<ul>
<li><a href="voltagedivider.html">Volltage
Divider(STPM& Matriculation)</a>
<li><a href="kclkvl.html">Kirchhoff's 1 & 2
Law(STPM& Matriculation)</a>
<ul>
<li><a href="meshnodal.html">Mesh and
Nodal Analysis(University)</a>
<li><a
href="dependentsource.html">Circuits with Dependent Sources(University)</a>
</ul>
<li><a href="1stordercrt.html">First Order
Circuit(University)</a>
<li><a href="accrt.html">AC
Circuit(University)</a></li>
<li><a href="sourcetransform.html">Source
Trasformation (University)</a>
<li><a href="thevenin.html">Thevenin
Equivalent Circuits(University)</a>
</ul>
</li>
<li><a href="">Semiconductor Level Analysis</a>
<ul>
<li><a href="/contact/offices">NIL</a>
<li><a href="/projects/finance">NIL</a>
<li><a href="/projects/medical">NIL</a>
<li><a href="/projects/education">NIL</a>
<ul>
<li><a
48
href="contact/map">Map</a></li>
<li><a href="contact/form">Contact Form</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
49
APPENDIX B
List of applets and List of internet reference according to topic
Guidelines:
Link: Links for additional notes in term of articles from third parties website.
Applet: Java applets related to particular topic
Content: Links for learning materials that adapt to covers particular topic
Files: Links for notes which is adapt from third parties website (in pdf, ppt format)
and saved in Junior FKE portal web server.
V, I, R, Power
Content1 1:
http://www.kpsec.freeuk.com/map.htm
Applet 1:
http://www.ndted.org/EducationResources/CommunityCollege/EddyCurrents/Physis/
currentflow.htm
Applet 2:
http://www.falstad.com/circuit/e-ohms.html
50
Resistor
Content 1:
http://www.kpsec.freeuk.com/components/resist.htm
Content 2:
http://micro.magnet.fsu.edu/electromag/electricity/resistance.html#CODE
Applet 1:
http://www.sethi.org/classes/phys214/lab_notes_orig/lab_10.html
Applet 2:
http://www.sethi.org/classes/phys214/lab_notes_orig/lab_10.html
Applet 3:
http://www.sethi.org/classes/phys214/lab_notes_orig/lab_10.html
Capacitors
Content 1:
http://micro.magnet.fsu.edu/electromag/electricity/capacitance.html
Content 2:
http://www.kpsec.freeuk.com/components/capac.htm
Content 3:
http://www.sweethaven.com/sweethaven/ModElec/acee/lessonMain.asp?i Num=103
Content 4:
51
http://hyperphysics.phy-astr.gsu.edu/hbase/electric/capdis.html
Content 5:
http://hyperphysics.phy-astr.gsu.edu/hbase/electric/capac.html#c2
Content 6:
http://www.coilgun.info/theorycapacitors/capacitorcharging.htm
Content 7:
http://www.schule bw.de/unterricht/faecher/physik/online_material/ntnu/rc/rc.html
Content 8:
http://www.kpsec.freeuk.com/capacit.htm
Applet 1:
http://www.falstad.com/circuit/e-cap.html
Applet 2:
http://www.schule bw.de/unterricht/faecher/physik/online_material/ntnu/rc/rc.html
Applet 3:
http://lectureonline.cl.msu.edu/~mmp/kap19/RR480app.htm
Diode
Content 1:
http://www.standrews.ac.uk/~www_pa/Scots_Guide/info/comp/passive/diode/diode.
htm
Content 2:
http://www.kpsec.freeuk.com/components/diode.htm
Content 3:
http://www.reuk.co.uk/What-is-a-Zener-Diode.htm (Zener Diode)
Content 4:
http://hyperphysics.phy-astr.gsu.edu/hbase/Solids/zener.html
Content 5:
http://hyperphysics.phy-astr.gsu.edu/hbase/solids/pnjun.html
Content 6:
http://en.wikipedia.org/wiki/P-N_junction
Content 7:
http://www.sas.org/tcs/weeklyIssues_2009/2009-01-02/feature1/index.html
(Semiconductor)
Content 8:
http://hyperphysics.phy-astr.gsu.edu/hbase/solids/intrin.html#c4 (Intrinsic
Semiconductor)
Content 9:
http://pvcdrom.pveducation.org/SEMICON/EQUAN.HTM
Applet 1:
http://www.falstad.com/circuit/e-diodecurve.html(x used coz conflict)
Applet 2:
http://www.falstad.com/circuit/e-zeneriv.html
Applet 3:
http://www.launc.tased.edu.au/online/sciences/Physics/photonics/bias.htm
52
Inductor
Content 1:
http://electronics.howstuffworks.com/inductor1.htm
Content 2:
http://www.play-hookey.com/dc_theory/components_inductors.html
Content 3:
http://www.allaboutcircuits.com/vol_1/chpt_15/2.html
Content 4:
http://en.wikipedia.org/wiki/Inductor
Applet 1:
http://www.cco.caltech.edu/~phys1/java/phys1/Inductance/Inductance.html
Transistor (BJT)
Content 1:
http://www.calculatoredge.com/electronics/BJT.htm (Calculator)
Content 2:
http://www.kpsec.freeuk.com/components/tran.htm
Content 3:
http://www.tpub.com/neets/book7/25c.htm (transistor -amplifier)
53
Content 4:
http://101science.com/tranbasic.htm (Completed Transistor info)
Content 5:
http://www.techlearner.com/Semiconductors.htm
Content 6:
http://transistor.20m.com/transistor.html (Transistor Calculator)
Content 7:
http://www.williamson-labs.com/480_xtor.htm#introduction
Content 8:
http://users.ece.gatech.edu/~mleach/ece3050/
Content 9:
http://www.allaboutcircuits.com/vol_3/chpt_4/1.html (BJT)
Content 10:
http://en.wikipedia.org/wiki/Bipolar_junction_transistor#Activemode_NPN_transistors_in_circuits
Content 11:
http://people.seas.harvard.edu/~jones/es154/lectures/lecture_3/lecture_3.html
Content 12:
http://101science.com/transistor.htm
Content 13:
http://people.seas.harvard.edu/~jones/es154/lectures/lecture_3/lecture_3.html
Content 14:
54
55
http://www.pupr.edu/cpu/Electrica/EE3500/bjt_configurations.htm
Files 1:
http://users.ece.gatech.edu/~mleach/ece3050/ (Bias Equation)
Files 2:
http://people.seas.harvard.edu/~jones/es154/lectures/lecture_3/bjt_biasing/bjt_biasin
g.html
Files 3:
http://www.electronics-tutorials.ws/transistor/tran_2.html (CE Configuration)
Applet 1:
http://jas.eng.buffalo.edu/education/ckt/bjtamp/index.html
Applet 2:
http://jas.eng.buffalo.edu/education/ckt/comEmitAmp/index.html
Transistor (JFET)
Content 1:
http://www.electronics-tutorials.ws/transistor/tran_5.html
Content 2:
http://users.ece.gatech.edu/~mleach/ece3050/
Content 3:
http://hyperphysics.phy-astr.gsu.edu/Hbase/Electronic/fet.html
Content 4:
http://www.electronics-tutorials.ws/amplifier/amp_1.html (Introduction on Amplifier)
Content 5:
http://www.electronics-tutorials.ws/amplifier/amp_3.html(JFET CS Amplifier)
JFET Bias Equation
Link 1:
http://www.circuitstoday.com/fet-biasing
Applets 1:
http://jas.eng.buffalo.edu/education/jfet/index.html
Applets 2:
http://www-g.eng.cam.ac.uk/mmg/teaching/linearcircuits/jfet.html
Bias Equation
Files 1:
www.kennethkuhn.com/students/ee351/text/jfet_bias_analysis.pdf
Files 2:
www.kennethkuhn.com/students/ee351/text/jfet_bias_design.pdf
Files 3:
www.uotiq.org/dep-eee/lectures/2nd/Electronics%201/part5.pd
Transistor (MOSFET)
Content 1:
http://www.electronics-tutorials.ws/transistor/tran_6.html
Content 2:
56
http://users.ece.gatech.edu/~mleach/ece3050/
Content 3:
http://en.wikipedia.org/wiki/MOSFET
Link 1:
http://www.circuitstoday.com/demosfet-depletion-enhancement-mosfet
Link 2:
http://www.circuitstoday.com/emosfet-enhancement-mosfet
Link 3:
http://www.circuitstoday.com/jfet-and-mosfet-comparison
Applet 1:
http://www-g.eng.cam.ac.uk/mmg/teaching/linearcircuits/mosfet.html
Applet 2:
http://jas.eng.buffalo.edu/education/mos/mosfet/mos_1.html
Files 1:
www.fke.utm.my/.../SEE2063/Ch6%20FETs%20Biasing%20SEE2063.pdf
Files 2:
www.most.gov.mm/techuni/media/EcE03015_9.pdf
Files 3:
http://notes.ump.edu.my/fkee/BEE2233_Farizan/2.%20FET%20Biasing.ppt
Voltage Divider
57
58
Content 1:
http://hyperphysics.phy-astr.gsu.edu/HBASE/electric/voldiv.html
Content 2:
http://www.swarthmore.edu/NatSci/echeeve1/Ref/E72WhaKnow/WhaKnow.html
Content 3:
http://www.kpsec.freeuk.com/vdivider.htm
Content 4:
http://en.wikibooks.org/wiki/Electronics_Course/Electronic_Circuits/Voltage_Divide
r_Circuit
Applet 1:
http://people.clarkson.edu/~jsvoboda/eta/dcWorkout/VandCDividers.html
Kirchhoff's 1 and 2 Law
Content 1:
http://en.wikipedia.org/wiki/Kirchhoff%27s_circuit_laws
Content 2:
http://regentsprep.org/Regents/physics/phys03/bkirchof1/default.htm
Content 3:
http://www.regentsprep.org/Regents/physics/phys03/bkirchof2/default.htm
Content 4:
http://en.wikiversity.org/wiki/Passive_sign_convention (Passive Sign Convention)
Content 5:
59
http://en.wikiversity.org/wiki/Kirchhoff%27s_Voltage_Law
Content 6:
http://en.wikiversity.org/wiki/Kirchhoff%27s_Current_Law
Link 1:
http://hermes.eee.nott.ac.uk/teaching/cal/h51eec/eec0006.html (KVL)
Link 2:
http://hermes.eee.nott.ac.uk/teaching/cal/h51eec/eec0007.html (KCL)
Extra Link 1:
http://www.ent.ohiou.edu/~manhire/basic_ee/chapter02/sld038.htm
Files 1:
http://www.most.gov.mm/techuni/index.php?option=com_content&task=view&id=8
7#agti2(Applied Electronic Engineering)
Files 2:
www.niu.edu/iteams/documents/ueet602/KVL%20and%20KCL.pdf
Files 3:
www.ece.pdx.edu/~prasads/BasicConcepts.pdf (Passive Sign Convention)
Applet 1:
http://people.clarkson.edu/~jsvoboda/eta/dcWorkout/KCL_KVL.html
Applet 2:
http://people.clarkson.edu/~jsvoboda/eta/dcWorkout/OandKLawsR.html
60
Mesh and Nodal Analysis
Content 1:
http://en.wikibooks.org/wiki/Electronics_Course/Electronic_Circuits/Nodal_Analysi
s
Content 2:
http://en.wikibooks.org/wiki/Electronics_Course/Electronic_Circuits/Mesh_Analysis
Content 3:
http://en.wikipedia.org/wiki/Mesh_analysis
Content 4:
http://en.wikipedia.org/wiki/Nodal_analysis
Files 1:
http://www.most.gov.mm/techuni/index.php?option=com_content&task=view&id=8
7#agti2(Applied Electronic Engineering)--(Second Main Note)
Files 2:
http://ocw.mit.edu/NR/rdonlyres/10AA0A32.../nodal_mesh_methd.pdf (Main note)
Files 3:
http://www.cramster.com/node-and-mesh-analysis-lecture-note-r30-63442.aspx
(Question and Ans)
Link 1:
http://en.wikiversity.org/wiki/Mesh_Analysis
Link 2:
http://en.wikiversity.org/wiki/Nodal_analysis
Applet 1:
http://people.clarkson.edu/~jsvoboda/eta/dcWorkout/MandNeqn0.html
Applet 2:
http://people.clarkson.edu/~jsvoboda/eta/dcWorkout/MandNeqnR.html
Circuit with Dependent source
Content1:
www-inst.eecs.berkeley.edu/~ee40/sp03/lectures/student7_2003.pdf
Content2:
www.ece.osu.edu/ems/.../Lecture%2013_Dependent%20Sources.ppt
Files 1:
www.coe.uncc.edu/.../Circuits1/3.%20Dependent%20Sources,%20Sept2003.pps
Applet 1:
http://people.clarkson.edu/~jsvoboda/eta/dcWorkout/OandKLawsVCVS.html
Applet 2:
http://people.clarkson.edu/~jsvoboda/eta/dcWorkout/MandNeqn2.html
Applet 3:
http://people.clarkson.edu/~jsvoboda/eta/dcWorkout/MandNeqnVCVS.html
61
62
Intrinsic Semiconductor and Energy Band
Content 1:
http://britneyspears.ac/physics/basics/basics.htm
Content 2:
http://www.sas.org/tcs/weeklyIssues_2009/2009-01-02/feature1/index.html
Content 3:
http://en.wikipedia.org/wiki/Intrinsic_semiconductor (Main)
Content 4:
http://hyperphysics.phy-astr.gsu.edu/hbase/solids/intrin.html
Content 5:
http://www.allaboutcircuits.com/vol_3/chpt_2/5.html (Further info for Electron and
Hole part)
Content 6:
http://mste.illinois.edu/murphy/HoleFlow/HoleFlow.html (Hole Flow)
Link 1:
http://www.allaboutcircuits.com/vol_3/chpt_2/4.html
Link 2:
http://www.allaboutcircuits.com/vol_3/chpt_2/3.html
Applet 1:
http://mste.illinois.edu/murphy/HoleFlow/HoleFlow.html (Hole Flow)
63
Fermi Level and Function
Content 1:
http://britneyspears.ac/physics/basics/basics.htm
Content 2:
http://hyperphysics.phy-astr.gsu.edu/hbase/solids/fermi.html#c1
Content 3:
http://www.ece.utep.edu/courses/ee3329/ee3329/Studyguide/faqs/fermi.html
Applet 1:
http://jas.eng.buffalo.edu/education/semicon/fermi/functionAndStates/functionAndSt
ates.html
Applet 2:
http://www.benfold.com/sse/fd.html
Applet3:
http://www.ece.utep.edu/courses/ee3329/ee3329/Studyguide/Java/Fermi/index.html
Applet 4:
http://www.acsu.buffalo.edu/~wie/applet/fermi/fermi.html (Fermi Level vs. Carrier
Concentration)
Link 1:
http://www.colorado.edu/physics/2000/elements_as_atoms/electron_config.html
(The Pauli Exclusion Principle)
Link 2:
http://particleadventure.org/pauli.html
64
Crystal Structure
Content 1:
http://britneyspears.ac/physics/crystals/wcrystals.htm
Content 2:
http://ecee.colorado.edu/~bart/book/book/chapter2/ch2_2.htm
Content 3:
http://people.seas.harvard.edu/~jones/ap216/lectures/ls_2/ls2_u7/sse_tut_1/solid1.ht
ml
Link 1:
http://cnx.org/content/m16927/latest/
Link 2:
http://www.eecs.umich.edu/~singh/bk7ch01.pdf
Applet 1:
http://jas.eng.buffalo.edu/education/solid/unitCell/cell.html
Applet 2:
http://jas.eng.buffalo.edu/education/solid/hcp/cell.html