こんにちは。TeXで、問題文中に空欄があるような問題を作り、それをインターネット上で公開し、空欄を埋める形で回答してもらい、それで入力された答えを集計し、採点する、ということをしたいと考えています。
問題のイメージとしては、私立大学の入試問題でよくある、穴埋め式のものをイメージして頂ければいいと思います。パソコンでそれを表示して、空欄部分に数字を入力する、というイメージで考えています。
最初にお伺いしたいのは、もしそのようなことが出来る簡単な方法があれば教えて頂きたいということです。
さて、色々調べて、以下のような方法が実現可能ではないかと思いました。
KaTeXというものを知りました。MathJaxの進化版で、HTMLファイルに、TeX形式で記述して、ウェブサイトで数式を表示できるというものです。それで、数式中にinput type="text"で入力フォームを作るというものです。しかし、数式中にこのように入力フォームを作ろうとすると、その部分の数式が数式として表示されずうまくいきません。数式の外で入力フォームを作ればいいじゃないかとお思いになると思いますが、例えば分数の形で分母と分子を空欄にしたいという場合など、やはり数式中に入力フォームを作らなければならないことになります。
数式中にhtmlを記述できるのか、ということについて色々調べましたが、求める情報が得られずにいます。もし私の希望とすることが可能であるならば、その方法をお教え頂きたいです。
以下に参考になるようなページをいくつか載せます。
https://teratail.com/questions/319883
https://katex.org/docs/supported.html
https://katex.org/docs/options.html
https://stackoverflow.com/questions/56715206/how-can-i-make-katex-work-with-html-elements-that-have-an-input-field
https://stackoverflow.com/questions/74961270/how-can-i-create-input-that-accepts-latex-syntax
https://stackoverflow.com/questions/53434571/how-to-add-css-style-to-katex-html
KaTeXについて造詣のある方、その他こうした分野にお詳しい方など、お知恵をくだされば幸いです。よろしくお願いいたします。
奥村先生のご回答 に似たアプローチと思いますが,Office 365をお使いであれば,Microsoft Formsを使うのが楽なように思います.
以下の記事が参考になると思います.
% KaTeXでの一からの構築は入力フォームからの入力を受け取る方法(データベースの用意)など,Moodle環境の構築以上に多様なスキルセットが必要に思います.Moodleはレンタルサーバ等によってはワンクリックでインストール可能だと思います.
分数ならCSSで書くことができますので、MathJax/KaTeXとハイブリッドで使えばできそうではあります。
次はGPT-4に書いてもらったものを若干修正したものです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equation in HTML and CSS</title>
<style>
.fraction {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.numerator {
display: block;
}
.denominator {
display: block;
border-top: 1px solid black;
}
.equals {
margin: 0 5px;
}
</style>
</head>
<body>
<i>A</i>
<span class="equals">=</span>
<span class="fraction">
<span class="numerator"><input name="num" size="5"></span>
<span class="denominator"><input name="denom" size="5"></span>
</span>
</body>
</html>
次はGPT-4に書いてもらったものを若干修正したものです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equation in HTML and CSS</title>
<style>
.fraction {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.numerator {
display: block;
}
.denominator {
display: block;
border-top: 1px solid black;
}
.equals {
margin: 0 5px;
}
</style>
</head>
<body>
<i>A</i>
<span class="equals">=</span>
<span class="fraction">
<span class="numerator"><input name="num" size="5"></span>
<span class="denominator"><input name="denom" size="5"></span>
</span>
</body>
</html>