Leveraging Web Components for Authoring Interactive Mathematics

Rudolf Hoffmann and Edgar Seemann

Furtwangen University, Germany

Keywords:

Mathematics, Interactivity, Authoring, e-Learning, Web Components.

Abstract:

Digital, interactive content can support active learning and provide both motivation and an automated feedback

to students. Unfortunately authoring interactive content remains a difﬁcult task for teachers. There are few

interoperable standards and e-learning platforms often restrict what is technically possible. Even if some teach-

ers create amazing interactive content it is challenging to publish and share this content with colleagues. This

paper proposes a way to leverage Web Components, a rather new technology supported by modern browsers, to

allow teachers to quickly author interactive exercises involving mathematical expressions and visualizations.

As Web Components are standardized they can be shared and embedded in any website. The proposed Web

Components for mathematics allow for: 1. A convenient visual input method for expressions and formulas,

2. A sophisticated validation system for these expressions in order to give immediate feedback to students on

their solutions.

1 INTRODUCTION

The ﬁeld of mathematics remains one of the most

challenging areas for e-learning and e-teaching.

While there is a body of products and research on

teaching tools (MapleSoft, 2014; Hastings et al.,

2015), content creation (Leathrum, 2010; Seemann,

2016; Melis et al., 2009), math typesetting (Aus-

brooks et al., 2014; Knuth, 1986; Kohlhase, 2003),

assessment tools (Perfect, 2015; Sandene et al., 2005;

Seemann, 2014; Joglar et al., 2013) and effects on

learning outcomes (Beal et al., 1998; Aleven et al.,

2006), the ﬁeld still lacks proper interoperable stan-

dards. This makes content creation and sharing cum-

bersome for teachers.

1.1 Content Creation

Firstly, it is a complex task to author interactive

math content. E-Learning platforms such as Moo-

dle, OpenOLAT etc. (Moodle, 2022; OpenOLAT,

2022) try to support teachers and offer possibilities

to create interactive exercises and tests. The types of

interactive exercises which can be implemented this

way, however, is very limited. The main functionality

of the leading e-learning platforms still seems to be

mostly centered around multiple choice questions or

questions with ﬁxed, unambiguous answers.

While displaying formulas and equations has got-

ten easier with modern libraries such as MathJaX or

KaTeX (MathJAX, 2022; KaTeX, 2022), the problem

of having students enter math expressions with frac-

tions, powers, roots etc. is in many cases impossible

or at least very cumbersome in these systems. There

is also only very limited support for validating math

expressions with all their equivalent representations.

Plugins such as STACK (STACK, 2021) try to remedy

this situation somewhat. The capabilities are, how-

ever, still far from what teachers would like to have.

Commercial publishers of e-learning content and

electronic books typically create interactive material

based on their own proprietary technologies. The re-

sults can be quite impressive. When teachers use this

content, they are often limited to a single provider

whose license the school acquired and it is mostly im-

possible to adapt, modify, build upon or improve the

interactive content in meaningful ways.

1.2 Content Sharing

The limited availability of free interactive content can

also be attributed to the difﬁculty of sharing and ex-

changing content with colleagues. Often the con-

tent is locked to a speciﬁc commercial or open-source

platform, which others may not have access to and

therefore cannot use. The QTI standard (1EdTech,

2016) allows sharing of simple exercises between e-

learning platforms via an XML based exchange for-

264

Hoffmann, R. and Seemann, E.

Leveraging Web Components for Authoring Interactive Mathematics.

DOI: 10.5220/0011946600003470

In Proceedings of the 15th Inter national Conference on Computer Supported Education (CSEDU 2023) - Volume 1, pages 264-271

ISBN: 978-989-758-641-5; ISSN: 2184-5026

 2023 by SCITEPRESS – Science and Technology Publications, Lda. Under CC license (CC BY-NC-ND 4.0)

mat. The author has to export the interactive cre-

ated content from his/her e-learning platform as a

ZIP archive containing the XML-based description.

Other teachers can then import this content in their e-

learning system given that both support the same QTI

standard and are sufﬁciently compatible. In practice,

this process is sufﬁciently difﬁcult for many teachers

