E.W.工作部屋：『 My 英単語帳』 Ver.1.17

My 英単語帳 Ver.1.17

学習日記や英単語メモなどブログを英語学習に利用している人向けの、
javascriptを使ったランダム表示英単語カードブログパーツ
『 My 英単語帳』の過去バージョンです。（右サイドにあるのが設置例）

下のスクリプトをブログのフリースペースにコピペして
ソース内の指定の場所に単語を入力するだけでＯＫ。
ただ、管理のしやすさから言うと、
一旦、メモ帳か何かのエディタに貼り付けて、
そこで単語入力＆管理をすることをおすすめします。

テキストエリア上で右クリック→すべて選択、
もしくは、テキストエリアをクリックして [Ctrl]+[A] キーで全選択。

<!-- 【 My 英単語帳 】by おさんぽ英語 -->

<div align="center">
<script type="text/javascript">
<!--
var wcRN,wA,wB,All,Rand,Temp,wno=0;
wA=[];wB=[];
wcRN=0;wA[wcRN]="";wB[wcRN]="";

// 単語入力エリア

wcRN++;
wA[wcRN]="☆";
wB[wcRN]="★";

// ここまで

All=wA.length;
for (var i=1;i<All;i++) {
	Rand= Math.floor(Math.random()*(All-1))+1; 
	Temp = wA[i];
	wA[i] = wA[Rand];
	wA[Rand] = Temp;
	Temp = wB[i];
	wB[i] = wB[Rand];
	wB[Rand] = Temp;
}
function funcdisp(req){
	if (req=='p') {
	if(wno==All-1){ wno=0; }
	document.dispform.disparea.value = wA[wno+1];
	wno++;
	}
	if(req=='a'){
	if(wno==0){
	document.dispform.disparea.value = wB[All-1];
	}else{
	document.dispform.disparea.value = wB[wno];
	}
	}
}

// 画面表示スタイル設定：
document.write('<form name="dispform">【 My 英単語帳 】<textarea style="font-family: Verdana,Osaka,sans-serif; font-size: 20px; font-weight: normal; width: 95%; line-height: 1.1em; text-align: center; padding: 6px; color: #fff; background-color: #292; border: 1px outset #fff; border-bottom: 10px solid #CC9900;" rows="3" name="disparea" wrap="hard">'+wA[All-1]+'<'+'/textarea><'+'/form>');

// -->
</script>
<!-- ボタン表示: value=""の中身で表示文字を変更できます。 -->
<input style="font-size:14px; margin: 3px;" type="button" value="答えを見る" onclick="funcdisp('a')" ondblclick="funcdisp('a')">
<input style="font-size:12px; margin: 3px;" type="button" value="Next⇒" onclick="funcdisp('p')" ondblclick="funcdisp('p')"><br>
<a href="https://osanpo-english.com/" target="_blank" style="font-size: 10px; text-decoration: none;">by おさんぽ英語</a><br>
</div>
<!-- 【 My 英単語帳 】ここまで -->

<!-- 補足説明（必要なければ削除してください。）

単語入力方法：
下の３行をコピペで、”単語入力エリア”に貼り付け、
☆のところに表示したい文字を、★に答えの文字を入れてください。

wcRN++;
wA[wcRN]="☆";
wB[wcRN]="★";

表示タイトルを変更したいときは ”画面表示スタイル：”以下の
 【 My 英単語帳 】のところを好きな文字に変えてください。
（ ' 半角クオーテーションを入れたいときは \' で。＊下記注意参照）
文字サイズ・色・背景・幅などは textarea タグ内の style 属性をいじれば変更できます。（ちょっとだけHTML知識が必要。）


使用上の注意：
・このスクリプトはＩＥ６で、動作確認しています。
　危険などはまったくないはずですが、
　スクリプトの使用は自己責任でお願いします。
・文字列の途中で改行しないでください。
・ひとつの画面内にこのプログラムを複数設置しないでください。
・単語文字列の中に " （半角ダブルクオーテーション）が入っていると
　エラーで表示されなくなります。　" を表示したい場合は \" と、
　ダブルクオーテーションの前に \ （半角エンマーク？）をつけてください。
・タイトルを変更される場合、文字列の中に
	' （半角クオーテーション）が入っているとエラーになります。
　　' を表示したい場合は \' と、
　クオーテーションの前に \ （半角エンマーク？）をつけてください。

作成：
おさんぽ英語
https://osanpo-english.com/
-->

単語入力方法の説明：

単語登録はいたって簡単。
ソース内の”// 単語入力エリア”以下にある３行

wcRN++;
wA[wcRN]="☆";
wB[wcRN]="★";

の、☆のところに表示したい文字を、★に答えの文字を入れれば
ひとつ登録完了。あとはコピペでそれを繰り返すだけです。
（コピペの際は３行ひとまとめで扱ってください。）

入力例：

wcRN++;
wA[wcRN]="shrug off";
wB[wcRN]="～を一笑に付す";
wcRN++;
wA[wcRN]="culprit";
wB[wcRN]="犯人，容疑者";
wcRN++;
wA[wcRN]="ordeal";
wB[wcRN]="試練";

使用上の注意：
・入力文字列の中に " （半角ダブルクオーテーション）が入っていると
　エラーで表示されなくなります。　" を表示したい場合は ¥" と、
　クオーテーションの前に ¥（半角エンマーク）をつけてください。
・文字列の途中で改行しないでください。
・ひとつの画面内にこのプログラムを複数設置しないでください。
・自動改行が入る設定になっているブログ記事内などでは、
　自動改行しないように設定してお使いください。

このスクリプトはＩＥ６で、動作確認しています。
危険などはまったくないはずですが、使用は自己責任でお願いします。
スタイルのカスタマイズは自由です。（こちらも自己責任で）
使用条件等も特にありません。（再配布は禁止。）
ソースに入っている当サイトへのリンク表示タグは
目障りなら削除していただいてもかまいません。（出来ればそのまま･･･）