OVERVIEW OF MATH LESSONS AUTHORING SYSTEM

(MLAS)

Samer F. Khasawneh and Paul S. Wang

Department of Computer Science, Kent State University, Kent, Ohio, U.S.A.

Keywords: (Virtual) Manipulative, Online Mathematics Lesson Authoring.

Abstract: Web-based Mathematics Education (WME) provides new and promising way to use the web to improve

mathematics education. However, WME lessons still require substantial programming skills to create and

modify. MLAS enables teachers, who might not have the required programming know-how, to create and

customize web-based mathematics lessons. MLAS is an on-web lesson authoring system with simple, yet

powerful, graphical user interface. Dynamic lessons can be generated with little effort and time by using

lesson templates. When authoring a lesson, a teacher may include one or more interactive virtual

manipulatives from MLAS. The manipulatives can be customized and can interact with one another or

questions and comments in the lesson page. MLAS offers a growing library of virtual manipulatives that are

fully customizable, editable, and reusable. The MLAS library is easily expandable by adding new

manipulatives contributed by teachers and other experts.

1 INTRODUCTION

Manipulatives, in general, are any objects, such as

coins, tiles, and even a paper that is cut or folded,

used to help students understand abstract math

concepts such as fractions and percentages in an

active, hands-on approach. With the advent of the

web and based on its potential effect in enhancing

the quality of education in general, and the math

subject in particular, a new term has come into

existence, “virtual manipulatives”. This term refers

to those manipulatives that cannot be “touched” but

rather can be “seen” on a computer screen, allowing

students to explore them using computer hardware,

such as a mouse and keyboard (CITEd Research

center).

A great deal of research has focused on the usage

of manipulatives in education. Researchers largely

agree on the benefits manipulatives can achieve.

“Manipulatives help students learn by allowing them

to move from concrete experiences to abstract

reasoning”(ETA Cuisenaire). A good manipulative

bridges the gap between informal math and formal

math. “The most valuable learning happens when

students build their own mathematical perception,

which is often accomplished through the use of

manipulatives” (Boggan, Harper, and Whitmire,

2010). With the advent of virtual manipulatives,

other advantages come into play. “Virtual

manipulatives allow users to engage and control

their actions in a way that extends real-world

manipulatives” (CITEd Research center). Virtual

manipulatives often overcome the limitations of

their original counterparts. For example, the shape,

size, color, and movement are not as limited as

concrete objects. Other advantages of virtual

manipulatives include:

• Availability: Most virtual manipulatives are

available for public use, and are free of charge.

• Time Saving: Teachers do not need to spend time

creating their own concrete manipulatives.

• Motivation: Students may find virtual

manipulatives more stimulating.

• Immediate feedback: Virtual manipulatives are

often “intelligent” and users can be notified when

they give right or wrong answers.

There are current technologies that help teach

mathematics. Some of these are web-oriented and

can be accessed with a URL, while others come in

downloadable software packages. The usability of

these applications varies significantly.

Most online systems that give teachers the ability

to edit mathematics contents come in worksheet

F. Khasawneh S. and S. Wang P..

OVERVIEW OF MATH LESSONS AUTHORING SYSTEM (MLAS).

DOI: 10.5220/0003921200480054

In Proceedings of the 4th International Conference on Computer Supported Education (CSEDU-2012), pages 48-54

ISBN: 978-989-8565-06-8

 2012 SCITEPRESS (Science and Technology Publications, Lda.)

format. In (Superkids Math Worksheet Creator) and

(Math Fact Cafe) for example, a user can print a

PDF document containing a number of computer-

generated series of mathematical calculations. The

output on the worksheets relies on the user’s input

parameters such as range, minimum, and maximum,

or it can be fully generated by the system. Once

printed, these worksheets become static and fail to

take advantage of technology, serving only as

supplements for textbooks.

The (National Library of Virtual Manipulatives)

(NLVM) provides online math lessons, activities,

and assessments. This NSF-funded project has a

library of 200+ applets covering the five NCTM

standards (NCTM, 1989). (Arcademic Builders)

offers fun and free online multi-player educational

math applet-based games for students and teachers.

In (E-learning Authoring System), an e-learning

authoring system is presented. It provides users with

an HTML editor to allow them to write and style

text, upload images, and ask questions. However,

