“examination.js”(初版)の改良版である”examination_v2.js”の公開を開始しました！
“ダウンロード固定ページ“より”テストキットv2″を選択してください。

“テストキット2″から”テストキットv2″に変更します(2020/12/06)

このjsファイルはWordPress用ではありません。

“examination_v2.js”の特徴は以下の通りです。

• 一問一答が可能に(従来の全問表示形式との切替可)
• 一問一答ではリストマーカー(リスト文頭の記号)の変更、誤答終了(誤答した時点で不合格)も利用可
• 解答欄○×表示(文頭)
• 正答が解答欄とは別表示に
• 採点結果がアラートから問題文の下に

ページ下にある見本を試していただくと分かるのですが、一問一答はただ小問を次々と送っていくだけではなく、大問の表示切替にも対応しています。今回のセールス？ポイントはそこにあると思っていて、実装に時間がかかったのもその部分でした。

このように機能が増えた一方、jsファイルを埋め込むhtmlファイルは処理の関係から”HTML5であること”が必須となりました(初版はHTML 4.01以降であれば動作します)。またそれに加えて以下の条件が追加されています。満たさない項目が1つでもあると動作しない可能性がありますのでご注意ください。(配布ファイル内の”カスタマイズの手引.txt”にも同じ内容を記載しています)

• 1つの解答欄(テキストボックスまたはセレクトボックス)を子要素に持つli要素1つ(以下、”解答欄を持つli要素”)を1問とすること
• 解答欄を持つli要素はform要素の孫要素(form > olまたはul > li)とすること
• 解答欄を持つli要素と解答欄がないli要素(問題文として表示)は別のolまたはul要素とすること(1つの要素内に混在してはならない)
• 変数dispIdと同じ値(初期値は”examination”)をid属性の値とした要素はform要素の最後の子要素とすること

なお、初版の配布ファイル内の”sample.html”はこれらの条件をすべて満たしているので、要素の子孫関係が変わらない限りはjsファイルを入れ替えるだけで使用可能です。

最後に、”テストキット2″に同梱の”sample.html”の内容を見本として掲載します。”採点”ボタンを押すと次の問題が表示され、最終問題を採点すると結果が出ます。

数字や英字、記号はすべて半角小文字で、それ以外は全角文字で記入してください。(1問10点、合格は100点満点中80点以上)

ある日、”‘地名生成ツール’が動かない”という連絡があり、手持ちのAndroidで確認してみました。すると、FirefoxとChromeでは正常に動作し、ブラウザではボタンが表示されないことが判明したのです。

表示されるはずのボタンがありません。

その後PCのIEで見ても、これと同じことが起こっていました。この原因を調べた結果、以下の記述に問題があることが分かりました。

function button(bool,msg,obj=document.form0.button1) {
  obj.disabled = bool;
  obj.value = msg;
}

一見何の問題もないように見えますが、1行目の

obj=document.form0.button1

という記述が引っかかっていたのです。これは、引数を変数に代入するもので、変数objにはボタンオブジェクトをあらかじめ代入し、参照できるようにするはずでした。これを、

function button(bool,msg) {
  var obj = document.form0.button1;
  obj.disabled = bool;
  obj.value = msg;
}

とすると、うそのように解消したのです。どうやらこの記述方法は、AndroidのブラウザやInternet Explorerでは動作しません。

原因の解明には苦戦しましたが、修正できたのでよしとしましょう！

“こーぐばこ”内の”地名生成ツール“を更新しました。変更点は以下の通りです。

• 処理速度の向上
• Twitter投稿用のボタンを設置
• 文字の追加や削除

順に説明します。

処理速度の向上

生成地名数を10、20、30個の中から選択できた時代から残っていた不要な関数の削除や、処理方法を変更することにより、処理速度が向上しました。performance.now()を使用して生成時間を比較した結果、更新後は更新前よりおよそ40%短縮されていることを確認しました。

Twitter投稿用のボタンを設置

需要は0だと思われますが、面白そうだったので追加しました。”ツイート”ボタンを押した後、30個の生成結果の中から1つだけをTwitterに投稿することができます。

漢字の追加や削除

地名としては使われないような文字を削除し、”久”や”那”などの地名としてはよくある文字を追加しました。また、漢字ではありませんが”ケ”や”ノ”も追加しています。

削除

央,絵,各,閣,孔,交,行,豪,参,桟,支,首,臨,楼,湾,圃,坦,堵,塙,壬,夷,奄,娃,嵩,帖,庇,柾,棲,檀,汀,祇,笈,荻,蓉,蔭,祁,鵬,鱗,黎

追加

久,光,植,泉,浅,荘,那,奈,内,氷,鳴,緑,呂,ケ,ノ

変更

穏->隠(“かくす”の字を間違えていました)

その他

狩(二重に記述されていたため一方を削除しました)

