単語帳 – 院長室

いくつものファイルに対応できるよう、土日で変更を加えた単語帳だが、かなり使えそうなので、せっかくだからソースを公開しておく。
拝借してきたコード以外は、かなり甘めのソースになっているので、辛口の方はお気に召さないかも知れないが、とにかく食べられることは間違いない。

ファイル構造は　words.html　と同じ場所の　jsフォルダ　に　init.js 、body.js　、 words.js を入れるだけ。
サーバーがあればスマホで使えるけど、ローカルでも充分便利かもしれない。

なお以下のサイトのコードを利用させてもらった。盆暮れの付け届けでもしようかと考えたが、あらためて考えるとネット社会ではそういう風習はなかったことに気づき、とりあえず謝辞だけ述べさせていただくことにした。

JavaScript内から外部JavaScriptを読み込む方法
コピペで使える　超シンプル単語帳

————————- init.js

function appendScript(URL) {
var el = document.createElement(‘script’);
el.src = URL;
document.body.appendChild(el);
};

function wordsSelect(){

var choiceJS = document.getElementById(‘wordsJS’);
var words = choiceJS.value;

var wordsNames = words.split(“.”);
var wordsName = wordsNames[0]; //js/words_A_a

　appendScript(words);
　appendScript(“js/body.js”);

var wordsName = wordsName.slice(3);
var choice = document.getElementById( “choiceWords” ) ;
choice.textContent = wordsName;

};

————————- body.js

var words_max = (words.length)/2 – 1;
var q_counter = -1;
var qa_flag = false;
var qa_lang = false;
var eng = 0;
var jpn =1;

function switch_jn(){
if ( q_counter < 0 ) { q_counter = words_max; } if ( q_counter > words_max) { q_counter = 0; }

if ( qa_lang ) {
document.getElementById(‘jn_q’).value = ‘英語：’;
document.getElementById(‘jn_a’).value = ‘日本語：’;

jpn = 1;
eng = 0;

} else {
document.getElementById(‘jn_q’).value = ‘日本語：’;
document.getElementById(‘jn_a’).value = ‘英語：’;

jpn = 0;
eng = 1;
}
qa_lang = !(qa_lang);
qa_view();
}

function qa_view(){

if (jpn ==1){

document.getElementById(‘one_q’).value = words[2*q_counter ];

if ( qa_flag ) {
document.getElementById(‘one_a’).value = ”;
} else {
document.getElementById(‘one_a’).value = words[2*q_counter + 1];

}
}

if (eng ==1){

document.getElementById(‘one_q’).value = words[2*q_counter + 1];

if ( qa_flag ) {
document.getElementById(‘one_a’).value = ”;
} else {
document.getElementById(‘one_a’).value = words[2*q_counter];

}
}
}

function counter_view(){
document.getElementById(‘q_cnt’).value = q_counter + 1 + ‘/’ + (words_max + 1);
}

———————– html(全角になっているので半角に変換)

＜！ＤＯＣＴＹＰＥ　ｈｔｍｌ＞
＜ｈｔｍｌ　ｌａｎｇ＝”ｊａ”＞
＜ｈｅａｄ＞
＜ｍｅｔａ　ｃｈａｒｓｅｔ＝”ｕｔｆ－８”＞
＜ｔｉｔｌｅ＞単語帳＜／ｔｉｔｌｅ＞
　　　＜ｓｃｒｉｐｔ　ｔｙｐｅ＝’ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ’　ｓｒｃ＝’ｊｓ／ｉｎｉｔ．ｊｓ’＞＜／ｓｃｒｉｐｔ＞
＜／ｈｅａｄ＞

＜ｂｏｄｙ＞
＜ｃｅｎｔｅｒ＞
　　　　＜ｓｅｌｅｃｔ　ｉｄ＝”ｗｏｒｄｓＪＳ”＞
　　　　　　　　＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝”ｊｓ／＠＠＠Ａ．ｊｓ”＞ｓａｍｐｌｅＡ＜／ｏｐｔｉｏｎ＞
　　　　　　　　＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝”ｊｓ／＠＠＠Ｂ．ｊｓ”＞ｓａｍｐｌｅＢ＜／ｏｐｔｉｏｎ＞
　　　　＜／ｓｅｌｅｃｔ＞

＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｂｕｔｔｏｎ”　ｖａｌｕｅ＝”ｗｏｒｄｓ”　ｉｄ　＝　”ｗｏｒｄｓＳｅｌｅｃｔＩＤ”　ｏｎＣｌｉｃｋ＝”ｗｏｒｄｓＳｅｌｅｃｔ（）”／＞
＜／ｃｅｎｔｅｒ＞

＜ａ　ｉｄ＝”ｃｈｏｉｃｅＷｏｒｄｓ”＞ｗｏｒｄｓ＜／ａ＞

＜ｓｃｒｉｐｔ＞
ｗｉｎｄｏｗ．ｏｎｌｏａｄ　＝　ｆｕｎｃｔｉｏｎ　（）　｛

ｃｏｕｎｔｅｒ＿ｖｉｅｗ（）；
ｃｏｕｎｔｅｒ＿ｖｉｅｗ２（）；
｝；
＜／ｓｃｒｉｐｔ＞

＜ｓｔｙｌｅ＞
＃ｑ＿ｃｎｔ，　＃ｊｎ＿ｑ，　＃ｊｎ＿ａ　｛
ｂｏｒｄｅｒ：　ｎｏｎｅ；
ｔｅｘｔ－ａｌｉｇｎ：　ｒｉｇｈｔ；
｝
＃ｑ＿ｃｎｔ，　＃ｊｎ＿ｑ，　＃ｊｎ＿ａ，　＃ｏｎｅ＿ｑ，　＃ｏｎｅ＿ａ　｛
ｆｏｎｔ－ｓｉｚｅ：　２４ｐｘ；
｝
＜／ｓｔｙｌｅ＞
　
＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｔｅｘｔ”　ｒｅａｄｏｎｌｙ＝”ｒｅａｄｏｎｌｙ”　ｓｉｚｅ＝”３”　　ｖａｌｕｅ＝””　ｉｄ＝”ｑ＿ｃｎｔ”＞＜ｂｒ＞
＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｔｅｘｔ”　ｒｅａｄｏｎｌｙ＝”ｒｅａｄｏｎｌｙ”　ｓｉｚｅ＝”６”　　ｖａｌｕｅ＝”英語：”　ｉｄ＝”ｊｎ＿ｑ”　＞
＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｔｅｘｔ”　ｒｅａｄｏｎｌｙ＝”ｒｅａｄｏｎｌｙ”　ｓｉｚｅ＝”２０”　ｖａｌｕｅ＝””　ｉｄ＝”ｏｎｅ＿ｑ”＞＜ｂｒ＞
［＜ａ　ｈｒｅｆ＝”ｊａｖａｓｃｒｉｐｔ：ｖｏｉｄ（０）；”　ｏｎＣｌｉｃｋ＝”ｓｗｉｔｃｈ＿ｊｎ（）；”＞　↑↓　＜／ａ＞］＜ｂｒ＞
＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｔｅｘｔ”　ｒｅａｄｏｎｌｙ＝”ｒｅａｄｏｎｌｙ”　ｓｉｚｅ＝”６”　　ｖａｌｕｅ＝”日本語：”　ｉｄ＝”ｊｎ＿ａ”　＞
＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｔｅｘｔ”　ｒｅａｄｏｎｌｙ＝”ｒｅａｄｏｎｌｙ”　ｓｉｚｅ＝”２０”　ｖａｌｕｅ＝””　ｉｄ＝”ｏｎｅ＿ａ”＞＜ｂｒ＞
＜ｂｒ＞
［＜ａ　ｈｒｅｆ＝”ｊａｖａｓｃｒｉｐｔ：ｖｏｉｄ（０）；”　ｏｎＣｌｉｃｋ＝”ｐｒｅｖ＿ｂｔｎ（）；”＞　←　＜／ａ＞］［＜ａ　ｈｒｅｆ＝”ｊａｖａｓｃｒｉｐｔ：ｖｏｉｄ（０）；”　ｏｎＣｌｉｃｋ＝”ｎｅｘｔ＿ｂｔｎ（）；”＞　→　＜／ａ＞］＜ｂｒ＞

＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞

———————-html にある　＠＠＠A.js

words = [
‘data1′,’data2′,’data3′,’data4’
]

—————————————–