分数の入力ができない

　算数のWeb教材を作成したとき、整数と小数はキーボードから入力できるが、「分数は入力できない」という問題にぶつかりました。このような場合には、「選択肢を用意する」という方法で対処を行うのが普通です。でも、小学生のプリント問題で、分数でしか回答できない場合に「選択肢から選ぶ」というのは、あまりに不自然な感じがします。そこで「分数を入力する」ために、数学用ソフトウェアキーボードをJavaScriptで作ってみました。
　分数に加えて、「ルート √　累乗 2³　パイ π」も入力できるようにして、中学校数学のWeb教材に対応するソフトウェアキーボードの作成を目標としました。

サンプルサイト

　今回のサンプルサイトはこちらです。
http://iwate-manabi-net.sakura.ne.jp/math_software_keyboard/

　ソフトウェアキーボードを利用した教材サンプルはこちらです。
http://www1.iwate-ed.jp/tantou/joho/material/g-tablet-m/index.html

MathJax を使って数式を表示

　数式の表示にはMathJaxをJavaScriptライブラリとして利用しました。
https://www.mathjax.org/
　最新版のMathJax3が公開になっていますが、今回は古いバージョンを使用します。WARNINGが表示されますが、気にせず使っていきましょう。
　使い方についてはこちらのページを参照願います。
http://www.eng.niigata-u.ac.jp/~nomoto/download/mathjax.pdf

HTMLソース

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="math_software_keyboard.js"></script>
<link rel="stylesheet" href="math_software_keyboard.css">
<title>数学用ソフトウェアキーボード</title>
</head>
<body>
<h1>数学用ソフトウェアキーボード</h1><br>
<div id="setumei">
１　次の計算をしなさい。<br>
　　　　※　例：　<span class='siki'>\(2\sqrt{3}\)</span>　の入力→　「２」「ルート」「３」
</div><br>
<div style='float:left'>
(1)　　<span class='siki'>\(3\sqrt{5}+6\sqrt{5}\)</span><br>
　　　<span id='buttonShow1' class='buttonShowClass'>クリックして答えを入力</span>
答　　<span id='kotae1' class='siki'><font size='3'></font></span>
　　<span id='maru1' class='maru'>○</span>
</div>
　　　　<div id='kaisetu1' class='kaisetu'></div>
<div style='clear: both'></div>
<div id='inputButton1'></div><br><br>
</body>
</html>

CSSソース

math_software_keyboard.css

/* math_software_keyboard.css */
# setumei{
	font-weight: bold;
	color: #060;
}

.buttonShowClass{
	background-color: #cff;
	padding: 10px 10px 10px 10px;
	border-radius:4px;
	border:1px solid #bbd;
	box-shadow:2px 2px 2px 2px rgba(200, 200, 200, 0.4);
	margin: 0px 5px;
	cursor:pointer;
}

.waku{
	user-select: none; /* CSS3 単語を選択させない */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
	-ms-user-select: none; /* IE10かららしい */
	-webkit-tap-highlight-color:#fff;
	background-color: #eef;
	padding: 10px 5px 5px 5px;
	border-radius:4px;
	border:1px solid #888;
	box-shadow:2px 2px 2px 2px rgba(200, 200, 200, 0.4);
	margin: 0px 5px;
	width:800px;
}

.bs{
	user-select: none; /* CSS3 単語を選択させない */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
	-ms-user-select: none; /* IE10かららしい */
	-webkit-tap-highlight-color:#fff;
	background-color: #ccf;
	padding: 10px 10px 10px 10px;
	border-radius:4px;
	border:1px solid #999;
	box-shadow:2px 2px 2px 2px rgba(200, 200, 200, 0.6);
	margin: 0px 5px;
	cursor:pointer;
	font-weight:bold;
}

.bc{
	user-select: none; /* CSS3 単語を選択させない */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
	-ms-user-select: none; /* IE10かららしい */
	-webkit-tap-highlight-color:#fff;
	background-color: #ffa;
	padding: 10px 5px 10px 5px;
	border-radius:4px;
	border:1px solid #aaa;
	box-shadow:2px 2px 2px 2px rgba(200, 200, 200, 0.6);
	margin: 0px 5px;
	cursor:pointer;
}
.maru{
	user-select: none; /* CSS3 単語を選択させない */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
	-ms-user-select: none; /* IE10かららしい */
	-webkit-tap-highlight-color:#fff;
	vertical-align: middle;
	color: red;
	opacity:0;
	font-size: 500%;
}
.siki{
	font-size: 130%;
}

.kaisetu{
	user-select: none; /* CSS3 単語を選択させない */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
	-ms-user-select: none; /* IE10かららしい */
	-webkit-tap-highlight-color:#fff;
	color: blue;
	font-size: 120%;
}

JavaScriptソース

math_software_keyboard.js