to avoid going through this export and import process

and simply not share content.

1.3 Authoring for the Web

An alternative approach for interactive content is to

author content directly for the web instead of using e-

learning platforms. While this typically requires con-

tent authors to have a deeper technical knowledge, it

offers much more ﬂexibility. We can create a much

wider variety of types of experiences and above all,

it is easy to publicly publish web content and share it

with others.

In this paper we propose to leverage the power of

web components to simplify the process of content

creation and sharing for authors. Web components

allow us to extend the set of available HTML tags.

We can deﬁne math speciﬁc components which sup-

port content creation with math speciﬁc functionali-

ties. This allows authors to quickly and easily create

web-based interactive math experiences that can be

used and shared in any web site.

The goal is to show how authors can be provided

with web components which automatically integrate

the following interactive functionalities:

1. A visual input method, which allows the entry of

math expressions e.g. fractions, powers, roots,

vectors etc.

2. A way to integrate interactive input ﬁelds at any

position in a mathematic expression.

3. A sophisticated validation system, which allows

authors to deﬁne how user input should be tested

for correctness and to provide feedback to stu-

dents

To accomplish these goal we combine the tech-

nology of web components with a specialized math

library written in JavaScript. This math library pro-

vides authors with pre-built authoring functionalities.

2 WHAT ARE WEB

COMPONENTS?

Web components are a technology which allows de-

velopers to extend HTML with new, reusable and

sharable HTML-Tags. These tags can provide not

only a custom look, but also component speciﬁc func-

tionality. Before we dig deeper into this technology,

let us brieﬂy revisit how web pages and HTML tags

work.

Every web page consists of a set of (possibly

nested) HTML tags, which deﬁne the structure and,

at least to some extent, the appearance of the page.

For example:

<!doctype html>

<html>

<head>

</head>

<body>

<h1>An example HTML page</h1>

<label>How many corners has a

pentagon?</label>

</body>

</html>

There are e.g. tags for the headings on the

page (<h1>,<h2> etc.) and for user input (<input>).

Authors compose their content based on these ba-

sic tags, which are understood by every browser.

One can ﬁnd a list of all standardized HTML tags

at https://www.w3schools.com/TAGS. In order to

add interactivity or go beyond what is included within

these HTML tags, authors need to become program-

mers and learn JavaScript, the standard programming

language of the web. As a consequence, until now it

was impossible to create truly interactive math con-

tent for the web without being a programmer or re-

sorting to a specialized e-learning platform/authoring

tool.

In this paper we propose custom web compo-

nents for authoring interactive maths, which allow ev-

ery teacher who is able to write basic HTML to be-

come an author for interactive web content. Our math

web components provide additional HTML tags such

as <mwc-expr> and <mwc-viz>, which augment the

browser’s default capabilities.

Imagine the example of a teacher wanting to dis-

play a simple algebraic math exercise with fractions.

By using the newly available web components, he/she

can do so by writing the following short HTML snip-

pet with a LaTeX expression:

<mwc-expr>

display: "\frac{1}{2}+\frac{2}{3}=\ph{}",

solution: "\frac{7}{6}"

</mwc-expr>

The web component for the tag <mwc-expr> will

automatically take care of parsing and rendering ex-

Leveraging Web Components for Authoring Interactive Mathematics

265

pression correctly (see Figure 1). The \frac state-

ments will be rendered as a fraction and the \ph state-

ment, which stands for placeholder, will be rendered

as an interactive input ﬁeld. These input ﬁelds will be

automatically validated as their input changes. This

means, as soon as a student enters an answer he or she

will get an immediate feedback on his/her response.

This can be in the form of a coloring (red for incorrect

and green for correct) as well as text feedback. In or-

der to allow students to easily enter math expressions,

the web component also displays a virtual keyboard

at the bottom of the page. This virtual keyboard con-

tains special keys for fractions, powers, roots, vectors

etc.

Figure 1: A basic math exercise with fractions and an auto-

matically validated input ﬁeld.

Note that, while authors can write the HTML tags

directly there is also a graphical editor for the pro-

posed web components, which allows for a more con-

venient authoring experience. In the editor expres-

sions can be entered visually by the authors via the

