这是一个简单的练习，旨在验证你是否理解了 MathML 子树与其可视化呈现之间的关系。该文档包含一个 MathML 公式，你需要标记所有与该 MathML 公式中的子树相对应的子树。完成后，你可以查看 MathML 公式的源代码，以验证它是否符合你的预期。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>带数学字符的页面</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>
</p>
<ol id="options">
<li>
<input type="checkbox" data-comment="验证 mfrac 中子元素的顺序！">
一个将 mroot 作为第一个子元素，将 msqrt 作为第二个子元素的 mfrac。
</li>
<li>
<input type="checkbox" data-highlight="mroot2" data-comment="5 的七分之六次方根。">
一个将 mn 作为第一个子元素，将 mfrac 作为第二个子元素的 mroot。
</li>
<li>
<input type="checkbox" data-comment="该公式不包含任何带有分数的平方根！">
一个包含 mfrac 元素的 msqrt。
</li>
<li>
<input type="checkbox" data-comment="2 的平方根。" data-highlight="msqrt1">
一个具有一个 mn 子元素的 msqrt。
</li>
<li>
<input type="checkbox" data-comment="验证 mroot 中子元素的顺序！">
一个将 mfrac 作为第一个子元素，将 mn 作为第二个子元素的 mroot。
</li>
<li>
<input type="checkbox" data-comment="“8 减 9”的平方根。" data-highlight="msqrt2">
一个具有以下子元素列表的 msqrt：mn、mo、mn。
</li>
<li>
<input type="checkbox" data-comment="2 的平方根除以 4 的立方根。" data-highlight="mfrac1">
一个将 msqrt 作为第一个子元素，将 mroot 作为第二个子元素的 mfrac。
</li>
<li>
<input type="checkbox" data-comment="mfrac 必须恰好有两个子元素！">
一个具有以下子元素列表的 mfrac：msqrt、mn、msqrt。
</li>
<li>
<input type="checkbox" data-comment="mroot 必须恰好有两个子元素！">
一个具有一个 mn 子元素的 mroot。
</li>
<li>
<input type="checkbox" data-comment="6 除以 7。" data-highlight="mfrac2">
一个具有两个 mn 子元素的 mfrac。
</li>
<li>
<input type="checkbox" data-comment="该公式不包含超过两个数字的平方根！">
一个具有五个 mn 子元素的 msqrt。
</li>
<li>
<input type="checkbox" data-highlight="mroot1" data-comment="4 的立方根。">
一个具有两个 mn 子元素的 mroot。
</li>
</ol>
<p>
<strong id="comment"></strong>
</p>
<p>
<strong id="status"></strong>
</p>
</body>
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 ? "恭喜，你选中了所有正确选项！" : "";
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => {
verifyOption(checkbox);
});
});