var mondaiMax= 1;  // 問題数
var kaitouNumber=0;
var kaitouText = new Array();
var buttonText = new Array();
for(var i=0; i<= mondaiMax ; i++){           //問題数
	buttonText[i] = [];
	for(var j=0; j<20; j++){
		buttonText[i][j] = '';
	}
}
var buttonCheckText ="";
var buttonMax  = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; // 初期値 0
var kaisetuText = "";

//    入力用のボタン表示
var bData ="";
	bData = bData + "<div id='inputNow' class='waku'><br>";
	//bData = bData + "<br>";
	bData = bData + "<span id='bbb' class='bs'>分母入力</span><span id='bbe' class='bs'>分数おわり</span>";
	bData = bData + "<span id='brs' class='bs'>ルート</span><span id='bre' class='bs'>ルートおわり</span>";
	bData = bData + "<span id='bpi' class='bs'>π</span><span id='bpw' class='bs'>累乗</span>";
	bData = bData + "<span id='bpm' class='bs'>±</span>";
	bData = bData + "　<span id='bal' class='bc'>すべて消す</span><br><br><br>";
	bData = bData + "<span id='bt' class='bs'>＋</span><span id='bh' class='bs'>－</span><span id='bk' class='bs'>×</span>";
	bData = bData + "<span id='bw' class='bs'>÷</span><span id='bi' class='bs'>＝</span>";
	bData = bData + "<span id='bks' class='bs'>（</span><span id='bke' class='bs'>）</span>";
	bData = bData + "<span id='ma' class='bs'>ａ</span><span id='mb' class='bs'>ｂ</span><span id='mc' class='bs'>ｃ</span>";
	// bData = bData + "<span id='md' class='bs'>d</span>";
	bData = bData + "<span id='mx' class='bs'>χ</span><span id='my' class='bs'>ｙ</span><span id='mz' class='bs'>ｚ</span>";
	bData = bData + "<span id='bba' class='bc'>←１つもどる</span><br><br><br>";
	bData = bData + "<span id='b1' class='bs'>１</span><span id='b2' class='bs'>２</span><span id='b3' class='bs'>３</span>";
	bData = bData + "<span id='b4' class='bs'>４</span><span id='b5' class='bs'>５</span><span id='b6' class='bs'>６</span>";
	bData = bData + "<span id='b7' class='bs'>７</span><span id='b8' class='bs'>８</span><span id='b9' class='bs'>９</span>";
	bData = bData + "<span id='b0' class='bs'>０</span><span id='bd' class='bs'>．</span>";
	bData = bData + "<span id='bhide' class='bc'>閉じる</span>　<span id='bcheck' class='bc'>解答する</span><br><br><br>";
	bData = bData + "</div>";