virtual keyboard. Additionally, authors can specify

solutions for every placeholder alongside a method of

validation e.g. how many decimal places are required

or whether a fraction needs to be canceled. This au-

thoring tool then allows to save the resulting content

as a simple HTML page with the included custom

web components.

In this paper, we will mostly focus on the underly-

ing technology and ideas of the proposed web compo-

nents. We see this work as just the beginning and we

hope that other e-learning researchers and developers

will adopt a similar approach to provide teachers with

a wide range of web components to create rich, inter-

active learning experiences.

2.1 Implementation of Web

Components

Web components have been getting more and more

popular recently, with many web component libraries

such as Shoelace Components (Shoelace, 2022)

Figure 2: The graphical user interface allowing authors to

create interactive pages without the knowledge of HTML.

and Material Web Components (MaterialWeb, 2022)

readily available for web content authors. These ex-

isting component libraries focus on general web con-

tent and our goal here is to leverage this technology

speciﬁcally for interactive math content.

In order to implement our custom web component,

we need to extend a basic HTML-Tag with math-

speciﬁc functionality. This is accomplished by writ-

ing JavaScript code which inherits from the base class

”HTMLElement”:

class MathComponent extends HTMLElement {

constructor() {

super()

...

}

Additionally, we need to register this new class as

a custom element within the browser:

customElements

.define("mwc-expr", MathComponent)

In the above example <mwc-expr> will be the

name of the tag associated with the component. Note

that, tag names must contain a dash to avoid collisions

with already existing tags in the browser.

The constructor of the component is called when

the element is created. This happens e.g. when the

browser encounters the new tag <mwc-expr> in a

HTML page.

Let us look again at our example from section 2:

<mwc-expr>

display: "\frac{1}{2}+\frac{2}{3}=\ph{}",

solution: "\frac{7}{6}"

</mwc-expr>

In this case the constructor must ﬁrst parse what

is enclosed within the <mwc-expr> tag. This can be

accomplished by reading the element’s innerText

CSEDU 2023 - 15th International Conference on Computer Supported Education

266

property. Note that, the inner text in our case is actu-

ally in a JSON format and can be parsed with the the

browser’s JSON.parse function once we add curly

braces:

constructor() {

super()

this.data =

JSON.parse(‘{${this.innerText}}‘)

...

this.appendChild(renderedExpression)

this.onclick = ev => { ... }

this.onkeydown = ev => { ... }

}

Once parsed, the this.data variable contains all

the information necessary to render the component.

In the next steps we parse the LaTeX expressions in

data.display and data.solution. The ”display”

expression is rendered and appended to the element

by calling the appendChild function of the base class

HTMLElement. Finally, we register event listeners for

mouse clicks and keyboard events. This allows the

component to process user input and update the com-

ponent accordingly. That is e.g. ﬁlling in the response

that is typed as well as validating the solution auto-

matically on every key press.

Figure 3: A basic math exercise with fractions and an auto-

matically validated input ﬁeld.

Note that, LaTeX does of course not have a \ph

command. This has to be considered both when pars-

ing and rendering an expression. Also note, that we

deliberately did not discuss the usage of a shadow

DOM, as this is a technical detail, which is of minor

importance for our discussion on the advantages of

web components for authoring interactive exercises.

Finally, in order to to make a new web component

available on a web page we need to load its JavaScript

code in a <script> tag. We can, of course, bundle

multiple web components into a single .js ﬁle and load

them in a single step:

Now that we have some basic technical under-

standing of what web components do and how they

work, let us focus back on what makes interactive

maths particularly challenging. And let us see how

the proposed web components can help authors in cre-

ating interactive content. We consider mainly three

areas:

1. Math input: How to allow students to enter more

complex mathematical expressions.

2. Math validation: How to enable authors to spec-

ify how mathematical expressions should be vali-

dated.

3. Math visualizations: How can authors create in-

teractive math visualizations e.g. for function

graphs.

3 MATH INPUT

Math-based exercises often require students to com-

pute values, expressions or functions, which subse-

quently need to be entered into an input ﬁeld. Unfor-

tunately, there is no common standard on math input.

The default HTML input ﬁelds only support simple

text. While it is possible to create many expressions

as plain text using operators such as ˆ,*,+ etc., this is

neither intuitive nor is it clear what syntax to use for

roots, vectors, integrals etc.

Web components can implement their own way of

user input by reacting to browser events for the mouse

and keyboard. Moreover, as shown in the ﬁgures of

this paper previously, they can also implement a vir-

tual keyboard, which allows students to easily enter

more complicated math expressions such as fractions,

powers or roots with special keys on the virtual key-

board. These expressions are then rendered visually

without requiring students to learn some special syn-

tax. When pressing the fraction key on the virtual key-

board e.g. a fraction with empty boxes for numerator

and denominator appears, which can be subsequently

ﬁlled with the appropriate values either using the vir-

tual keyboard or a physical keyboard:

A virtual keyboard can provide special keys for

any kind of mathematical construct. Other common

examples are powers, roots and vectors. The virtual

keyboard may even adapt to the current exercise. E.g.

if the solution does not contain any powers, roots or

vectors an implementation of the web component may

choose not to display those keys on the virtual key-

board.

Virtual keyboards are a well known concept on

mobile devices where this type of input will feel very

natural. On more traditional laptop and desktop com-

puters the virtual keyboard acts as an extension of the

Leveraging Web Components for Authoring Interactive Mathematics

267

Figure 4: Entering a fraction by pressing the fraction key on

the virtual keyboard will produce a visual fraction display

with empty boxes for the numerator and denominator.

physical keyboard, which of course does not have spe-

cial keys for more sophisticated math expressions.

In summary, instead of being restricted to what a

standard HTML <input> element can do, a custom

web component can support a visual input method,

which allows an intuitive way of data entry in interac-

tive exercises.

4 MATH VALIDATION

Interactive exercises should be able to automatically

react to student responses and provide feedback on

their solution attempts. The ﬁrst step in this process

is to allow students to easily and intuitively enter math

expressions (see section 3). The next step is then to

analyze the student’s response and compare it with the

solution of the exercise.

At ﬁrst glance, this may seem to be a straight for-

ward and obvious task. But representations in math-

ematics are not unique and a feedback system should

understand any equivalent representation of the solu-

tion. This is true for numerical values such as 0.5 vs

vs.

, but even more for math functions such as

polynoms e.g. x

+ 2x + 4 vs 4 + 2x + x · x, exponen-

tials etc.

Depending on the circumstances authors may

want equivalent representations to be accepted as as

correct or incorrect. Let us e.g. consider the sim-

ple exercise

. The solution is

, but many stu-

dents might rather compute the numerically equiva-

lent expanded version

. An author may frame the

associated question in a way that requires students to

fully cancel their solution or allow expanded variants

depending on what educational goal he or she has in

mind. The same is true as to allowing decimals such

as 0.5 instead of fractions.

A validation system therefore has to give an author

the ﬂexibility to specify not only what the solution is,

but also what representations of the solution should

be accepted. For our web components we therefore

introduced the concept of so-called validators. A val-

idator is a JavaScript method which takes the solution

and a student response and computes, whether the re-

sponse is correct. Optionally it outputs a text-based

feedback or hint. For example:

function canceledFrac(solution, userInput)

{

if (solution.value!=userInput.value)

return { valid: false }

else if

(solution.numerator!=userInput.numerator)

return {

valid: false,

msg: "Fully cancel the fraction" }

...

else return { valid: true }

}

The above example validates a fraction and only

accepts the solution if is fully canceled. If it has the

correct value, but seems to be an expanded represen-

tation the validator returns a feedback message for the

student on what to do.

We bundle the proposed web components with a

math library containing a set of validators for authors

to use. These validators can be either speciﬁed in the

HTML tag or in the graphical editor (see Figure 2). In

order to use the above validator, we write:

<mwc-expr>

display: "\frac{1}{2}+\frac{2}{3}=\ph{}",

solution: "\frac{7}{6}",

validator: mwc.validators.canceledFrac

</mwc-expr>

If no validator is speciﬁed a matching default val-

idator is chosen based on the solution value. Available

validators include functionality for rounded numbers,

exact numbers with roots e.g. 2 +

√

3, fractions, poly-

noms e.g. x

+ 2x + 3, vectors etc.

4.1 Parameterized Validators

With JavaScript it is also easy to create validators

with parameters. Consider, for example, a validator

for decimals where the author wants to specify the

minimum number of decimal places a value should

have. In JavaScript this can be achieved by a so-

callled higher-order function, which returns a valida-

tor function based on the provided parameter. The

programmatic structure looks like this:

function decPlaces(count) {

return function(solution, userInput) {

roundedSol = solution.toFixed(count)

CSEDU 2023 - 15th International Conference on Computer Supported Education

268

... // further validation code

}

Using this paramterized validator for the author is

straightforward. This example would require a stu-

dent to enter the result as a decimal number with at

least 3 decimal places:

<mwc-expr>

display: "\frac{1}{2}+\frac{2}{3}=\ph{}",

solution: "\frac{7}{6}",

validator: mwc.validators.decPlaces(3)

</mwc-expr>

4.2 Multi-Input and Combi Validators

Math expressions may also contain multiple place-

holders for user input. In this case authors provide the

web components with a list of solutions and option-

ally a list of validators. Of course these lists have to

be in the same order as the placeholders appear in the

expression. For the fraction example used throughout

this paper, there would be a separate input ﬁeld for the

numerator and the denominator:

Figure 5: A math exercise with two separate user inputs.

In order to obtain this variant of the exercise we

modify the HTML tag in the following manner:

<mwc-expr>

display: "\frac{1}{2}+\frac{2}{3}

=\frac{\ph{}}{\ph{}}",

solution: ["7", "6"],

</mwc-expr>

Note that, in this case the two input ﬁelds act com-

pletely independent and we cannot e.g. give feedback

on whether the result is OK, but should be canceled.

A similar issue arises, when considering the two so-

lutions of a quadratic equation. It shouldn’t matter in

which order the two solutions are entered by the stu-

dent. But when the input ﬁelds are considered inde-

pendent each input has its ﬁxed solution, which can-

not be switched.

To overcome this issue in our web components,

we introduced the concept of combi validators. A

combi validator is responsible of validating multiple

input ﬁelds. This way it can consider the depen-

dencies between these input ﬁelds. In the case of

the quadratic equation it can therefore also detect in

which order the two solutions have been provided.

Using a combi validator is as easy as using a nor-

mal validator:

<mwc-expr>

display: "\frac{1}{2}+\frac{2}{3}

=\frac{\ph{}}{\ph{}}",

solution: ["7", "6"],

validator: mwc.validators.combiFrac

</mwc-expr>

4.3 Custom Validators

It is also possible for authors to create their own val-

idators by implementing a custom JavaScript func-

tion. Obviously this requires programming knowl-

edge. An example for a custom exercise speciﬁc val-

idator in the web component could look like this:

<mwc-expr>

display: "\frac{1}{2}+\frac{2}{3}=\ph{}",

solution: "\frac{7}{6}",

validator: (solution, userInput) =>

{

... // custom validation logic

return { valid: true }

}

</mwc-expr>

5 MATH VISUALIZATIONS

Next to web components for algebraic exercises, we

also propose a component for graphing and geome-

try. Our interactive graphing component can display

a paramterized function graph and allow students to

play with sliders to modify the parameters.

An author can use the associated <mwc-viz> tag

and provide a function term with parameters, as well

as intervals for the ranges of these parameters. As be-

fore, this information will be parsed by the web com-

ponent and an interactive graph is created oon the web

page automatically. The HTML code could e.g. be:

<mwc-viz>

func: "a*sin(b*x+c)",

a: "[1,4]",

b: "[0.1,5]"

c: "[-2,2]"

</mwc-viz>

Leveraging Web Components for Authoring Interactive Mathematics

269

The resulting component is displayed in the

browser as follows with the interactive sliders in the

upper right corner of the graph:

Figure 6: An interactive graphing component.

An alternative to such a web component is cer-

tainly the proprietary tool GeoGebra (GeoGebra,

2020), which allows the embedding of graphs in web

pages and has a much broader feature set. Web com-

ponents are, however, freely customizable and teach-

ers or organizations can self-host their web compo-

nents. Thus, not having issues with external servers,

licensing and data protection laws.

The goal of this paper is also to showcase the po-

tential of the technology rather than to claim that the

proposed web components are superior to all existing

e-learning tools.

6 CONCLUSION

In this paper we propose to use the technology of web

components to support teachers in creating interactive

math content. While authoring for the web has many

advantages as far as interoperability, publication and

sharing is concerned, it was so far quite involved and

authors mostly had to be programmers to create inter-

active experiences.

Web components as a technology can make con-

tent creation for teachers much easier by providing

math speciﬁc components which augment what stan-

dard HTML is capable of. We have shown different

use cases for web components for both algebraic ex-

ercises and math visualizations. We hope that more

e-learning developers and researchers adopt this tech-

nology and provide authors with amazing web com-

ponents to use.

The proposed web components of this paper are

currently used in a publicly funded project to create

a large database of randomized interactive math exer-

cises. The acknowledgements for this project will be

added after the double-blind review process.

REFERENCES

EdTech (2016). QTI 2.1 - 1EdTech Question and Test Inter-

operability.

Aleven, V., McLaren, B., Sewall, J., and Koedinger, K.

(2006). The cognitive tutor authoring tools (ctat): Pre-

liminary evaluation of efﬁciency gains. In ITS 2006.

Ausbrooks, R., Buswell, S., Carlisle, D., and

Chavchanidze, G. (2014). Mathematical markup

language (mathml) version 3.0 2nd edition.

http://www.w3.org/TR/MathML3.

Beal, C., Beck, J., and Woolf, B. (1998). Impact of intelli-

gent computer instruction on girls’ math self concept

and beliefs in the value of math. In Annual meeting of

the American Educational Research Association.

GeoGebra (2020). Geogebra - powerful math apps.

https://geogebra.org.

Hastings, C., Mischo, K., and Morrison, M. (2015). Hands-

on Start to Wolfram Mathematica and Programming

with the Wolfram Language. Wolfram Media Inc.

ISBN: 9781579550776.

Joglar, N., Risco, J. L., S

anchez, R., Colmenar, J. M., and

ıaz, A. (2013). Testing in Math courses a new tool

for online exams automatically graded: a teaching

and learning experience.

KaTeX (2022). Katex - the fastest math typesetting library

for the web. https://katex.org.

Knuth, D. E. (1986). Computers & Typesetting, Volume B:

TeX: The Program. Addison-Wesley.

Kohlhase, M. (2003). Toward openmath version 2. In Math-

ematics on the semantic web.

Leathrum, T. (2010). Math authoring for the web made

easier. In Convergence (Mathematical Association of

America).

MapleSoft (2014). E-Book: Clickable Calculus Study

Guide.

MaterialWeb (2022). Material web components catalog.

https://material-components.github.io/material-web.

MathJAX (2022). Mathjax - beautiful math in the browser.

https://mathjax.org.

Melis, E., Goguadze, G., Libbrecht, P., and Ullrich, C.

(2009). Activemath - a learning platform with seman-

tic web features. In Ontologies and Semantic Web for

e-Learning.

Moodle (2022). Moodle learning management system.

https://moodle.org.

OpenOLAT (2022). Openolat - online learning and training.

https://olat.org.

Perfect, C. (2015). A demonstration of numbas, an e-

assessment system for mathematical disciplines. In

Internationl Conference on Compupter Assisted As-

sessment.

Sandene, B., Bennett, R., Braswell, J., and Oranje, A.

(2005). Online Assessment in Mathematics.

CSEDU 2023 - 15th International Conference on Computer Supported Education

270

Seemann, E. (2014). Teaching mathematics in online

courses - an interactive feedback and assessment tool.

In International Conference on Computer Supported

Education.

Seemann, E. (2016). Mathauthor: Authoring interactive

math exercises for the web. In International Confer-

ence on Computer Supported Education.

Shoelace (2022). Shoelace - a forward-thinking library of

web components. https://shoelace.style.

STACK (2021). Stack - online assessment. https://stack-

assessment.org.

Leveraging Web Components for Authoring Interactive Mathematics

271