掲示板/JavaScript質問板/過去ログ/一覧/ 経過時間

0 名前： togo ： 2007/07/08（日） 12:42 ID:Lc0iZVvO sub-Cl: JavaScript初心者です。
クイズ問題を作成したのですが、クイズを全問解くまでの
経過時間を表示するようにしたいのですが、どなたか教えて
いただけますでしょうか。

具体的には、あるページを開いて時から測定し、１問目の4択を選択すると
２ページ目の２問目が表示し、解答を選択すると３ページ目の３問目が表示・・・
これを１０問（１０ページ）まで終了すると、１１ページ目の正解率と経過時間を
表示するように考えています。
１ページから１０ページまでの表示、１１ページの正解率はできたのですが、経過時間
が本で調べてもわかりませんでした。
どなたかよろしくお願いいたします。

1 名前：匿名： 2007/07/08（日） 12:42 ID:rRa9.kRR sub-2m: load イベントで作成した Date オブジェクトと、unload イベントで作成した Date オブジェクトの差分をとれば、そのページにとどまっていた時間になるかと。

2 名前： miz ： 2007/07/08（日） 12:42 ID:uhkJPLtV sub-Ds: 経過時間は、 (new Date()).getTime() の比較でミリ秒単位で計算できます。
ページ移動があるので、cookieに開始時刻を記録して、最後に、cookieデータと現在時刻とを比較すればいいでしょう。

3 名前： togo ： 2007/07/08（日） 12:42 ID:Lc0iZVvO sub-Cl: ありがとうござます。
やってみます。

4 名前：匿名： 2007/07/08（日） 12:42 ID:K.4sEtYQ sub-Cz: 蛇足ながら、d1 と d2 を Date オブジェクトとしたとき、ミリ秒での差分計算ならオブジェクト同士の演算 d2 - d1 で OK（cf. ECMA262-3: 8.6.2.6, 9.1, 11.6.2, 15.9.5.8）。

5 名前： togo ： 2007/07/08（日） 12:42 ID:zwiVAe3a sub-HD: すみません。初心者のためなかなうまくいきませんでした。
よろしくお願いいたします。

1ページ目は

<p>Q1.現在は西暦何年？</p>

<ol>
<li>2006</li>
<li>2007</li>
<li>2008</li>
<li>2009</li>
</ol>

<script language="JavaScript">

var answers = location.search;
var nextpage = "2.html?";
var select1 = "Q11";
var select2 = "Q12";
var select3 = "Q13";
var select4 = "Q14";
document.write('[ <a href="' + nextpage + answers + select1 + '">選択肢 1</a> ] ');
document.write('[ <a href="' + nextpage + answers + select2 + '">選択肢 2</a> ] ');
document.write('[ <a href="' + nextpage + answers + select3 + '">選択肢 3</a> ] ');
document.write('[ <a href="' + nextpage + answers + select4 + '">選択肢 4</a> ] ');

</script>
<noscript>
※JavaScript機能がOFFの場合、回答用リンクを生成できません。
ページ末のページ番号をクリックしてお進み下さい。
</noscript>

最後の１１ページに経過時間を表示したいのですが
このページは
<p>成績発表～</p>

<script language="JavaScript">

var answers = location.search;
var trues = 0;
var questions = 10; /* 問題数 */

document.write('<table border="1" cellpadding="3" cellspacing="0">');

