PreprintPDF Available
A GUIDE TO IMPLEMENTING ONLINE SIMULATIONS USING HTML, JAVASCRIPT
AND SVG
D. Dorran, P. Leamy and T. Burke
Technological University Dublin
Dublin, Ireland
Conference Key Areas: Open and online education, Engineering skills
Keywords: Online interactive simulation
ABSTRACT
Online simulations created using HTML, JavaScript and SVG images can be
accessed by any end user with a web browser, making them widely accessible and
compatible with computers running Microsoft, macOS or Linux-based operating
systems. This paper outlines the methods and tools used by the authors to create
interactive online educational simulations using these core web technologies.
Three example simulations are referred to throughout the paper: A 'bare-bones'
example which is used to highlight the key components of these type of simulations;
a second example serves as template for more complex simulations; finally, an
implementation of an oscilloscope, an electrical device typically used by electrical
engineering undergraduates throughout their degree programmes, is used as a
practical working example, which has proven popular with a global community of
students and educators.
The paper is intended as a resource to assist educators developing simulations
using similar techniques. The authors share their experiences in developing the
simulations and provide links to relevant videos, resources, and tools.
1 INTRODUCTION
Online simulations can help students learn new skills by providing them with an
opportunity to practice using equipment at a convenient time and location [1]. They
can also allow students gain an understanding of the operation of equipment safely
and without being concerned with damaging it or being exposed to the potential
social anxiety of being observed using equipment incorrectly by peers and mentors.
The interactive online simulation of an oscilloscope available at [2] (see Fig. 1) is
ranked at the top of Google's search engine for the term "Online Oscilloscope" and
similar terms. It has received positive comments and feedback through its
companion YouTube video tutorial and is accessed approximately 3,500 times per
week (March 2020).
This simulation was developed using the core web technologies of HTML, CSS and
JavaScript, which are widely used and are supported across a global community of
developers. There are many introductory tutorials available which can assist
inexperienced developers make progress relatively quickly. The authors recommend
[3] as a learning resource for inexperienced newcomers, which provides a
straightforward method of learning-by-doing in an interactive manner.
One of the benefits of using HTML, CSS and JavaScript is that users only require a
modern browser to run the simulation, making it globally accessible without the need
for end users to install any additional software. Any simulation developed using
these core web technologies can be deployed on computers running Microsoft,
macOS or Linux-based operating systems which overcomes issues associated with
students having different OS preferences.
Fig. 1. Online Oscilloscope and Signal Generator interface from [2]
Another important feature of the simulation is that it makes use of SVG images. SVG
images are scalable, which means that end users can "zoom-in" the simulation
images without loss of image resolution or quality. This is particularly important for
simulations that contain fine detail and contrasts with traditional web image formats
such as JPEG and GIF, which are not scalable (see Fig. 2). SVG images can also be
interactive and can be created to allow users change properties of the image by
clicking on or dragging elements, for example. Another aspect of SVG images is that
they are text-based (as shown in the ‘bare bones’ example below), so they can be
edited using any non-proprietary text editor. The text-based aspect is also of
potential benefit to those with some programming experience since image elements
could be created conveniently through code.
It's worth noting that browser support for SVG images is relatively recent and that
browsers pre-dating 2018 may not fully support these types of images. SVG images
also tend to render more slowly in a browser than JPEG and GIF, an experience that
can be noticeable to an end user, particularly for large files.
During the design and implementation phases of the simulation Notepad++ (a text
editor) and Inkscape (an SVG editor) were used by the authors, both of which are
free and open-source software applications. The remainder of this document
provides three examples which provide insight into the creation of online simulation
tools.
Fig. 2. Effect of ‘zooming-in’ in on a scalable SVG image (left) compared with a GIF image (right)
2 A ‘BARE-BONES’ EXAMPLE
Interactive simulations react to end user actions such as mouse clicking and
dragging events. The ‘bare-bones’ example code shown below creates a web page
containing an SVG image of a red square, if the end user clicks on the square it will
turn blue (see [4] for an online demonstration). The purpose of this example is to
introduce the reader to the key components of more complex examples referred to in
the remainder of this document.
Fig. 3. ‘Bare-bones’ code with rendered web page output shown on the top right
An interested reader can copy this code into a text editor and save the file as an
HTML file, as shown in the video demonstration available at [4], in order to explore
its operation further. Changing the width and height attributes of the SVG image may
be useful exercise to begin with. Note that a full explanation of the code is outside
the scope of this document, the intention here is to provide a brief summary that may
serve to pique the reader's interest and encourage further exploration.
Referring to the code above, both the JavaScript (green text) and SVG (red text) is
contained within the HTML (blue text). JavaScript is used to add functionality to the
example, in other words it provides the means to react to the end user's actions.
SVG is used to create the image elements. In this example a red square element is
created by inclusion of the following line, which is referred to as a rect SVG element:
<rectid="squ"onclick="change()"width="50"height="50"style="fill:rgb(255,0,0);"/>
The rect SVG element is used to create a rectangle element and this example
element has five attributes associated with it: id,onclick,width,height and style. The
style attribute has a value "fill:rgb(255,0,0);" which fills in the square element with the
colour described using the RGB colour model. The acronym RGB represents Red,
Green, Blue. In this example, the fill colour is 255 parts red, 0 parts green and 0
parts blue.
The id attribute has a value "squ". This value should be unique within the simulation
code and is chosen by the developer (the author of the code). By setting the onclick
attribute to the value "change()" the JavaScript function change() is executed when
the end user clicks on the square. The JavaScript function change() updates the style
attribute of the SVG element with the id attribute "squ" to "fill:rgb(0,0,255);", making
the fill colour 0 parts red, 0 parts green and 255 parts blue. If the onclick attribute is
removed then the image will no longer be interactive.
3 A SECOND EXAMPLE
While an SVG image can be created using any text editor, in practice images are
generally created using SVG editors, which provide a user-friendly means to drag
and drop elements onto a drawing. Figure 4, below, shows the SVG image from a
second example which is available online at [4]. In this example the end user can
select one of two shapes to be displayed in the left panel. The end user can also
rotate and scale the shape selected using a dial and slider. A video available at [4]
demonstrates how this second example was created which includes the steps
requires to create the SVG image using Inkscape and the process of coding in
JavaScript.
The purpose of this example is to provide the reader with a template to explore the
additional functionality available to a prospective developer. The full code can be
viewed by accessing [4] and viewing the source of the web page (use the search
engine of your choice to discover how to do this within your chosen web browser).
The code follows a similar layout to the ‘bare-bones’ example provided but the SVG
image is over 350 lines and there are about 100 lines of JavaScript, making it
impractical to present here.
The key steps involved in creating the simulation are:
1. Design the user interface using an SVG editor (e.g. Inkscape)
2. Copy the SVG text into the HTML file (see ‘bare-bones’ example)
3. Write JavaScript code to implement user functionality
4. Test using a variety of browsers and platforms (see section 5 for more detail)
Fig. 4. User interface for a second example simulation
Inkscape has many drawing features and can take considerable time to master,
however there are a few features that the authors relied on heavily during the
development of the online oscilloscope. An overview of these features is provided in
the video demonstration available at [4].
Being able to take full advantage of JavaScript requires programming experience,
however with the wide availability of online examples the overhead in developing
applications can be considerably reduced. When developing simulations it is
important to be aware of the types of user actions and events that can trigger a
JavaScript response. The key events utilised in the online oscilloscope simulation
were:
onclick – when a user clicks (presses and releases a mouse button) on an
element
onmouseover – when a users pointer is positioned over an element
onmousemove – when a user moves their pointer over an element
onmouseout – when a user moves their pointer away from an element
onmousedown – when a user presses the mouse button down
onmouseup – when a user releases the mouse button
4 ONLINE OSCILLOSCOPE DESIGN CONSIDERATIONS
There are a great deal of resources on designing user interfaces to achieve an
optimal user experience [5]. The principals and best practices described in these
resources should, of course, be borne in mind when developing any simulation. This
section, however, places a focus on the design considerations specifically relating to
the online oscilloscope with the intention of assisting developers who intend to
design similar simulations.
During design phase of the online oscilloscope a priority was to present an interface
that was quasi-realistic while at the same time being readily interpretable in an online
2-D context. One example where the design was adjusted to accommodate ease of
interpretability can been seen in the case of the presentation of the 'Trigger' and
Channel 'Switches' (see Figures 1 and 2). In an earlier version these switches where
presented as buttons, similar to the 'Frequency Select' buttons shown on the
waveform generator. These buttons would be more typical of the style used in
modern oscilloscopes but the switches used in the final version indicate their state
(on or off) more clearly in a flat 2-D context. Furthermore, the number of channels
was restricted to one, and the options on the both the volts/div and time/div dials are
less than would be found on modern devices. These steps were taken in favour of
providing a more user-friendly interface.
Particular attention is required when considering elements of the interface that end
users will interact with and how they will interact with them. For example, a decision
was taken for users to rotate dials by clicking on the left side of the dial to rotate it in
an anti-clockwise direction. To highlight this feature the left side of the dial is
highlighted in red when the user hovers their mouse over the dial. Similarly, the right
side of the dial is highlighted in green to indicate to the user that clicking will result in
an action. A consequence of this decision is that additional image elements are
required to highlight each side of the dial.
5 ADDITIONAL NOTES
In this section the authors wish to share some other experiences which may benefit
developers create novel simulation tools.
The simulation should be tested on a variety of web browsers as browers can
interpret/execute HTML, JavaScript and SVG in slightly different ways. It should also
be noted that additional JavaScript code is required to make the simulations
touchscreen compatible. The authors found [6] to be a useful resource to deal with
issues relating to touchscreen devices.
It can be useful to convert SVG text elements to SVG path elements to prevent the
text displayed on simulations being selectable. The authors converted all text
elements to paths for the oscilloscope simulation as they found that users frequently
and inadvertently selected text elements while interacting with the simulation prior to
taking this step.
When using Inkscape to design the SVG user interface, developers should avoid
editing the SVG mark up using a text editor as these modifications can be
overwritten by the Inkscape editor if it is used again at a later stage. In particular, the
authors recommend that JavaScript functions associated with SVG elements be only
specified using the Object Properties feature, as shown in video demonstrations
available at [4].
REFERENCES
[1] Bourne, J., Harris, D., and Mayadas, F. (2005). Online engineering education:
Learning anywhere, anytime. Journal of Engineering Education, Vol. 94, No. 1,
pp.131–146.
[2] Dorran, D. (2021), Technological University Dublin, http://purl.org/dorran/elab
[3] W3Schools.com, W3Schools Online Web Tutorials, https://www.w3schools.com
[4] Dorran, D. (2021), Technological University Dublin,
http://purl.org/dorran/elab/tutorial
[5] Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (2nd
ed.). Rockport.
[6] Malek, C. (2013), CodiCode,
https://www.codicode.com/art/easy_way_to_add_touch_support_to_your_website.aspx
ResearchGate has not been able to resolve any citations for this publication.
Article
The emergence of worldwide communications networks and powerful computer technologies has redefined the concept of distance learning and the delivery of engineering education content. This article discusses the Sloan Consortium’s quest for quality, scale, and breadth in online learning, the impact on both continuing education of graduate engineers as well as degree-seeking engineering students, and the future of engineering colleges and schools as worldwide providers of engineering education.