WEB上で下記のページのような問題集を作りたいと考えています。
http://www.kentei-uketsuke.com/practice_test.asp?exercise_id=wbk001
参考になるサイト、教則本などをご存知でしたら教えて下さい。（直接コードを教えて頂くのも大歓迎です）
必須のポイントとして
・正答率が80%以上の場合、以下の場合で、合格・不合格の表示切り替え
・解答ページでの正答率の表示
・解答ページでの各問題の正誤を表示
・時間をはかる（タイムアウトの場合、回答後に別ページへ遷移）
宜しく御願いいたします。
No.3
472
58
10pt
普通は出題と採点は CGIとか(例示のページなら ASP) でやることが多いと思いますが、JavaScript とあるのであえて JavaScript だけで。
18
17
<!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
]
]
2
1
1
1
5
コメント（0件)