- 2010-03-10 (水) 18:23
- MooTools
質問に対し、YESまたはNOで答える１問２答形式の簡易診断テストを自動生成するスクリプト。
問題と診断結果はJSONファイルに保存するのでCGI使えない鯖でも設置できます。
HTML
質問・結果を表示する要素とボタンが必要。
要素内の中身は実行時に全て削除されるので、NOSCRIPT環境への警告など入れると良いでしょう。
inputタグのボタンはつかえません。
JavaScript
headでMooToolsのコアとdiagnosizm.jsを読み込ませてから、addEvent("domready")でnewする。
Options
オプションの設定は連想配列形式で。
-
new Diagnosizm({url:"data/question.json"}); //JSONファイルへのパスを変更
（タイプ/初期値）
- url
- (string/"question.json") JSONファイルまでのパス
- area
- (string/"diagnosizm") 質問・結果表示場所のID
- button
- (string/"check")ボタンID
- before
- (string/"Q") 質問番号の前に入るHTML
- after
- (string/"：") 質問番号の後に入るHTML
- copyright
- (bool/true) コピーライト表示
- buttonText
- (string/'診断') ボタンの文字
- restartText
- (string/'もう一度診断する') 再診断する時のボタンの文字
- debug
- (bool/false) デバッグモードのON/OFF。診断ボタンのクリックで即結果表示。
数値を指定した場合はその数値に対応した結果を表示します。
出力されるHTMLソース
自動的に作成される要素には下記IDやClassが振られています。
tr.odd ・・・ 奇数行
tr.even ・・・ 偶数行
td.yes ・・・ YESのラジオボタンが入るTD
td.no ・・・ NOのラジオボタンが入るTD
#error ・・・ エラーメッセージのDIV要素
.answer-zero ・・・ 選択されていないエラー
.not-all-checked ・・・ 全て選択されていないエラー
#result ・・・ 結果のDIV要素
.result-XX ・・・ 結果に振られるクラス（XXはキー番号）
.wtn-copyright ・・・ WTNへのリンク
JSON
選択肢が２つなので非常に簡易。
-
{
-
"questions":[
-
{"text":"質問１の文章","yes":1,"no":0},
-
{"text":"質問２の文章","yes":0,"no":1},
-
{"text":"質問３の文章","yes":1,"no":0},
-
{"text":"質問４の文章","yes":1,"no":0},
-
{"text":"質問５の文章","yes":1,"no":0},
-
{"text":"質問６の文章","yes":1,"no":0},
-
{"text":"質問７の文章","yes":1,"no":0},
-
{"text":"質問８の文章","yes":1,"no":0}
-
],
-
"answers":{
-
"5":{"html":"あなたはAタイプです"},
-
"3":{"html":"あなたはBタイプです"},
-
"0":{"html":"あなたはCタイプです"}
-
}
-
}
質問と選択肢
questionsというキーの配列に入っている１行が１問文のデータになります。
-
{"text":"質問１の文章","yes":1,"no":0}
textには質問の文章、yesは「はい」を押した時の点数、noは「いいえ」を押した時の点数を入れます。
単純に１点ずつにしてますが、合計点に基づいて結果を表示するので整数なら10とかでもいいです。
診断結果
answersというキーに入っている１行が１つ分の診断結果になります。
-
"5":{"html":"あなたはAタイプです"}
"基準点（以上）":{診断結果} というデータ形式です。タグが有効。
タグを使用する場合は、属性に使うダブルクォーテーションをバックスラッシュ(/)でエスケープし、改行を全て取り除いてください。
このデータの場合は、０～３点ならC、３～５点ならB、５～点ならAという結果になります。
Copyrightについて
ボタンの真下に表示されますが、どこか別の場所に移したいという場合には
オプションのcopyrightをfalseにして、
-
<a href="http://tenderfeel.xsrv.jp/">Diagnosizm v1.0@WTN</a>
このリンクソースをどこかに貼りつけてください。
ソースが貼ってあればdisplay:noneとかvisibility:hiddenとかにしてもおｋ。
Download
ダウンロード：Diagnosizm (v1.3)
バージョン履歴
- 2010-05-31 ver1.2 → ver1.3
- 採点方式変更
- 2010-05-11 ver1.1 → ver1.2
- デバッグモード追加
- ver1.0 → ver1.1
- ボタン文字列オプション追加
- TRにクラス追加
- Request.JSONのURLがオプションになってなかったのを修正