this software package is not subject-oriented and is

not intended to focus on any one discipline. Further,

the relatively high cost of the system might be a

barrier against its usage.

2 MLAS IS DIFFERENT

Throughout our literature review, we have not come

across any system that allows teachers to create and

upload their own math lessons to the web. MLAS

overcomes the problems associated with the above

systems and tries to utilize the web to provide a

better atmosphere for teaching and learning math

online. Most of the above applications are not

customizable. Manipulatives have to be used “as-is”

with no editing or customization permitted. While an

applet renders nicely inside a browser window, it

does not interact well with its enclosing web page.

Applets cannot easily take advantage of the

document object model (DOM) for dynamic

interaction. Also, applets are slow to load and

require the java browser plug-in to be installed.

MLAS is a contribution towards the Web-based

Math Education (WME) project (Chiu, 2005),

(Wang et al., 2003-2006). The WME project unifies

the efforts of computer science and education

members to deliver classroom-ready, interactive, and

hands-on mathematics contents using cutting-edge

web technologies. With the presence and supervision

from educational experts in WME, WME lessons are

ensured to offer content-rich material abiding by the

NCTM standards (Figure 1).

Figure 1: The WME concept model.

MLAS, powered by up-to-date web technologies

including HTML, Javascript and jQuery, PHP,

AJAX, and MySQL, seeks to be a firsthand assistant

to math teachers. It allows them to author their own

lessons by offering a growing number of fully-

customizable manipulatives, sometimes referred to

as “manipulative builders”. A manipulative builder

allows a manipulative to be customized per teacher’s

specifications, therefore it can appear in several

forms and features for students’ use. Before

beginning lesson authoring, teachers deploy their

lessons under a topic module - a collection of

lessons pertaining to a certain grade level. Students

can access their lessons directly with a given URL,

by browsing the whole list of lessons under a

particular module, or by searching by keywords

through the search feature MLAS provides.

MLAS was built with the following goals in

mind:

• Ease of Use: MLAS can be used by anyone and

does not require any advanced computer skills. A

complete math lesson can be created and shared with

a few mouse clicks.

• Accessibility: MLAS is fully web-based and can

be accessed anytime and from anywhere. Further,

there is no software to download, update, or buy.

• Extensibility: Users who got some HTML and

Javascript knowledge can add their own

manipulatives to augment and extend the basic

functionalities and features of MLAS.

• Security: Depending on the user’s type, some

features might not be available. Thus, contents

remain safe and cannot be altered easily.

• Content Control: Manipulatives offered by

MLAS are directly supervised by the WME

educational members. All contents are to comply

with the NCTM standards.

OVERVIEWOFMATHLESSONSAUTHORINGSYSTEM(MLAS)

3 NATIVELY-SUPPORTED

MANIPULATIVE BUILDERS

BY MLAS

In this section, we briefly mention the current

customizable manipulatives natively supported by

our system. The ideas behind some of these come

from already-existing WME manipulatives deployed

on the WME site. However, complete

reimplementation was done to add more flexibility,

customization, and functionalities. Other

manipulatives below originated after suggestions

from the educational experts of WME. These

manipulatives can be used to cover several topics

such as percentages, fractions, and data

visualization. This list is constantly growing and

more manipulatives are underway.

3.1 Pie and Bar Graphs

Although two separate entities in MLAS, they are

combined in this context due to their inherent

relationship in visualizing data.

The bar graph manipulative allows the user to fill

out some input fields so a bar graph will be

generated. Such Fields include: Graph title, Y axis

maximum range, and bar-related info like bar name,

value, and color. There is no limit on the number of

bars that can be created (Figure 2). Adding or

deleting data will reflect instantly on the generated

graph as well.

Figure 2: An editable bar graph manipulative.

In MLAS, a pie graph can be created with the

same ease as the bar graph. In the pie chart

manipulative, a user can fill out pairs of label-value

fields with inputs. Adding such pairs can simply be

done with a mouse click. The pie chart will be

automatically generated and updated instantly as the

user adds or changes values in the fields above.

Students, on the other hand, will only be able to

see the generated pie or bar graph in the lesson page.

They will not be able to add or edit any data (Figure

3).

An underway development on the bar graph

manipulative aims to allow it to natively compute

