Level Checker

Description:

あなたの○○度をチェックします。クイズシステムとしても使えます。

*一部のMac版ブラウザ、DreamPassportでは動作しません。

Demo:

デモを見る。

Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<script language="JavaScript" type="text/javascript">
<!--
/** Level Checker Version1.10 **/

function setBr() {
 if(navigator.appVersion.charAt(0)>=4)
   b = "\n";
  else if(navigator.userAgent.indexOf("Win") != -1)
   b = unescape("%OD") + unescape("%0A");
  else if(navigator.userAgent.indexOf("Mac") != -1)
   b = unescape("%0D");
  else
   b = unescape("%0A");

 return b;
}

var br      = setBr();

function levelChecker(fm) {
 var formobj = document.forms[0]; //フォームオブジェクト
 var error_q  = "";
 var point    = 0;
 var maxpoint = 0;
 var loopflag = true;
 var qcount = 1;

 while(loopflag) {
  var chkunsel = true;
  var mpoint = 0;

  var radiolength = formobj.elements["q"+qcount].length;  

  for(i=0; i<radiolength; i++) {
   var checked = formobj.elements["q"+qcount][i].checked;
   var crpt    = formobj.elements["q"+qcount][i].value;
   if(crpt > mpoint) { mpoint = crpt; }
   if(checked) {
     point += eval(crpt);
     chkunsel = false;
   }   
  }
  if(chkunsel) { error_q += " [Q"+qcount+"]"; }
  maxpoint += eval(mpoint);
  qcount++;
  if(!formobj.elements["q"+qcount]) { loopflag=false; }
 }

 if(error_q!="") {
   alert("以下の問題の答えが選択されていません\n"+error_q);
  }
 else {
   alert("検査結果が出ました。下の覧をご覧ください。");
   levelCheckerShowMessage(qcount-1, point, maxpoint, formobj);
  }
}


//*****************************************************
//********* メッセージの生成 **************************
//*****************************************************

function levelCheckerShowMessage(qcount, point, maxpoint, formobj) {
 var msg,level;

 //判定(*1)
 if(point<=0) {
   level = "素人";
   msg = "・・・・・ホームページ持っていますか？";
 }
 else if(point<=2) {
   level = "一般人";
   msg = "まだまだこれからです。修行を頑張りましょう。";
 }
 else if(point<=4) {
   level = "上級者";
   msg = "あなたはなかなかの使い手です。更に精進してください。";
 }
 else if(point<=5) {
   level = "達人";
   msg = "素晴らしい！あなたはJavaScriptの達人です。もう教えることは何もありませぬ。";
 }

 //メッセージの出力
 now = new Date();
 var doc = "";
 doc  = "あなたのJavaScripter度の検査結果です。" +br;
 doc += "-----------------------------------------" +br;
 doc += "調査日時：" +now+br;
 doc += "総質問数：" +qcount+ "問" +br; 
 doc += "ポイント：" +point+ "pt / " +maxpoint+"pt(最大)"+br;
 doc += "レベル　：" +level+br;
 doc += br;
 doc += msg +br;

 formobj.comment.value = doc;
}
//-->
</script>

</head>

<body>


<form method="post" name="q_form">

<p>
<strong>[Q1] あなたはJavaScriptというのを知っている？</strong><br>
<input type="radio" name="q1" value="1">はい<br>
<input type="radio" name="q1" value="0">いいえ<br>
</p>

<p>
<strong>[Q2] 自分のホームページにJavaScriptを使っている？</strong><br>
<input type="radio" name="q2" value="1">はい<br>
<input type="radio" name="q2" value="0">いいえ<br>
</p>

<p>
<strong>[Q3] JavaScriptプログラムの自作が可能？</strong><br>
<input type="radio" name="q3" value="1">はい<br>
<input type="radio" name="q3" value="0">いいえ<br>
</p>

<p>
<strong>[Q4] 一日一回はJavaScriptプログラムを組む？</strong><br>
<input type="radio" name="q4" value="1">はい<br>
<input type="radio" name="q4" value="0">いいえ<br>
</p>

<p>
<strong>[Q5] JavaScriptの為ならありとあらゆるものを犠牲に出来る？</strong><br>
<input type="radio" name="q5" value="1">はい<br>
<input type="radio" name="q5" value="0">いいえ<br>
</p>

<input type="button" onClick="levelChecker(this.form)" value="JavaScript度チェック！">

<br><br>

<textarea cols="90" rows=10 name="comment" style="background-color:#C0C0C0;">
===========================================================
各項目を選択してから、上のボタンを押してください。
ここに検査の結果が出ます。
あなたのJavaScripter度はどれくらい！？？
</textarea>
</form>



</body>
</html>

Advice:

■ 各問題は、以下のようなルールで作られています。

<input type="radio" name="q1" value="0">問題１：答え１
<input type="radio" name="q1" value="3">問題１：答え２
<input type="radio" name="q1" value="5">問題１：答え３

<input type="radio" name="q2" value="0">問題２：答え１
<input type="radio" name="q2" value="5">問題２：答え２

各問題の選択肢(type="radio")には同じnameを指定して、 グループ化します。その際、一問目の選択肢は name="q1" ニ問目の選択肢は name="q2"と q の後ろに問題番号の数字を書いたものをnameで指定します。

value属性は、その選択肢を選んだ際のポイントを表します。 例えば value="5" の選択肢をチェックした場合はその問題に対して ５ポイントが加算されるという意味になります。 このポイントの合計が結果に反映されます。

■ メッセージの出力 (*1)

 //判定(*1)
 if(point<=0) { //獲得ポイントが０ポイントのとき
   level = "素人"; //レベル
   msg = "・・・・・ホームページ持っていますか？"; //コメント
 }
 else if(point<=2) { //獲得ポイントが２ポイント以下のとき
   level = "一般人";
   msg = "まだまだこれからです。修行を頑張りましょう。";
 }
 else if(point<=4) { //獲得ポイントが４ポイント以下のとき
   level = "上級者";
   msg = "あなたはなかなかの使い手です。更に精進してください。";
 }
 else if(point<=5) { //獲得ポイントが５ポイント以下のとき
   level = "達人";
   msg = "素晴らしい！あなたはJavaScriptの達人です。もう教えることは何もありませぬ。";
 }
(・・・・以下・・・・)

獲得ポイントの合計によって出力するメッセージを変更する。 if(n<=0)は、獲得ポイントが０以下だった場合のメッセージ。 else if(n<=3)は、獲得ポイントが３以下(1〜3)だった場合のメッセージ。 else if(n<=6)は、獲得ポイントが６以下(4〜6)だった場合のメッセージ。

Arrangement:

Browser:

Internet Explorer3.0以上
Netscape Navigator2.0以上
[ Back ]