$(function() {  // jQuery を実行	
	$('#inputButton1').hide();  // キーボードの表示を消しておく
	
	$('#buttonShow1').on('click', function () {
		funcButtonHide();
		kaitouNumber = 1;                              // 問題番号
		$('#inputButton' +kaitouNumber).html(bData);   // キーボードの表示
		$('#inputButton' +kaitouNumber).show('normal');// アニメーション表示
		buttonReload();                                // ボタンを作動させる
		$('#buttonShow' +kaitouNumber).hide();         //「クリックして答えを入力」ボタンを隠す
	});

	function funcKaitou(){
		switch (kaitouNumber){
			case 1:  //問題番号1 の場合
				// 計算式の表示
				kaisetuText =                   '　\\(3\\sqrt{5}+6\\sqrt{5}\\)　';
				kaisetuText = kaisetuText+      '=\\((3+6)\\sqrt{5}\\)　';
				kaisetuText = kaisetuText+      '=\\(9\\sqrt{5}\\)<br>';
				$('#kaisetu' + kaitouNumber).html(kaisetuText);
				// 答え合わせ
				if((kaitouText[kaitouNumber] == '\\({9}\\sqrt{5}\\)')  //9ルート5
				 ||(kaitouText[kaitouNumber] == '\\({9}\\sqrt{5}\\)\\({}\\)')){ //9ルート5 ルートおわり
					$('#maru' + kaitouNumber ).css('opacity',1);  //正解の場合
				}else{
					funcBatu();  //不正解の場合
				}
				break;
		};
		MathJax.Hub.Queue(["Typeset",MathJax.Hub,('kaisetu' + kaitouNumber)]);  //数式を表示
		$('#buttonShow'+ kaitouNumber ).hide();         //キーボード表示ボタンを消します
		$('#inputNow').remove();
		$('#inputNow').html("<div id='inputButton" + kaitouNumber + "'></div>");
		$('#inputButton' + kaitouNumber).hide();
		$(('#buttonShow'+ kaitouNumber)).remove();
		
	};
	
	function funcBatu(){       //  不正解の場合、バッテンを表示
		$('#maru' + kaitouNumber).text('×');
		$('#maru' + kaitouNumber).css('opacity',1);
		$('#maru' + kaitouNumber).css('color','blue');
	};
	
	function funcButtonHide() {         //キーボードを消す
		$('#inputNow').remove();
		$('#inputNow').html("<div id='inputButton" + kaitouNumber + "'></div>");
		$('#inputButton' + kaitouNumber).hide();
		$(('#buttonShow'+ kaitouNumber)).show();
	}

	function buttonReload(){ // 	数学用ソフトウェアキーボードが押されたとき
		$('#b1' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="1"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b2' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="2"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b3' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="3"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b4' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="4"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b5' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="5"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b6' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="6"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b7' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="7"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b8' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="8"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b9' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="9"; buttonMax[kaitouNumber]++ ; display(); });
		$('#b0' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="0"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bd' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="."; buttonMax[kaitouNumber]++ ; display(); });
		$('#ma' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="a"; buttonMax[kaitouNumber]++ ; display(); });
		$('#mb' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="b"; buttonMax[kaitouNumber]++ ; display(); });
		$('#mc' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="c"; buttonMax[kaitouNumber]++ ; display(); });
		$('#md' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="d"; buttonMax[kaitouNumber]++ ; display(); });
		$('#mx' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="x"; buttonMax[kaitouNumber]++ ; display(); });
		$('#my' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="y"; buttonMax[kaitouNumber]++ ; display(); });
		$('#mz' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="z"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bt' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="＋"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bh' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="－"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bk' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="×"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bw' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="÷"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bi' ).on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="＝"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bks').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="（"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bke').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="）"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bpi').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="π"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bpm').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="±"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bbb').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="分母入力"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bbe').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="分数おわり"; buttonMax[kaitouNumber]++ ; display(); });
		$('#brs').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="ルートはじめ"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bre').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="ルートおわり"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bpw').on('click', function () { buttonText[kaitouNumber][buttonMax[kaitouNumber]]="累乗"; buttonMax[kaitouNumber]++ ; display(); });
		$('#bba').on('click', function () { buttonMax[kaitouNumber]-- ; if( buttonMax[kaitouNumber] <0 ){ buttonMax[kaitouNumber] =0 }display(); });
		$('#bal').on('click', function () { buttonMax[kaitouNumber] =0; display(); });
		$('#bhide').on('click', function () {funcButtonHide();});
		$('#bcheck').on('click', function () {funcKaitou();});
	};
	buttonReload();    //  ボタンを使えるようにする
	
	function display() {
		buttonCheckText ="";
		var myText="\\({";           //\を表示するには２回\\
		for ( var k=0; k <buttonMax[kaitouNumber] ;k++){
			switch (buttonText[kaitouNumber][k]){
				case "1": myText = myText + "1" ;break;
				case "2": myText = myText + "2" ;break;
				case "3": myText = myText + "3" ;break;
				case "4": myText = myText + "4" ;break;
				case "5": myText = myText + "5" ;break;
				case "6": myText = myText + "6" ;break;
				case "7": myText = myText + "7" ;break;
				case "8": myText = myText + "8" ;break;
				case "9": myText = myText + "9" ;break;
				case "0": myText = myText + "0" ;break;
				case ".": myText = myText + "." ;break;
				case "a": myText = myText + "a" ;break;
				case "b": myText = myText + "b" ;break;
				case "c": myText = myText + "c" ;break;
				case "d": myText = myText + "d" ;break;
				case "x": myText = myText + "x" ;break;
				case "y": myText = myText + "y" ;break;
				case "z": myText = myText + "z" ;break;
				case "＋": myText = myText + "+" ;break;
				case "－": myText = myText + "-" ;break;
				case "×": myText = myText + "×" ;break;
				case "÷": myText = myText + "÷" ;break;
				case "＝": myText = myText + "=" ;break;
				case "（": myText = myText + "(" ;break;
				case "）": myText = myText + ")" ;break;
				case "π": myText = myText + "\\pi" ;break;
				case "±": myText = myText + "\\pm" ;break;
				case "分母入力": myText = myText + "}\\over{" ;break;
				case "分数おわり": myText = myText + "}\\)\\({" ;break;
				case "ルートはじめ": myText = myText + "}\\sqrt{" ;break;
				case "ルートおわり": myText = myText + "}\\)\\({" ;break;
				case "累乗": myText = myText + "\^" ;break;
			};
			buttonCheckText = buttonCheckText +buttonText[kaitouNumber][k];
		};
		if(buttonMax[kaitouNumber] > 0){
			if(buttonText[kaitouNumber][buttonMax[kaitouNumber] -1] == "累乗"){    //累乗入力の時に表示が変になるを防ぐ
				myText = myText + "□";
			};
		};
		myText = myText + "}\\)";
		//MathJax表示
		$(("#kotae" + kaitouNumber)).html(myText);
		MathJax.Hub.Queue(["Typeset",MathJax.Hub,("kotae" + kaitouNumber)]);
		kaitouText[kaitouNumber]= myText;
	};
	 $('body').bind('updated',function(){display()});
});

非表示にしたいボタン（キー）があるときには、
// 入力用のボタン表示
の下の部分で
// bData = bData + ＜span id='brs' class='bs'＞ルート・・・
　↑このように//を使ってコメントアウトすると、「ルート」ボタンが非表示になります。