The purpose of this page is to help users get more comfortable with how openmath works before, as an intermediary between using the site and working with the source code.
openmath is a static html site that uses vanilla js and css, we use a few external libraries for graphics and formatting mathematical content.
Some of the strong pull factors for openmath are that it's incredibly simple, it is a static site that contains mathematical content, while at the same time having the strength of a database by being able to refer to other content located in other files without being a dynamic site.
We manage to do this by lazily using fetch requests in unison with document.getElementById calls, which indirectly induces a type of filesystem database.
For example suppose that we have a knowledge link on A.html pointing to some knowledge located at B.html#definition-somedef, then we fetch the html from B.html, parse it into a document, then use document.getElementById("definition-somedef") on that document, and inject the resulting element back into A.html and then re-run MathJax on that element.
We keep the cost of this operation low, by keeping our knowledge files small, which is also nice for the user as they're not overwhelmed with information
let's look at the basic form of a definition, for example division
<div class="definition" id="definition-divides">
<div class="title">divides</div>
<div class="content">
an integer \( n \) is divisible by a non-zero integer \( m \) if there exists an integer \( k \) such that \( n = k \cdot m \). If this is all true we write \( m | n \).
</div>
</div>
Breaking it down, we can see that there is a title, the content, mathematical equations written in latex (and parsed by MathJax) and the outer div is given a special id.
Each of the classes used here are defined in /styles/style.css and gives it styling (similar to beamer)
Now let's look at a more complicated example
<div class="proposition" id="proposition-1-divides-everything">
<div class="title">1 divides everything</div>
<div class="content">
Suppose that \( j \in \mathbb{Z} \), then \( 1 | j \)
</div>
<div class="proof">
In the <span class="knowledge-link" data-href="/number_theory/number_theory.html#definition-divides">definition of divides</span>
take \( k = j \), then we can see that \( j = j \cdot 1 \) thus we can say that \( 1 | j \)
</div>
As you can see we've packaged both the statement and the proof into a div with it's own id. In the proof, we have something new: the knowledge link.
A knowledge link is what allows for recursive learning, and is used when we are referencing a piece of information such as a definition, or proved statement, so that the reader knows how we deduce that the next statement is true via this knowledge.
Notice that the form of the href is an absolute path and the id of the element delimited with a # symbol. This is actually a regular URL, nothing fancy here.
The most relevant entry point will be, to take a look at /js/script.js which contains all the main logic, specificially let's take a look at the function setUpKnowledgeLink. Feel free to open this code in your editor of choice.
In this function the main steps are to use the href to fetch the relevant section of html from the respective webpage, and paste it after the knowledge link when it is clicked.
From this point onward, you can explore the preparePage function which is main function call used on every page. Besides the css for a page that is all the code that runs.
in preparePage the header is loaded in programatically using a fetch call, see setUpAndAddHeader.