values of several statistical operations, such as mean,

mode, and median, on the displayed data.

Figure 3: The bar graph in the lesson page.

3.2 Numbered Cubes

This manipulative enables students to virtually roll

numbered cubes with a click of a mouse. Surpassing

its original WME counterpart, teachers can select up

to six cubes for students to explore. Features,

including “power roll”, where any number of rolls

can be simulated with a mouse click, and “rolls

description table”, which indicates the number of

times a particular number of a cube appeared, can be

added or removed simply by a check or uncheck of

an HTML checkbox.

3.3 Calculations

This manipulative tests students’ ability to find out

the results of mathematical expressions. It allows

teachers to decide the types and values of the

mathematical operations and operands, respectively.

Teachers are not limited by a certain number of

operators and operands. Further, they do not have to

calculate the result of any composed expression as it

will automatically be calculated. This feature allows

for “auto-grading” and the system can independently

check the correctness of students’ answers to

provide immediate feedback.

3.4 Percentages

This manipulative encompasses three different

question formats on percentages namely:

• What is anyNumber % of anyNumber?

• anyNumber is what percent of anyNumber?

• anyNumber is anyNumber % of ?

Above, anyNumber is represented by an HTML

textbox that can be filled with any integer value. The

teacher, through three available HTML radio

CSEDU2012-4thInternationalConferenceonComputerSupportedEducation

buttons, can select the format of the question

desired. Students need to answer the question and

the system can independently calculate the answer

and compare it with the students’ answers.

3.5 Question Composer

This manipulative allows teachers to ask questions

in different formats such as T/F, fill in the blank,

multiple choice, and others (Figure 4).

In the multiple choice format, a teacher can

specify an error message for each option available.

This message would pop up when that option is

selected. This feature can only exist in a virtual

environment brought by the technology.

Figure 4: Questions can appear in multiple formats.

3.6 Manipulative-complementary Kit

MLAS has a built-in kit geared towards making

lesson authoring easier and more efficient. MLAS

features an embedded WYSIWYG HTML editor so

users can create text, symbols, notations, and upload

pictures.

MLAS also has a “Progress Menu” on the right

of the lesson authoring interface that keeps track of

all user activities such as adding, deleting, or editing

a manipulative. Each activity will be noted in the

progress menu and clicking on that activity will

undo all activities occurred after that activity. Thus,

a mistakenly deleted manipulative can easily be

restored saving the user time and trouble.

Although lesson contents reflect instantly on the

lesson page whenever teachers add or edit contents,

teachers can make their own lessons hidden at any

time to hide contents from students. Thus, an

incomplete lesson will not appear in the “Lessons

Page” and a teacher will have the opportunity to

finish the lesson at a later time.

Finally, all of the above manipulatives are

editable at any time and more than one instance of a

manipulative is permitted in the same lesson.

These manipulatives are intended to cover

certain mathematical concepts pertaining to certain

grade levels and cover good number of modules to

be perceived in hands-on approach.

4 MLAS SYSTEM

ARCHITECTURE

MLAS distinguishes between three types of users:

student and general group, teacher, and

administrator. To allow easy and open access to

MLAS, students and general users do not need login

information. Once they access the system, they can

go the “students’ page” and start browsing the

lessons. Login, however, is needed for a teacher’s

account. This allows a teacher to author and deploy

dynamic new educational pages. Teachers can keep

track of all lessons they authored so they can add,

edit, or delete contents any time. The administrator

has full control over the site and for instance can add

or delete users, lessons, and modules.

MLAS considers manipulative customization as

one of its goals. This means that a manipulative can

appear to students in different forms and possibly

with different inputs. Ultimately, it is the teacher

who decides in which form and input an instance of

a manipulative would look like. This is usually done

when a teacher checks a designated HTML

checkbox or radio button. All current manipulatives

are HTML/Javascript-based. When a user clicks on a

manipulative to appear, a Javascript function is

called and will dynamically generate big HTML

content to be displayed. This is considered

“teacher’s view” and will not be seen by students.

When the teacher is done with customization and

ready to save his/her work, that will call another

Javascript function that will, in most cases, generate

minimized HTML content to be saved into the

database and thus the manipulative becomes posted

so students can see it (student’s view). The teacher’s

and student’s views are related but occasionally

