見出し画像

MathMLの中にHTMLを埋め込んでみる

たかむ

あるとき、SNS上で『MathMLで数式のユーザーインターフェイスが作れるんではないか。入力を受け取ることはできないか。』という趣旨の意見を見つけました。

このことは、MathMLコアの仕様書(筆者による日本語訳)にある"2.2.1 HTMLとSVG"で紹介されているコードを使えば解決できるのではと思ったのですが、実際に試したことがありません。MathMLはブラウザによって実装状況がまちまちなので、環境によっては動かないこともあります。これは試してみなくてはと思いました。

そこで、次のコードを記載して、いくつかのブラウザで試してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Yoshikazu Takamura">
  <link rel="stylesheet" type="text/css" href="manual.css">
  <title>穴埋め問題(MathMLにHTMLを埋め込んだ例)</title>
<script>
function load(){
  var input_ans;
  input_ans = document.getElementById("ans");
  input_ans.value = '';
  input_ans.style.backgroundColor = '#ff0000';
}
function input_change(){
  var input_ans, anser;
  input_ans = document.getElementById("ans");
  anser = input_ans.value;
  if(anser==5){
    input_ans.style.backgroundColor = '#ffffff';
    alert("正解!!");
  }else{
    input_ans.style.backgroundColor = '#ff0000';
  }
}
</script>
</head>
<body onload="load();">
  <div class="header">
  <a href="../index.html">トップへ</a><br>
  <a href="index.html">MathMLトップへ</a></div>
  <hr>
  <h1>穴埋め問題(MathMLにHTMLを埋め込んだ例)</h1>
  <p>下記の□の中を埋めて下さい:<br>
  <math>
    <msqrt>
      <mn>2</mn>
      <mo>&times;</mo>
      <mtext><input id="ans" onchange="input_change();" size="2" type="text"></mtext>
      <mo>−</mo>
      <mn>1</mn>
    </msqrt>
    <mo>=</mo>
    <mn>3</mn>
  </math></p>
  <p>このページは, <a href="http://takamu.sakura.ne.jp/mathml-core-ja/index.html#html-and-svg">MathMLコアに記載されている例</a>を基に, MathMLにHTMLを埋め込んでします.</p>
  <hr>
  <div class="footer">
  公開日:2023年8月17日 / 最終更新日:2023年8月17日
  </div>
</body>
</html>

このコードを実装したページが"穴埋め問題(MathMLにHTMLを埋め込んだ例)"になります。

入力欄のテキストボックスに正しい答えを入力すると"正解!!"とポップアップで表示されます。また、間違った答えを入力するとテキストボックスが赤く塗り潰されて表示されます。

Windows版のChromeとFirefox、iPhone版のSafariで動作を確認しています。実際にコードを書いて動かし見るのは面白いですね。

この記事が気に入ったらサポートをしてみませんか？