Javascriptについての質問です。

WEB上で下記のページのような問題集を作りたいと考えています。
http://www.kentei-uketsuke.com/practice_test.asp?exercise_id=wbk001

参考になるサイト、教則本などをご存知でしたら教えて下さい。(直接コードを教えて頂くのも大歓迎です)
必須のポイントとして
・正答率が80%以上の場合、以下の場合で、合格・不合格の表示切り替え
・解答ページでの正答率の表示
・解答ページでの各問題の正誤を表示
・時間をはかる(タイムアウトの場合、回答後に別ページへ遷移)

宜しく御願いいたします。

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2007/10/02 00:48:28
  • 終了:2007/10/09 00:50:03

回答(3件)

id:GEN111 No.3

GEN111回答回数472ベストアンサー獲得回数582007/10/05 14:34:03

ポイント10pt

普通は出題と採点は CGIとか(例示のページなら ASP) でやることが多いと思いますが、JavaScript とあるのであえて JavaScript だけで。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style type="text/css">
      dd.incorrect { color : red ; }
      div#timeleft { background : #ddf ; text-align : right ; padding : 1ex ; width 6em ; position : fixed ; _position : absolute ; top : 0 ; right : 0 ; }
    </style>

    <script type="text/javascript">
      var question_data = './questions.txt' ;           // 問題データ
      var question_num  =  3 ;                         // 表示問題数
      var pass_grade    = 60 ;                         // 合格ライン(正答率)
      var time_limit = 90 ;                            // 制限時間 (秒)
      var passed_url = './pass.html' ;       // 合格時のジャンプ先
      var failure_url = './failure.html' ;      // 不合格時のジャンプ先
      var passed_limit_url = 'passedtimelimit.html' ; // 時間切れ時のジャンプ先

      var questions, timeleft, timerId ;

      try { var XMLhttpObject = new XMLHttpRequest() ; }
      catch (e) {
        try { XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP") ; }
        catch(e) {
          try { XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP") ; }
          catch(e) { XMLhttpObject = null ; }
        }
      }
      if (XMLhttpObject) XMLhttpObject.onreadystatechange = showQuestions ;

      $ = function(id) { return document.getElementById(id) ; }

      // 残り時間表示
      function showTimeLeft() {
        if (timeleft == 0) clearInterval(timerId) ;
        $('timeleft').innerHTML = '残り時間<br />'+(timeleft--)+'秒' ;
      }

      // 問題表示
      function showQuestions() {
        questions = eval(XMLhttpObject.responseText) ;
        if (questions.length < question_num) question_num = questions.length ;
        for (var i = questions.length, tmp, p; i > 0; --i) {
          tmp = questions[p = Math.floor(Math.random()*i)] ;
          questions[p] = questions[i-1] ;
          questions[i-1]= tmp ;
        }

        for (var i = 0, qform = '<form><dl>'; i < question_num; ++i) {
          qform += '<dt>'+questions[i][0]+'</dt>' ;
          for (var n = 0; n < questions[i][1].length; ++n) qform += '<dd><input type="radio" name="q'+i+'" value="'+(n+1)+'">'+questions[i][1][n]+'</dd>' ;
        }
        $('questions').innerHTML = qform+'</dl><input type="button" onclick="mark(this.form)" value="採点する" /></form>' ;

        timeleft = time_limit ;
        timerId = setInterval(showTimeLeft, 1000) ;
        showTimeLeft() ;
      }

      // 採点
      function mark(f) {
        clearInterval(timerId) ;
        var result = '<h1>採点</h1><dl>' ;
        for (var i = 0, score = 0; i < question_num; ++i) {
          result += '<dt>'+questions[i][0]+'</dt>' ;
          for (var n = 0, answer = 0; n < f['q'+i].length; ++n) if (f['q'+i][n].checked) answer = n+1 ;
          if (questions[i][2] == answer) ++score ;
          else if (answer != 0) result += '<dd class="incorrect">×'+questions[i][1][answer-1]+'</dd>' ;
          result += '<dd class="correct">○'+questions[i][1][questions[i][2]-1]+'</dd>' ;
        }
        var ratio = Math.round((100*score) / question_num) ;
        result += '</dl><p>正解 '+score+'/'+question_num+' (正答率 '+ratio+'%)</p><p><a href="' ;
        if (timeleft <= 0) result += passed_limit_url+'">時間切れ' ;
        else if (ratio >= pass_grade) result += passed_url+'">合格' ;
        else result += failure_url+'">不合格' ;
        $('questions').innerHTML = result+'</a></p>' ;
      }

      if (navigator.appVersion.match(/MSIE/) && !navigator.appVersion.match(/MSIE 7/)) onscroll = function() {
        $('timeleft').style.top = document.documentElement.scrollTop || document.body.scrollTop ;
      }

      onload = function() {
        if (XMLhttpObject) {
          XMLhttpObject.open('get', question_data, false) ;
          XMLhttpObject.send('') ;
        }
      }
    </script>
  </head>

  <body>
    <div id="timeleft"></div>
    <div id="questions"></div>
    <div id="debug"></div>
  </body>
</html>

問題の例。questions.txt という名前で 文字セットUTF-8 で保存。

[
  [
    "弱肉[?]食",        // 問題
    ["定", "給", "強"], // 選択肢
    3                   // 正解
  ],

  [
    "オーストラリアの首都は?",
    ["ウィーン", "シドニー", "キャンベラ", "アボリジニ"],
    3
  ],

  [
    "太宰治の『走れメロス』の書き出し。「メロスは~」",
    ["猫である。", "激怒した。", "悲しんだ。", "雪国だった。"],
    2
  ],

  [
    "初代ゼットンを倒したのは?",
    ["ウルトラマン", "ゾフィー", "ウルトラ警備隊", "科学特捜隊"],
    4
  ],

  [
    "生命、宇宙、そして万物についての究極の疑問の答えは?",
    [42, 48, 75, 108],
    1
  ]
]

人力検索はてな

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません