JavaScriptでテストを作る

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

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

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

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

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

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

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

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

1 : 入力方式(1問6点x5=30点)

次の問いに答えなさい。

  1. 1+1=
  2. (98+76)/(543-21)x0=
  3. この問題の点数は1問
  4. 円周率π=15926535…
  5. “日本”は英語(5文字)で

2 : 選択方式(1問4点x5=20点)

次の問いをよく読み、選択肢の中から正しい答えを選びなさい。

  1. アルファベットの最初の文字はである。
  2. 1000グラムは1である。
  3. 光の速さは音の速さ
  4. CO2とはの化学式である。
  5. 地球は系にある惑星の1つである。

合格の基準は、50点中30点以上に設定されています。

ダウンロード数のカウンタ

“The Main Line”のリニューアル時点ではまだ準備中だったBASICの配布ファイルですが、2016/05/14に公開を開始しました。1つ目は人生で初めて作ったプログラムである”数当てゲーム”、2つ目はスロット(のようなもの)です。JavaScriptコーナーにも、配布ファイルを置く予定となっているページがありますが、こちらは未だにほとんど進んでいません。ごめんなさい。

さて、BASICコーナーの配布ファイルのページには、ダウンロード数をカウントするカウンターが設置されています。これは私が自作したものですが、1つ難点があります。それは

クリックしただけで+1される

ということです。これは私の知識不足ではなく(と信じたい)、技術上どうしようもないことのようです。ブラウザではダウンロードするときに”キャンセル”を選ぶ画面が出てきますが、もうこの時点でPHPはすべての処理が終わっていると考えられます。また”キャンセル”を選んだとしても、PHPなどでそれを受け取る方法が存在しないため、必ず+1されてしまうのです。

以上、言い訳でした。

“The Main Line”の背景について

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

firefox_tml-top

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

firefox_tml-basic

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

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

chrome_tml-top

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

chrome_tml-basic

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

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

市創式特例について

市岡町創作所のサイトにある”市岡町創作所とは”のページに、この創作所が作成した画像、動画や配布ファイルについての著作権に関するルールである”市創式二条件三保障著作物特例”を掲載しました。長い名前ですが、内容はいたって簡単なものです。この記事ではそれについての説明を行います。

記述内容を見直し、”市創式著作権規定”に名称を変更しました。詳しくは、説明ページをご覧ください。(2017/01/03)

“The Main Line”の移転について

以前より進めていた”The Main Line”の移設作業兼リニューアルがほぼ終わり、新しいページをhttp://ichiso.net/tml/にアップロードしました。他のサイトに比べページ数が多いこと、移設と並行してリニューアル(デザイン変更)を行ったことや、外出やサボりによりかなりの時間がかかってしまいました。すいません!

ほとんどのページに関しては完成となっていますが、配布ファイルのページは改修が終わっていない(始まってもない…)ため準備中と表示されています。

なおリニューアルにあたって、サイトについて様々なことが変更、削除されています。その内容は以下の通りです。

レイアウト
画面上/左側のメニューを廃止
トップページ
検索エンジン/トップ画像/過去のお知らせを廃止
駅名検定コーナー
公開休止(別サイトとして再開予定)
BVEコーナー
廃止(配布ファイル含む)
概要
廃止
全コーナー紹介
トップページに統合
更新履歴
廃止

デザインは大幅にシンプルになり、スマートフォンの表示にも対応しました。背景は真っ白でしたが、リニューアルにあわせサイトのカラーである4色の帯をSVGファイルによって表示しています。ささいなところでは、旧サイトでリンクに設定されていた、マウスオンで色が反転するスタイルを伝統(?)として残しました。変えていないのはこれくらいで、今思えば大分変わってしまったなあと感じています。

公開に関して問題がなければ、近日中に旧URLから新URLへの転送を実施します。これにより、jyds.netは登録期限をもって廃止となります。

2016/04/23から、The Main Lineは新しいURLとなりました。(2016/04/23)

あけましておめでとうございます。

