1

手伝って頂けますか？送信をクリックした後、回答と、クイズを完了するのにかかった秒数を取得し、それを関数内のデータの配列と比較して、別の HTML ページに表示する精度クイズを作成したいと思います。 .

onchange="handleInput(this);"& <を使用form action="Results.html">して、別のページに結果を表示します。私はJavascriptが初めてです。

どんな助けでも大歓迎です！ありがとうございました。

サンプル結果表示

おっとっと！3問間違えました！

不正解: 2、4、5

クイズを完了するのに 17 秒かかりました。1 時間あたり 65 のエラーに相当する 5 つの回答が間違っています。データの正確さの解答集

1 と 3 の 2 つの完全一致があります。その他はすべて一致しません。クイズの平均所要時間は 90 秒です。

これまでの私のコードは次のとおりです。

<html>
<title>Accuracy Proofing</title>
<head>
<script language="JavaScript">
startday = new Date();
clockStart = startday.getTime();
function initStopwatch() { 
var myTime = new Date(); 
var timeNow = myTime.getTime();  
var timeDiff = timeNow - clockStart; 
this.diffSecs = timeDiff/1000; 
return(this.diffSecs); 
} 
var secStop=setInterval(function(){getSecs()},1000);
function getSecs() { 
var mySecs = initStopwatch(); 
var mySecs1 = ""+mySecs;
mySecs1= mySecs1.substring(0,mySecs1.indexOf(".")) + " secs."; 
document.forms[0].elapsed_time.value = mySecs1;
document.getElementById('Timer').innerHTML = 'Elapsed time: ' + mySecs1;
document.getElementById("demo").innerHTML=initStopwatch;
window.setTimeout('getSecs()',1000); 
}
</script>

</head>

<body class="quiz-container" onLoad="window.setTimeout('getSecs()',1)">
<div class="quiz-container-inner"
        <h3>Accuracy Quiz</h3>
        <p class="overview">Compare each pair below. If the numbers, letters, and punctuation are the same, put a check in the "Same" column. If they are different, put a check in the "Different" column.</p>


        <div class="box-callout">
        <form action="Results.html" method="post" class="products" target="_top">
            <input type="hidden" name="elapsed_time" id="elapsed_time" value="0">
        <!-- Table markup-->

        <div id="Timer" name="Timer"></div>

        <table id="hor-zebra" summary="Employee Pay Sheet">

        <!-- Table header -->
        <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Correct</th>
                <th scope="col">Same</th>
                <th scope="col">Different</th>
                <th scope="col"></th>
                <th scope="col">Copy</th>
            </tr>
        </thead>
        <!-- Table footer -->
        <tfoot>
            <tr>
            <td scope="col"></td>
            <td scope="col">Correct</td>
            <td scope="col">Same</td>
            <td scope="col">Different</td>
            <td scope="col"></td>
            <td scope="col">Copy</td>
            </tr>
        </tfoot>


        <!-- Table body -->
        <tbody>
            <tr class="odd">
                <td><span class="number">1.</span></td>
                <td><span class="times">November 16, 2005</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field1" id="Field1_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field1" id="Field1_2">               
                </td>
                <td><span class="number">1.</span></td>
                <td><span class="courier">Novenber 16, 2005</span></td>
            </tr>
            <tr>
                <td><span class="number">2.</span></td>
                <td><span class="times">CITIMORTGAGE, INC.</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field2" id="Field2_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field2" id="Field2_2">               
                </td>
                <td><span class="number">2.</span></td>
                <td><span class="times-tight">CITIMORGAGE, INC.</span></td>
            </tr>
            <tr class="odd">
                <td><span class="number">3.</span></td>
                <td><span class="times">ALICIA CARILLO</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field3" id="Field3_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field3" id="Field3_2">               
                </td>
                <td><span class="number">3.</span></td>
                <td><span class="times">Alcia Carillo</span></td>
            </tr>
            <tr>
                <td><span class="number">4.</span></td>
                <td><span class="times">45 Nortwesterly</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field4" id="Field4_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field4" id="Field4_2">               
                </td>
                <td><span class="number">4.</span></td>
                <td><span class="arial">45 Nortwesterley</span></td>
            </tr>
            <tr class="odd">
                <td><span class="number">5.</span></td>
                <td><span class="times">HUSBAND AND WIFE</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field5" id="Field5_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field5" id="Field5_2">               
                </td>
                <td><span class="number">5.</span></td>
                <td><span class="times">HUSBAND AND WIFE</span></td>
            </tr>
            <tr>
                <td><span class="number">6.</span></td>
                <td><span class="times">AMERICAHOMEKEY, INC.</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field6" id="Field6_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field6" id="Field6_2">               
                </td>
                <td><span class="number">6.</span></td>
                <td><span class="arial">AMERICAHOMKEY, INC.</span></td>
            </tr>
        </tbody>

        </table>

    <div class="pad">
<input type="Submit" value="Show Me the Results." class="large brown awesome">
        </div>
    </form>
    </div>
</div>
<script type="text/javascript">
    createTimer();
</script>

</body>
</html>

私の Web はローカルにあり、どの Web サーバーにもホストされていません。ローカルで実行したいだけです。そのため、サーバーサイドスクリプトを使用できません...

4

2 に答える 2

0

POST の代わりにフォームの GET メソッドを使用して、パラメーターの URL を解析できます。(window.locationに格納されたURL)

于 2013-02-06T21:31:49.207 に答える
0

経過時間をエンド ユーザーに表示していないため、フォームの onsubmit ハンドラーで 1 回だけ計算することで、よりクリーンな処理を行うことができます。

<script>
var startTime = new Date().getTime();
function saveElapsedTime( field) {
  var now = new Date().getTime();
  var elapsed = now - startTime;
  field.value = elapsed;
  return true;
}
</script>

<form ... onsubmit='saveElapsedTime( this.elapsed_time);'>
    <input type='hidden' name='elapsed_time' id='elapsed_time' value='unknown'>
    ...
</form>

結果を処理して別のページに表示する場合は、フォーム データを受信するためのサーバー サポートが必要になるか、フォームを変更method='get'して新しいページの JavaScript から結果データを解析してアクセスする必要があります。 window.location.search.

于 2013-02-06T23:23:12.723 に答える