這是一個簡單的練習，用於驗證您是否理解了 MathML 子樹與其視覺渲染之間的關係。該文件包含一個 MathML 公式，您必須檢查該 MathML 公式中子樹的所有對應子樹。完成後，您可以檢查 MathML 公式的原始碼，並驗證它是否符合您的預期。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My page with math characters</title>
<link
rel="stylesheet"
href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
</head>
<body>
<p>
<math>
<mfrac id="mfrac1">
<msqrt id="msqrt1">
<mn>2</mn>
</msqrt>
<mroot id="mroot1">
<mn>4</mn>
<mn>3</mn>
</mroot>
</mfrac>
<mo>+</mo>
<mroot id="mroot2">
<mn>5</mn>
<mfrac id="mfrac2">
<mn>6</mn>
<mn>7</mn>
</mfrac>
</mroot>
<mo>+</mo>
<msqrt id="msqrt2">
<mn>8</mn>
<mo>−</mo>
<mn>9</mn>
</msqrt>
</math>
</p>
<ol id="options">
<li>
<input
type="checkbox"
data-comment="Verify the order of children in an mfrac!" />
An mfrac with an mroot as its first child and an msqrt as its second
child.
</li>
<li>
<input
type="checkbox"
data-highlight="mroot2"
data-comment="The '6 over 7'-th root of five." />
An mroot with an mn as its first child and mfrac as its second child.
</li>
<li>
<input
type="checkbox"
data-comment="This formula does not contain any fraction inside a square root!" />
An msqrt containing an mfrac element.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of two."
data-highlight="msqrt1" />
An msqrt with one mn child.
</li>
<li>
<input
type="checkbox"
data-comment="Verify the order of children in an mroot!" />
An mroot with an mfrac as its first child and mn as its second child.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of 'eight minus nine'."
data-highlight="msqrt2" />
An msqrt with the following list of children: mn, mo, mn.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of two over the cubic root of four."
data-highlight="mfrac1" />
An mfrac with an msqrt as its first child and an mroot as its second
child.
</li>
<li>
<input
type="checkbox"
data-comment="mfrac must have exactly two children!" />
An mfrac with the following list of children: msqrt, mn, msqrt.
</li>
<li>
<input
type="checkbox"
data-comment="mroot must have exactly two children!" />
An mroot with one mn child.
</li>
<li>
<input
type="checkbox"
data-comment="The fraction six over seven."
data-highlight="mfrac2" />
An mfrac with two mn children.
</li>
<li>
<input
type="checkbox"
data-comment="This formula does not contain any square root with more than two numbers!" />
An msqrt with five mn children.
</li>
<li>
<input
type="checkbox"
data-highlight="mroot1"
data-comment="The cubic root of four." />
An mroot with two mn children.
</li>
</ol>
<p>
<strong id="comment"></strong>
</p>
<p>
<strong id="status"></strong>
</p>
</body>
</html>
math {
font-family:
Latin Modern Math,
STIX Two Math;
font-size: 200%;
}
math .highlight {
background: pink;
}
math [id] .highlight {
background: lightblue;
}
p {
padding: 0.5em;
}
const options = document.getElementById("options");
const comment = document.getElementById("comment");
const checkboxes = Array.from(options.getElementsByTagName("input"));
const status = document.getElementById("status");
function verifyOption(checkbox) {
let mathml = checkbox.dataset.highlight;
if (mathml) {
mathml = document.getElementById(mathml);
}
if (checkbox.checked) {
comment.textContent = checkbox.dataset.comment;
if (mathml) {
mathml.classList.add("highlight");
} else {
checkbox.checked = false;
}
} else {
comment.textContent = "";
if (mathml) {
mathml.classList.remove("highlight");
}
}
const finished = checkboxes.every(
(checkbox) => !!checkbox.checked === !!checkbox.dataset.highlight,
);
status.textContent = finished
? "Congratulations, you checked all the correct answers!"
: "";
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => {
verifyOption(checkbox);
});
});
