HTMLで簡単な数学の小テストを作る（紙・1段組・1枚物）

少し前であるが、Wordの旧式数式プラグインが突然削除されて話題になった。TeXを使っている私からすると、旧式の数式エディタプラグインがどうなろうと関係ない。

授業でWordの数式エディタの存在を教えるときも新式エディタで教えているので何も問題ない。なお、新型エディタはwordと一体化しているため、Alt+Shift+=のショートカットなども使えて便利である。

私の近傍でも数式エディタプラグイン削除の余波

しかし、私と関係ない半径3m以内ではプラグイン削除の影響があったらしい。業務機で数学のテストが作れないという騒ぎが発生したのである。別に他にもやり方があるだろうにね・・・

ただ、一企業の気分で業務が振り回されるのは困る。そこで、どんなマシンであろうと絶対にインストールされているであろうWebブラウザを使って業務ができるようにしておけば良いのではないか？と感じた。Microsoftの気分よりオープンなHTMLのほうが、こういう事件はおこりにくいはずである。

なお、完全に以下はネタである。

1段組・1枚もののテスト

複雑なものは気が向いたら考えていくとして、今回は小テストレベルのプリントの作成を考える。次のようなテストを考える。

f:id:baruku07:20180211155251p:plain

以下がソースである。

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
@page{size:A4;margin:15mm 15mm;}
.yokool{display:flex;justify-content:space-between;flex-wrap:wrap;height:14cm;}
.namaeran{margin-left:auto;width:8cm;border-bottom:solid 1pt;}
.item3 {width:30%;}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [ ['$','$'], ['\\(','\\)'] ],
    processEscapes: true
  }
});
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
<body>
<div class="namaeran">
&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;組&nbsp&nbsp;&nbsp&nbsp;番&nbsp;氏名
</div>
<h3>方程式小テスト</h3>
1. 次の方程式を解け
<ol class="yokool">
   <li class="item3">$3x+2=5$</li>
   <li class="item3">$4x+8=15$</lI>
   <li class="item3">$2x-3=5x-6$</li>
   <li class="item3">$0.4x+5=0.1$</li>
   <li class="item3">$\dfrac{1}{2}x+3=4$</lI>
   <li class="item3">$x^2=10$</li>
   <li class="item3">$2x^2+1=5$</li>
   <li class="item3">$x^2+4x+3=0$</lI>
   <li class="item3">$2x^2+3x+5=0$</li>
</ol>

2. 2次方程式$x^2+ax+5=0$の実数解の個数が2個になるような$a$の範囲を求めよ。

</body>

MacのChromeのみで動作を確認している。Safariでは微妙にうまくいかない。IEではそのうち確認する。以下、いくつかポイントを解説しておく。（class名の命名ルールが美しくないのは許してほしい。）

@pageでA4のサイズと余白を設定

プリント用のCSSを使う。なお、bodyにもA4の幅を設定しておかないとプレビューが合わないという問題はある。それはまた後日考える。

複数ページ対応も何かあるらしい。これも次回以降の課題とする。

数式はMathjaxで書く

数式はMathjaxを使う。標準的な解決策で、特に言及することもない。

氏名記入欄はdivでブロックを作って右寄せ

TeXやWordの感覚で、spanでテキストを修飾すると良いと思っていた。特に、氏名の後の欄は、nbspを並べると個数が多すぎるのでCSS側で幅を確保したい。しかし、spanは基本は幅を持てない。そのため、長い空白の幅を作るという目的には使いにくい。代わりにdivに幅を設定して、右に寄せることが問題を解決した。

flexboxで横並び・番号付き箇条書き

この方法を学んだのが今回の収穫である。最初、display:table;やinline-blockで横に要素を並べれば良い、と思っていた。しかし、このようにすると、箇条書きの番号が消える。どうやら有名な問題らしい。

"display:flex;"を使えば、この問題は解決した。ただし、上のソースを見てわかるように、TeXほど気軽には書けていない。まあ我慢するしかない。

単一行の場合は、"justify-content:space-between;"のみの記述で済むので、かなり簡単である。

しかし、複数行の場合はli側に幅を指定してやらないとならない。class="item3"は3段を想定していて、30%に幅を設定している。あとは、余白を適当に親要素の"justify-content:space-between"に調整してもらうという方針である。1行のカラム数が指定できると良いのだが・・・・

箇条書き番号は、大問番号と重ならないように(1)などとするべきである。この点も、面倒なので後日の課題とする。

Wordの箇条書きは私には使いにくい（余談）

Wordで私がプリントを作成したくない理由の人つに、箇条書きが気軽に使えない（特に横並び）ことがある。順番の入れ替えや余白の調整がTeXほど気軽にできないことにいらいらするのである。「絶対に修正しない」という人であればWordでも問題ないのであろう。しかし、私は頻繁に修正をする人なのでそうはいかない。

自分にとってはHTMLで色々できると大きい（余談）

ネタといいつつ、実は自分にとってはHTMLで仕事が片付くかは大きな問題である。もし、プライベートのPCでなく、業務機で絶対に教材を作れと言われるとTeXが使えないからである。

絶対にレイアウトを厳密にコントロールしないとならないもの（テスト）などは、ちゃんとした環境で作らないとどうしようもない。しかし、簡単なものぐらいは業務機で作れた方が良いに決まっているのである。

このブログで、emathを抜きで色々できる方法を考えて行っているのも、この問題意識がある。できるだけTeX Liveの標準環境で作業できるようにしておきたいのである。クラウド環境（overleaf）とかTeXライブをDVDマウントして教材を作ることなどなども想定をしている。

そのリテラシーはどうなの？（余談）

冒頭のお方、Wordの旧式の数式エディタを使っていて（若いのになぜ？と言いたいが）、かつ、それしか使い方がわからない（そのリテラシーで大丈夫？）のはどうかと思う。

特に、簡単な代替手段は存在するのに慌てるのはいかがなものかと。そもそも、新型の数式エディタ（もう新型というには随分たったが）に切り替えれば良い。新規で作成する文章はそれで問題ない。また、StudyAidは使える環境なので、StudyAidを使えば済むだけである。

何であれ、若いのだから学習したほうがね・・・