mathematical content

openmath is a static html site that uses vanilla js and css. Mathjax is used to render mathematical equations.

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 * 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 asciimath surrounded by backticks 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 id="proposition-1-divides-everything">
	<div class="proposition">
		<div class="title">1 divides everything</div>
		<div class="content">
			Suppose that `j in ZZ`, then `1 | j`
		</div>
	</div>

	<div class="proof">
		<div class="title"></div>
		<div class="content">
			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 * 1` thus we can say that `1 | j`
		</div>
	</div>
</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 data-href is an absolute path and the id of the element delimited with a # symbol. This was chosen because of the way the data-href in the javascript code.

Speaking of javascript, let's 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 data-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.

header

in preparePage the header is loaded in programatically using a fetch call, see setUpAndAddHeader