/* ▼1問目 */
document.write('<tr><th>1問目</th>');
if( answers.indexOf("Q12") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a1">第1問目の解説</a></td></tr>');

/* ▼2問目 */
document.write('<tr><th>2問目</th>');
if( answers.indexOf("Q21") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a2">第2問目の解説</a></td></tr>');

/* ▼3問目 */
document.write('<tr><th>3問目</th>');
if( answers.indexOf("Q34") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a3">第3問目の解説</a></td></tr>');

/* ▼4問目 */
document.write('<tr><th>4問目</th>');
if( answers.indexOf("Q41") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a4">第4問目の解説</a></td></tr>');

/* ▼5問目 */
document.write('<tr><th>5問目</th>');
if( answers.indexOf("Q53") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a5">第5問目の解説</a></td></tr>');

/* ▼6問目 */
document.write('<tr><th>6問目</th>');
if( answers.indexOf("Q64") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a6">第6問目の解説</a></td></tr>');

/* ▼7問目 */
document.write('<tr><th>7問目</th>');
if( answers.indexOf("Q71") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a7">第7問目の解説</a></td></tr>');

/* ▼8問目 */
document.write('<tr><th>8問目</th>');
if( answers.indexOf("Q82") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a8">第8問目の解説</a></td></tr>');

/* ▼9問目 */
document.write('<tr><th>9問目</th>');
if( answers.indexOf("Q93") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a9">第9問目の解説</a></td></tr>');

/* ▼10問目 */
document.write('<tr><th>10問目</th>');
if( answers.indexOf("Q104") >= 0 ) {
/* 正答の場合 */
document.write('<td>○</td>');
trues++;
}
else {
/* 誤答の場合 */
document.write('<td>×</td>');
}
document.write('<td><a href="kaisetsu.html#a10">第10問目の解説</a></td></tr>');

document.write('</table>');

/* 集計 */
document.write('<br>正答数 ' + trues + '問／正答率 ' + trues*100/questions + '％');

/* メッセージ */
if( trues >= 10 ) {
document.write('おめでとうございます！全問正解です！');
}
else if( trues >= 7 ) {
document.write('おしいっ！あと一歩ですね。');
}

else if( trues >= 5 ) {
document.write('半分は越えましたね。あと少しがんばりましょう。');
}

else {
document.write('がんばりましょう。');
}

</script>
<noscript>
※JavaScript機能がOFFの場合、成績結果を生成できません。
全問題の<a href="kaisetsu.html">解説はこちら</a>です。
</noscript>

6 名前：匿名： 2007/07/08（日） 12:42 ID:xX0Z/4gQ sub-Cz: http://oshiete1.goo.ne.jp/qa3142078.html

>>1-2 で言われたことの何を試し、どのようにうまくいかなかったのか。それを書かずに『よろしくお願い』されても、こっちだって困るわけだ。

マルチポストするならするで（ここではルール違反だが）、なぜここで受けたアドバイスを紹介せずにあちらの方々に余計な時間をとらせるのか。No.1 の方のアドバイスは、>>2 とほとんど同じじゃないか。

お約束。JavaScript を書くなら HTML の文法くらいは確実に押さえてくれ。

× <script language="JavaScript">
△ <script type="text/javascript">

document.write('........<\/a>....');
以下終了タグは全て同じ。

>>5 をそのまま利用するなら、ページ読み込み完了（(on)load）と同時に作成した Date オブジェクトと、a 要素の (on)click 時に作成した Date オブジェクトの差分をとり、URI クエリとして渡していけば良い。そうすれば Cookie を使う必要もフレームを使う必要もない。

もう少し自分で悩んで進展を報告してくれると期待していたのだが、まあ頑張ってくれ。

7 名前：匿名： 2007/07/08（日） 12:42 ID:xX0Z/4gQ sub-Cz

まあ、放置状態だったのは事実だから一応。

<script type="text/javascript">

var T; onload = function () { T = new Date; };

</script>
    
<ul>
  <li>
    <a href="#" onclick="

var t = (new Date) - T;
var u = /^(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/.exec (this);
var q = location.search;
var r = /(time=)(\d+)/;
if (r.test (q)) { t += parseInt (q.match (r)[2]); q = q.replace (r, '$1' + t); }
else q = (u[6] ? u[6] + '\u0026' : '?') + 'time=' + t;
location.href = u[1] + u[3] + u[5] + q;
return false;

    ">次へ</a>
  </li>
  <li>
    <a href="#" onclick="

var q = location.search;
var r = /(time=)(\d+)/;
var t = (r.test (q)) ? parseInt (q.match (r)[2]) : 0;
alert (t + 'ms. (' + Math.round (t / 1000) + ' 秒)');
return false;

    ">ここまでの経過時間</a>
  </li>
</ul>

マルチポスト状態に何らかの対処をしてくれることを切に願う。

8 名前： toto ： 2007/07/08（日） 12:42 ID:Lc0iZVvO sub-Cl: 申し訳ありませんでした。
今後はこのような事がないように気をつけます。