あけましておめでとうございます。本日、2016/01/01より市岡町創作所が開設されました。ということになっています。よろしくお願いします。(実際には2日ほどフライングしています)

もう”常夜堂創作所”->”市岡町創作所”のように名前を変えることはありません。というかもうしたくありません。URL転送の嵐になってしまいます。

さて、サイトの移転作業(jyds.net->ichiso.net)が続いていますが、”The Main Line”以外のすべてのサイト、ブログは作業を完了しています。出来れば年末までに移したかったのですが、できませんでした。

最後にもう1つ。Twitter始めました。ユーザー名は@_iyo1995です。こちらもよろしくお願いします。

それでは、2016年もそれなりに頑張りましょう!

常夜堂創作所の再編について

この度、常夜堂創作所は、市岡町創作所として一新することになりましたのでお知らせします。(名称とサイトのURL以外は大して変わりません)

名称
市岡町創作所 いちおかちょうそうさくしょ Ichioka-Chō Sōsakusho
形態
個人サークル
活動内容
サイト、ブログの公開
代表
iyo
開所日
2016/01/01
サイトURL
http://ichiso.net/

再編に伴い、web無番地を含む全サイトのURLが変更となります。現行では

  • jyds.net
  • site.jyds.net/
    • tml : The Main Line
    • tools : 常夜堂工具箱
  • blog.jyds.net/
    • ekidori : 第一駅撮区
    • d : web無番地(このブログ)

このように、サイトとブログでサブドメインが別々に分かれていましたが、再編後は

サイト、ブログ関係なく、階層ごとに分かれる形となります。またこれに先立ち、サイト 常夜堂工具箱は、名称をこーぐばこに変更します。

2015/12/12から、第一駅撮区は新しいURLとなりました。(2015/12/12)

2015/12/29に、市岡町創作所を公開しました。(2015/12/29)

2015/12/30から、こーぐばこ(旧 常夜堂工具箱)は新しいURLとなりました。(2015/12/30)

2015/12/31から、web無番地は新しいURLとなりました。(2015/12/31)

代表者名をiyoに統一します。(2016/01/16)

2016/04/23から、The Main Lineは新しいURLとなりました。(2016/04/23)

“BLOG The Main Line”閉鎖のお知らせ

タイトルにもあるように、ブログ BLOG The Main Lineを閉鎖しますのでお知らせします。

ブログ名
BLOG The Main Line
終了日
2015/10/31

理由としては、

  • 無料ブログを使用しているため広告が多い
  • これ以上更新する予定がない
  • 公開している記事も古いものしかなく、このまま放置しておいたとしても役に立つものではない

ということが挙げられます。また、近いうちにこの創作所を改変する予定があり、この閉鎖もそれに合わせた形となります。

予定通り、2015/11/01に閉鎖しました。今までありがとうございました。(2015/11/03)

“第一駅撮区youtube派出所”を開設しました

以前に予告したとおり、YouTubeチャンネルを開設しましたのでお知らせします。

チャンネル名
第一駅撮区youtube派出所
URL
https://www.youtube.com/channel/UC2HgdDQvl–iUMX5DaQ8r5A

チャンネル名もお知らせした通りとなりました。まだ動画数がわずかですが、パソコン内には動画が溜まりに溜まっていますので、そのうちまとまった数に増えます(多分)。チャンネル登録していただければこちらからも登録したいと思っていますので、どしどし登録をお願いします!

YouTubeのチャンネル開設日が合わない

まずはこれをご覧ください。

youtube_channel-switcher

新しいチャンネルを作成しその後削除すると、アカウントだけが残り、またチャンネルを作成するときにそのアカウントを選択することができます。

ところで、画像の右下を見ると、この日の日付は2015/08/16だと分かります。ここで、チャンネルを作成してみると…

youtube_channel-about

なぜか15日と表示されます。どうやら日本時間ではなく、アメリカの時間で登録されているようです。日本とアメリカ(ニューヨークなどの東海岸)には14時間の時差があるので、日本ではチャンネルを14時以降に作成すると、日付が合うようになるはずです。