different. This can be depicted in the following

diagram.

Figure 5: A teacher’s view for the pie graph manipulative

after some customization.

OVERVIEWOFMATHLESSONSAUTHORINGSYSTEM(MLAS)

Figure 6 below illustrates what the students

would see on their screens:

Figure 6: A student’s view for the graph in figure 5.

5 USER-ADDED

MANIPULATIVES

MLAS offers an intuitive Graphical User Interface

(GUI) that enables users with HTML and Javascript

skills to deploy their own code and add any

manipulatives they want to be used by all users.

There are basically little or no limitations using

the self-guided interface. Through the available

HTML form, users either upload files of HTML,

Javascript, and CSS content to the server, or

alternatively they can type their codes directly into

designated HTML text input fields. Because a

manipulative often engages the use of dynamic

resources, the interface also allows our users to

upload any type of resource they wish (.swf, .class,

.jpg, etc.).

Figure 7: The GUI for manipulative embedding.

As appears in figure 7, the user interface has

three separate code segments for the user to fill with

HTML and/or Javascript. The first box is to be filled

with HTML only and can have some Javascript

inside any HTML event such as onmouseover or

onclick. This aids in manipulative flexibility and

multi-form property. However, this HTML only

forms the teacher’s view of a manipulative and

hence it is not yet ready to be previewed on the

lesson page.

The second box should have Javascript code

embedded to capture specific behaviour from the

HTML in the first box. For instance, if the HTML

from the box above had two HTML checkboxes and

one is initially checked, like:

<input checked=”checked”

type=”checkbox” id=”cb1” />First <br

/><input type=”checkbox” id=”cb2”

/>Second <br />

The jQuery statement below can be used in the

second box of the GUI and should pop-up the id of

the selected checkbox.