結果39文字を削除、15文字の追加により24文字減の695文字となっています。その他多数の字の読みを変更しています。
もしも”この字を入れてほしい!”、”これはいらない!”というのがありましたら、お気軽にどうぞ。

一部のブラウザで正常に動作しないことが判明したため、修正を行いました。詳細を見る>>(2016/08/21)

JavaScriptでテストを作成できる”examination.js”が完成し、“The Main Line”にて公開を開始しました。“ダウンロード固定ページ“より”テストキット”を選ぶとダウンロードが可能です。

2020年11月03日より、”examination_v2.js”の配布を開始しました。一問一答が可能となったほか、いくつか改良を加えています。ダウンロード固定ページより、”テストキットv2″をご選択ください。v2について詳細を見る>>(2020/12/06)

このファイルは、以前に”The Main Line”で公開されていた駅名検定コーナーで使用するために作成したもので、それを配布用に改修しています。”examination.js”は採点などのプログラムや解答、点数の定義が含まれており、問題を表示するHTMLファイルと合わせるとテストが出来上がります。

主な仕様は以下の通りです。

• 自動採点
• 合格基準を、点数(～点以上)または問題数(～問以上)に設定することが可能
• 解答表示
• Twitter投稿用のボタンを表示(非表示にすることも可能)
• 1つのグローバル変数”examination”を使用

こんな感じですかね。下の見本にもあるように、解答欄は入力(記述)と選択の2種類があり、選択肢を作らない分、前者のほうが作成は簡単です。

imgタグを使えば問題に画像を表示させることもできます。HTML5になり、inputタグではさまざまな種類の入力欄ができたので、新しいものを使うのも手ですね。

最後に、配布ファイルに同梱の”sample.html”の内容を見本として掲載します。”採点”ボタンを押すと結果が表示されます。

数字や英字、記号はすべて半角小文字で、それ以外は全角文字で記入してください。

サイトの新しいページをhttp://ichiso.net/tml/にアップロードした後、パソコンとスマートフォン(Android)で確認を行ったわけですが、ここでちょっと困ったことになってしまいました。まずはこちらをご覧ください。(すべてAndroidのスクリーンショットです)

この画像は、Firefoxでトップページを表示させたときのものです。ページ上端に4色の帯がありますが、これはSVGで作成した背景です。CSSのmarginによって、その帯かそれ以上の幅だけ文字を下げています。こうすれば、最初に表示したときに帯と文字が重ならなくなります。(スクロールすれば重なります)

では、ページの高さが変わればどうでしょう。ご覧の通り、帯の幅は変わりません。これは、ブラウザの画面の高さを100%とし、それに対する割合(ここでは5%)を帯の幅としたためです。どんなページを閲覧しようとも、ブラウザの画面の高さは変わらないので、この帯の幅も不変のはずです。

ところが、Google Chromeではそうはいきませんでした。

同じトップページです。ブラウザの画面の高さはFirefoxと変わらないにもかかわらず、帯の幅が大きくなっています。

ページが長くなると、帯がぐんと大きくなります。このことから、Google Chromeに関しては”ブラウザの画面の高さ”が100%になるのではなく、”ページの高さ”を100%として計算してしまっているということが分かります。

Chromeの表示では明らかに帯と文字が重なっていますが、現時点では単位を変更したり、背景の表示をやめたりするといったことは考えていません。Firefoxのほうが正しい表示だと思うので、どうにかChromeに修正がかかることを祈るだけです…

この前、とある用でファイルのアップロード用にページを作っていたのですが、どうしても送信できないという事態が起こりました。

<form enctype="multipart/form-data" action="index.php" method="post">
  <input type="hidden" name="MAX_FILE_SIZE" value="10000000">
  <p>アップロードするファイル : <input type="file" name="upload"></p>
  <p>ファイル名 : <input type="text" name="name"></p>
  <p><input type="submit" value="送信"></p>
</form>

簡単に書けばこんなコードですね。

このファイルは”index.php”として保存し、最初は順調にコーディングしていたわけですが、”送信”をクリックしても、何も起きないのです。最初は2行目の”MAX_FILE_SIZE”がおかしいのかと疑い直してみたものの、変化なし。

次に、もしかして<input type=”file”>のname属性に”upload”は使えないのか??と変な疑問が浮かび、変えてみるもやはり変わりません。

試しにprint_r( $_POST );と書いて結果を見ると、NULLに。

とうとう困り果て、一番上の行に目をやると、<form>のaction属性が”index.php”になっていることに気づき、”/”に変えたところ、思い通りに動作しました。

なぜ動作したかというと、このサイトでは例えば”http://example.net/index.php”でアクセスすると、”index.php”が省略されたURLに転送される仕様になっており、実際に見ているのは”http://example.net/”になります。action属性にあった”index.php”とは別のものとして扱っているらしく、動作しなかったらしいのです。

アップロードするページに”index.php”と名付けることはあまりないですが…