0

以下のコードは、各質問のチェックボックス ボタンとして各オプションを動的に表示する方法です。

        function ExpandOptionType($option) { 
                $options = explode('-', $option);
                if(count($options) > 1) {
                    $start = array_shift($options);
                    $end = array_shift($options);
                    do {
                        $options[] = $start;
                    }while(++$start <= $end);
                 }
                 else{
                    $options = explode(' or ', $option);
                 }
                 echo '<p>';
                 foreach($options as $indivOption) {
                     echo '<div id="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';
                 }
                  echo '</p>';


            }


            foreach ($arrQuestionId as $key=>$question) {

            ?>

            <p><?php echo ExpandOptionType(htmlspecialchars($arrOptionType[$key])); ?></p>

    <p><input type='text' class='questionIds' name='questionids' value='<?php echo htmlspecialchars($arrQuestionId[$key]); ?>' /></p>

    <p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

    <p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>

}

次に、foreach ループにもある 2 つのテキスト入力を下に示します。1 つは応答時間用で、もう 1 つはマウス クリックのカウント用です。

<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>

これが私の質問です：

  1. 応答時間のテキスト入力には、カウントアップ タイマーが含まれています。私が欲しいのは、質問で最初のボタンのチェックボックスがクリックされた場合、質問の応答タイマーが停止することです。これは、ユーザーが特定の質問に回答するまでにかかった時間を把握するためです。

  2. マウス クリック テキストは 0 から始まり、このテキスト入力で実行したいことは、質問でクリックされたすべてのボタン チェックボックスに対して、質問のマウス クリック テキスト入力でクリック数がカウントされるため、質問のオプションのクリック数がわかります。ユーザーがコンパイルしました。

上記はどのように達成できますか？

以下は、1 つの質問のサンプル コードを示す jsfiddle です。

http://jsfiddle.net/zAFND/630/

アップデート：

複数の質問の例を示すソース コード:

QUESTION 1:

<p>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-A" value="A" />
<span>A</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-B" value="B" />
<span>B</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-C" value="C" />
<span>C</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-D" value="D" />
<span>D</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-E" value="E" />
<span>E</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-F" value="F" />
<span>F</span>
</label>
</div>

</p>

<p><input type='text' class='questionIds' name='questionids' value='73' /></p>


<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>



QUESTION 2:

<p>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-A" value="A" />
<span>A</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-B" value="B" />
<span>B</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-C" value="C" />
<span>C</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-D" value="D" />
<span>D</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-E" value="E" />
<span>E</span>
</label>
</div>

</p>

<p><input type='text' class='questionIds' name='questionids' value='74' /></p>


<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>
4

1 に答える 1

1

setinterval の参照を作成したので、それは良いことです。最初のチェックボックスのクリックイベントで設定された間隔を削除し、すべてのチェックボックスでクリックイベントを追加してカウンターを増やすことができるようになりました。

それは

$(document).ready(function(){
var checkBox=$('#ck-button').find('input');
var responsetimer=//your interval function
checkbox.filter(':first').bind('click',function(e){
 clearInterval(responsetimer);
});
checkbox.bind('click',function(e){
$('.mouseClick').val(parseInt($('.mouseClick').val())+1);
});
});

最初のボタンクリックまたは最初のボタンクリックでタイマーを停止したいという質問についてはよくわかりません。初めての場合は、最初のバインディングを使用しないでください。2 番目のバインド自体で明確な間隔を維持します。

checkbox.bind('click',function(e){
 clearInterval(responsetimer);
 $('.mouseClick').val(parseInt($('.mouseClick').val())+1);
});

JS フィドル: http://jsfiddle.net/zAFND/631/ 2 番目のオプション http://jsfiddle.net/zAFND/638/

複数の質問にこれが必要な場合は更新 して、各質問を div で囲みます<div class="queWrap"></div>

明確にするために、間隔関数の配列参照を作成します。

各 queWrap にループし、タイマーを開始し、チェックボックスにイベントを割り当てます。

複数の質問の例を確認してください: http://jsfiddle.net/zAFND/640/

于 2013-02-09T04:20:06.007 に答える