if($(‘#cb1’).attr(‘checked’)==true)

alert(‘cb1!’); else alert(‘cb2!’);

To make the manipulative available for display, a

programmer has to make an explicit call to the

Javascript function “save”, which is defined by

MLAS. This allows for a manipulative to be saved

in the appropriate database table through some

PHP/AJAX implementations. The save function

takes three string parameters: The first parameter is

the manipulative HTML content to be saved in the

database and thus to be previewed in the lesson

page. It could be related to the HTML from the first

box, but they are not necessarily the same. The

second and third string parameters do not affect the

functionality and behaviour of a manipulative, but

rather needed to describe its overall meaning. The

third parameter, in particular, will appear in the

progress menu described earlier.

The third box allows the user to define the

Javascript functions needed. Very often, HTML

events will make explicit calls to Javascript

functions which can be defined in this box. To avoid

name conflicts, we ask our users to choose unique

names for their functions. Since the user might not

always need to define his/her own functions, this

box can be left unfilled.

Once the user finishes filling out the necessary

items in the HTML form and submits it, everything

else gets taken care of by MLAS. The resources get

saved in a dedicated directory on the server and the

user’s code gets saved in a secure database. Then

CSEDU2012-4thInternationalConferenceonComputerSupportedEducation

through PHP, we extract that code from the database

and encapsulate it, along with other pieces of data,

under a couple of Javascript functions.

A typical user cannot distinguish between a user-

added and an admin-added manipulative builder. A

user-chosen manipulative image and name would

appear inside the manipulative builders menu as if

they were natively supported by MLAS. MLAS also

includes all the necessary code needed to make user-

added manipulatives appear and interact seamlessly

in their enclosing pages.

Since user’s HTML input is allowed, this implies

that interactive contents can be inserted to MLAS

and will be supported as well. For example Java

applets and flash files can be embedded to the

system with the use of the appropriate HTML tags.

Below is a simple example of how an applet can be

embedded to MLAS. In the applet context, only the

compiled version of the java program (.class

extension) needs to be uploaded to the server so the

browser can display the applet (assuming the

browser has the java plug-in installed).

5.1 Example

In this section we present a simple example to show

how to embed an applet in MLAS. The applet that

we will be showing is very simple. It is a single

button labelled as “This button doesn’t do anything”.

For this example, the only resources we need are the

applet image and the applet .class file. We begin by

giving our manipulative a name (say, Applet

Example), and then we upload the manipulative

image and the .class file (Assume named,

ExampleApplet.class) through the user interface.

To embed an applet in a web page, the HTML

<applet> tag needs to be used, with the codebase

attribute indicating the directory on the server where

the .class file exists, and the code attribute to denote

the name of the .class file itself. Other attributes,

such as width and height, might be used to control

the size of the applet. Therefore, the first HTML box

can be filled with the following HTML segment.

<applet codebase=”uploaded_files/”

code=”ExampleApplet.class” width=”400”

height=”50”></applet>

The GUI clearly indicates that all user uploads go

inside “uploaded_files” directory. Therefore that

directory is referenced in the codebase attribute

above.

In order to properly display the applet in the

lesson page, we need to have the above applet tag to

be the first parameter of the save function. Since, in

this case, the teacher’s and student’s views are

similar, nothing else needs to be added to the second

box. That can be something like:

var applet = ‘<applet

codebase=”uploaded_files/”

code=”ExampleApplet.class” width=”400”

height=”50”></applet>’;

save(applet,”Applet”,”Applet added!”);

All other fields of the HTML form can be left blank,

and the user can now proceed. The applet image will

now be available in the manipulative builders menu

together with all other builders and a click on that

image will show the applet (Figure 8).

Figure 8: User-added applet to MLAS.

6 CONCLUSIONS AND FUTURE

WORK

As presented earlier, there is a great need in our

society to address the issue of creating new and

innovative ways of educating children, particularly

in math. This paper presents a fully web-oriented

system that allows teachers to create and deploy

online mathematics lessons through a set of

customizable manipulative builders. The authored

lessons can be utilized to better engage students and

stimulate their way of thinking. Our continuous

work seeks to add more manipulative builders to

widen the topic areas of instruction. We also intend

to add import and export capabilities to our lessons

to allow teachers to share lessons with each other.

REFERENCES

CITEd Research Center, Learning Mathematics with

virtual manipulatives, http://www.cited.org/

index.asp?page_id=151. Accessed Nov 3.

ETA Cuisenaire, Research on the Benefits of

Manipulatives, http://www.etacuisenaire.com/pdf/

Benefits_of_Manipulatives.pdf

. Accessed on Nov. 3.

Smith, S. S., (2009). Early Childhood Mathematics (4th

ed.) Boston: Pearson education using manipulatives

(2009). http://www.teachervision.fen.com/pro-dev/

teaching-methods/48934.html. Retrieved Nov 5.

Boggan, M., Harper, S. and Whitmire, A., 2010. Using

manipulatives to teach elementary mathematics.

Journal of Instructional Pedagogies, 3(1), 1-10.

National Library of Virtual Manipulatives, Virtual

Manipulatives, Utah State University http://

OVERVIEWOFMATHLESSONSAUTHORINGSYSTEM(MLAS)

nlvm.usu.edu/ en/nav/index.html

National Council of Teachers of Mathematics. 1989.

Curriculum and evaluation standards for school

mathematics. Reston, VA.

Superkids Math Worksheet Creator. http://www.superkids.

com/aweb/math/. Accessed on Sep. 20.

Math fact cafe. http://www.mathfactcafe.com/. Accessed

Oct 4.

Arcademic Buiders http://www.arcademicskillbuilders.co

m/. Accessed Nov 6

E-learning Authoring System, www.elearningconsu

lting.com. Accessed Oct 16.

D. Chiu, 2005. Customization and Interoperability in

WME. Proceedings of the IEEE Southeast

Conference, IEEE, pp. 636-640.

P. Wang, M. Mikusa, S. Al-shomrani, X. Lai, X. Zou, D.

Zeller, 2006. WME: a Web-based Mathematics

Education System for Teaching and Learning. ICME

11 – TSG 22 Theme 3 the 11th International Congress

on Mathematical Education.

P. S. Wang, N. Kajler, Y. Zhou, and X. Zou, 2003. WME:

Towards a Web for Mathematics Education.

Proceedings of ISSAC, ACM Press, pp. 258-265.

P. S. Wang, M. Mikusa, S. Al-shomrani, D. Chiu, X. Lai,

and X. Zou., 2005. Features and Advantages of WME:

a Web-based Mathematics Education System,

Proceedings of the IEEE Southeast Conference, IEEE,

pp. 621-629.

CSEDU2012-4thInternationalConferenceonComputerSupportedEducation