我想使用 HTML (MathML) 和 MathJax 制作练习表。练习表上会填满数字，输入的数字可以通过答案键检索和检查。我的问题是，当我使用 MathJax 时，我的代码无法检索输入（没有 MathJax 也能正常工作）。有解决办法吗？
这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math Quiz</title>
<script type="text/javascript" async src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
window.MathJax = {
tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }
};
</script>
<style>
.input {
width: 20px;
text-align: center;
font-family: Arial, sans-serif;
}
.red {
background-color: darkred;
}
</style>
</head>
<body>
<math display="block" class="tml-display" style="display:block math;">
<mrow>
<msubsup>
<mo movablelimits="false">∫</mo>
<mn>2</mn>
<mn>3</mn>
</msubsup>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<mfrac>
<mn><semantics>
<annotation-xml encoding="application/xhtml+xml">
<input xmlns="http://www.w3.org/1999/xhtml" type="text" maxlength="2" class="input" size="1" data-answer="19" value="" autocomplete="off" />
</annotation-xml></semantics></mn>
<mn><semantics>
<annotation-xml encoding="application/xhtml+xml">
<input xmlns="http://www.w3.org/1999/xhtml" type="text" maxlength="1" class="input" size="1" data-answer="3" value="" autocomplete="off" />
</annotation-xml></semantics></mn>
</mfrac>
</mrow>
</math>
<br>
<button id="checkButton" style="margin-top: 10px;">Check Answers</button>
<div id="resultMessage" style="margin-top: 10px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
function checkAnswer(element) {
const inputValue = element.value.replace(/[^0-9-]/g, '');
const correctAnswer = element.dataset.answer;
console.log('Input Value:', inputValue);
console.log('Correct Answer:', correctAnswer);
const isCorrect = inputValue === correctAnswer;
element.style.backgroundColor = '';
if (!isCorrect) {
element.style.backgroundColor = 'red';
}
return isCorrect;
}
function checkAllAnswers() {
const inputFields = document.querySelectorAll('input[data-answer]');
let allCorrect = true;
inputFields.forEach(function (element) {
if (!checkAnswer(element)) {
allCorrect = false;
}
});
const resultMessage = document.getElementById('resultMessage');
resultMessage.textContent = allCorrect
? 'All answers are correct!'
: 'Some answers are incorrect. Please try again.';
}
document.getElementById('checkButton').addEventListener('click', function () {
checkAllAnswers();
}
)});
</script>
</body>
</html>
当我输入正确答案并单击“检查答案”按钮时，它应该返回“所有答案都正确！”，但事实并非如此。
注意：我是一个完全的编程初学者，我才刚刚开始学习。
问题在于 MathJax v3.2.2 插入了隐藏的 MathML，用于屏幕阅读器等辅助技术。这意味着您在可见排版数学中拥有输入字段的一个副本，在隐藏的assisitve-MathML 中拥有另一份副本。学生只能在第一组中输入答案，因此第二组将被您的代码标记为不正确，因此并非所有答案都是正确的。
一种解决方案是使用包含以下内容的配置关闭辅助 MathML：
MathJax = {
options: {
enableAssistiveMml: false
}
};
尽管您的阅读可以在 MathJax 上下文菜单中再次打开它。或者，您可以让代码忽略辅助 MathML 中的副本（例如，通过检查父元素来检查它们是否位于 n
<annotation-xml>
节点中）。这可能更安全。