Rendering Mathematics

$\newenvironment {prompt}{}{} \newcommand {\ungraded }[0]{}$

How Ximera renders Math Content

Mechanism of Rendering

Ximera uses MathJax to render all of its mathematics online. This comes with a number of useful consequences, as well as being the (current) industry-standard rendering method. Basically, if you have seen well rendered mathematics online almost anywhere, it was probably MathJax.

Any Necessary Content

There is nothing that the content author needs to do to make this rendering work - other than put whatever you want rendered via MathJax into a mathmode environment (i.e. put what you want rendered as math, inside a math LaTeX setting in your LaTeX code).

Quirks of Rendering

There are a number of quirks from this process, most of which are inherent to MathJax itself. If you have a weird quirk or unexpected behavior that isn’t listed here, you may want to see if it is a MathJax issue broadly.

That being said, here are the known issues for rendering:

There are issues with variables like “textwidth” versus “pagewidth” used in LaTeX. For online rendering, these variables are all basically made to be the width of the browser window (more or less - there are some very technical details here). This can make it difficult to horizontally align things with any subtlety.
Related to the above, align and table environments behave in a slightly unexpected way - see the relevant segment on this specific issue.
unknown node type: parser error message. This appears sometimes rather than the actual rendered mathematics. This is due to a corruption in the cookies/cache for the browser, and the person seeing this error need to clear their cache and then reload the page to resolve the problem.

Accessibility

MathJax has extensive accessibility features built in, which means Ximera benefits from the developers keeping this up-to-date and conforming to industry standard. In essence, you don’t need to worry about accessibility features for rendered math content - with the exception of graphs.

Due to how graphs are rendered, they currently don’t have any accessibility features (e.g. alt-text) if you provide them via TikZ or other LaTeX means. You can input them as image files instead, however those also lack any accessibility support. This is something to keep in mind, as you may need to provide textual description explicitly for things like screenreaders to provide more accessibility for graphs and/or images.

Potential Problems and Pitfalls

Revealed Answers

One of the downsides of the accessibility features of MathJax, is that the content of answer boxes are visible via a right-click menu - meaning students can easily look up answers for answer boxes. There are ways to work around this, see the “hiding answers” segment for more about this.

Any Best Practices or Advice

Visual Differences

It is worth keeping in mind that, unlike a pdf - where the difference is subtle enough to often be overlooked - due to how MathJax renders content on the page for Ximera, the difference between a text variable and a math variable tend to be very visually distinct. For this reason, it’s best to try and be very consistent with whether you put variable references in math-mode or not. In particular, consider the rendering between: “since x is a variable...” and “since $x$ is a variable...”. In a pdf, you can easily miss the visual difference, but online it is distinct enough that students might think they are referencing different elements - especially if you didn’t tell them it was a variable.

2024-06-24 13:19:56

Press...	...to do
left/right arrows	Move cursor
shift+left/right arrows	Select region
ctrl+a	Select all
ctrl+x/c/v	Cut/copy/paste
ctrl+z/y	Undo/redo
ctrl+left/right	Add entry to list or column to matrix
shift+ctrl+left/right	Add copy of current entry/column to to list/matrix
ctrl+up/down	Add row to matrix
shift+ctrl+up/down	Add copy of current row to matrix
ctrl+backspace	Delete current entry in list or column in matrix
ctrl+shift+backspace	Delete current row in matrix

Type...	...to get
norm	$\|\|\blue{[?]}\|\|$
text	$\text{\blue{[?]}}$
sym_name	$\backslash\texttt{\blue{[?]}}$
abs	$\left\|\blue{[?]}\right\|$
sqrt	$\sqrt{\blue{[?]}}$
paren	$\left(\blue{[?]}\right)$
floor	$\lfloor \blue{[?]} \rfloor$
factorial	$\blue{[?]}!$
exp	${\blue{[?]}}^{\blue{[?]}}$
sub	${\blue{[?]}}_{\blue{[?]}}$
frac	$\dfrac{\blue{[?]}}{\blue{[?]}}$
int	$\displaystyle\int{\blue{[?]}}d\blue{[?]}$
defi	$\displaystyle\int_{\blue{[?]}}^{\blue{[?]}}\blue{[?]}d\blue{[?]}$
deriv	$\displaystyle\frac{d}{d\blue{[?]}}\blue{[?]}$
sum	$\displaystyle\sum_{\blue{[?]}}^{\blue{[?]}}\blue{[?]}$
prod	$\displaystyle\prod_{\blue{[?]}}^{\blue{[?]}}\blue{[?]}$
root	$\sqrt[\blue{[?]}]{\blue{[?]}}$
vec	$\left\langle \blue{[?]} \right\rangle$
mat	$\left(\begin{matrix} \blue{[?]} \end{matrix}\right)$
*	$\cdot$
infinity	$\infty$
arcsin	$\arcsin\left(\blue{[?]}\right)$
arccos	$\arccos\left(\blue{[?]}\right)$
arctan	$\arctan\left(\blue{[?]}\right)$
sin	$\sin\left(\blue{[?]}\right)$
cos	$\cos\left(\blue{[?]}\right)$
tan	$\tan\left(\blue{[?]}\right)$
sec	$\sec\left(\blue{[?]}\right)$
csc	$\csc\left(\blue{[?]}\right)$
cot	$\cot\left(\blue{[?]}\right)$
log	$\log\left(\blue{[?]}\right)$
ln	$\ln\left(\blue{[?]}\right)$
alpha	$\alpha$
beta	$\beta$
gamma	$\gamma$
delta	$\delta$
epsilon	$\epsilon$
zeta	$\zeta$
eta	$\eta$
theta	$\theta$
iota	$\iota$
kappa	$\kappa$
lambda	$\lambda$
mu	$\mu$
nu	$\nu$
xi	$\xi$
omicron	$\omicron$
pi	$\pi$
rho	$\rho$
sigma	$\sigma$
tau	$\tau$
upsilon	$\upsilon$
phi	$\phi$
chi	$\chi$
psi	$\psi$
omega	$\omega$
Gamma	$\Gamma$
Delta	$\Delta$
Theta	$\Theta$
Lambda	$\Lambda$
Xi	$\Xi$
Pi	$\Pi$
Sigma	$\Sigma$
Phi	$\Phi$
Psi	$\Psi$
Omega	$\Omega$