人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: tomi99
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript Web コード サイト タイムアウト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● safari33
●60ポイント

http://www5c.biglobe.ne.jp/~ecb/java/java00.html


2 ● minkpa
●10ポイント

http://www2f.biglobe.ne.jp/~akio/js/


3 ● GEN111
●10ポイント

普通は出題と採点は 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
 ]
]

人力検索はてな

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