クリックすると次々と単語が表示されるだけのシンプルな単語帳が欲しいと思い、作ってみました。


・JavaScriptの記述が許可されているブログであれば、コピペするだけで動作するはずです。
・単語帳の“骨格部分”だけのシンプルなプログラムなので、見栄えの調整は各自行ってください。
・個人利用・商用問わず、改造してご自由にお使いください。

・プログラム内に書かれている単語がランダムで表示されます。
・一通り全部表示したら、ふたたび同じ順番で表示されます。

少々ぎこちない点
・[問題]が表示されていて[回答]が空欄の状態のとき、「前に戻るボタン」をクリックすると、まずは[回答]が表示され、再びクリックすると１つ前の問題を表示します。
・１問目が表示されていない状態（初期状態）では、言語の入れ替えボタンは動作しません。




[ ↑↓ ]


[ もどる ] [ つぎ ]

・サンプルでは２次元配列に11単語ぶん記述してありますが、どんどん追加していきましょう。
・全体のレイアウトや、テキスト欄（<input type="text"…>）のスタイルシートは各自調整してあげてください。

<script>
var words = [
	['日本語0', '日本語1', '日本語2', '日本語3', '日本語4', '日本語5', '日本語6', '日本語7', '日本語8', '日本語9', '日本語10' ],
	['ENGLISH0',  'ENGLISH1',  'ENGLISH2', 'ENGLISH3', 'ENGLISH4', 'ENGLISH5', 'ENGLISH6', 'ENGLISH7', 'ENGLISH8', 'ENGLISH9', 'ENGLISH10' ]
];
var array = [0,1,2,3,4,5,6,7,8,9,10];	//単語を１つ増やしたら、ここも１つ増やす。
for (var i = array.length - 1; i >= 0; i--){
	var rand = Math.floor( Math.random() * ( i + 1 ) );
	[array[i], array[rand]] = [array[rand], array[i]]
}

var q_counter = -1;
var qa_flag = false;
var qa_lang = false;
var q_lang = 0;
var a_lang = 1;

window.onload = function () {
	counter_view();
};

function switch_jn(){
	if ( q_counter < 0 ) { return false; }
	if ( qa_lang ) {
		document.getElementById('jn_q').value = '日本語：';
		document.getElementById('jn_a').value = '英語：';
		q_lang = "0";
		a_lang = "1";
	} else {
		document.getElementById('jn_q').value = '英語：';
		document.getElementById('jn_a').value = '日本語：';
		q_lang = "1";
		a_lang = "0";
	}
	qa_lang = !(qa_lang);
	qa_view();
}

function prev_btn(){
	if (!(qa_flag)) { q_counter--; }
	if ( q_counter < 0 ) { q_counter = words[0].length - 1; }
	qa_flag = !(qa_flag);
	counter_view();
	qa_view();
}

function next_btn(){
	if ( !(qa_flag) ) { q_counter++; }
	if ( q_counter >= words[0].length ) { q_counter = 0; }
	qa_flag = !(qa_flag);
	counter_view();
	qa_view();
}

function qa_view(){
	document.getElementById('one_q').value = words[q_lang][array[q_counter]];
	if ( qa_flag ) {
		document.getElementById('one_a').value = '';
	} else {
		document.getElementById('one_a').value = words[a_lang][array[q_counter]];
	}
}

function counter_view(){
	document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
}
</script>

<style>
#q_cnt, #jn_q, #jn_a {
	border: none;
	text-align: right;
}
#q_cnt, #jn_q, #jn_a, #one_q, #one_a {
	font-size: 24px;
}
</style>

<input type="text" readonly="readonly" size="3"  value="" id="q_cnt"><br>
<input type="text" readonly="readonly" size="6"  value="日本語：" id="jn_q" >
<input type="text" readonly="readonly" size="20" value="" id="one_q"><br>
[<a href="javascript:void(0);" onClick="switch_jn();"> ↑↓ </a>]<br>
<input type="text" readonly="readonly" size="6"  value="英語：" id="jn_a" >
<input type="text" readonly="readonly" size="20" value="" id="one_a"><br>
<br>
[<a href="javascript:void(0);" onClick="prev_btn();"> もどる </a>]	[<a href="javascript:void(0);" onClick="next_btn();"> つぎ </a>]<br>

参考：JavaScript アルゴリズムで配列をシャッフルする(Qiita)