2

簡単な数学の問題を表示する JsPsych 実験用に、いくつかの試行をコーディングする必要があります。ユーザーはできるだけ早くテキスト ボックスに回答し、Enter キーを押して次の質問に移動する必要があります。等々。

質問ごとに、ユーザーが回答を入力するための単一のテキストエリアが表示され、そのようなテキストエリアはすぐにフォーカスされる必要があります。

各テキスト ボックスの作成時に autofocus プロパティを追加するだけでなく、Enter キーを押して試行を続行するように、調査テキスト プラグインを変更しました。問題は、オートフォーカスが最初の試行でのみ機能し、残りの試行で機能しなくなることです.

以下にコードを示します (動作させるには、JsPsych フォルダーが同じディレクトリにある必要があります)。

<!doctype html>
<html>
    <head>
        <title>Habilidad Aritmetica</title>
        <!-- Inicio llamada a libreria JsPsych + Plugin -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="jspsych-5.0.3/jspsych.js"></script>
        <!-- Plugin para recibir texto estilo survey -->
        <script src="jspsych-5.0.3/plugins/jspsych-survey-text.js"></script>
        <!-- Plugin para desplegar elementos tipo instrucciones -->
        <script src="jspsych-5.0.3/plugins/jspsych-instructions.js"></script>
        <!-- *** CSS *** -->
        <link rel="stylesheet" type="text/css" href="style.css">       
    </head>
    <body>
        <div class="centered">
        <script>

                var aritm01={
                    type: 'survey-text',
                    timeline:[
                        {
                            questions:['<p>preg 1</p>']
                        }
                    ]
                };

                var aritm02={
                    type: 'survey-text',
                    questions:['<p>preg 2</p>']
                };

                var aritm03={
                    type: 'survey-text',
                    questions:['<p>preg 3</p>']
                };

                function advance(event){
                    $("textarea").keydown(function(event){
                        console.log(event.keyCode);
                        //event.preventDefault();
                        if (event.keyCode == 13) {
                            console.log("User pressed enter. Clicking continue button");
                            var btn = document.getElementById("jspsych-survey-text-next");
                            btn.click();
                            //event.preventDefault(); 
                        }
                    });
                }

                function recoverfocus(event){
                    $("textarea").focus();
                    }

                var second_battery = [];

                second_battery.push(aritm01);
                second_battery.push(aritm02);
                second_battery.push(aritm03);


                    jsPsych.init({
                        timeline: second_battery,
                        on_finish: function(){
                        jsPsych.data.localSave('second_battery_results.csv', 'csv');
                        },
                        default_iti: 0
                    });              
        </script>
        </div>
    </body>
</html>

JsPsych の調査テキスト プラグイン側からの重要な変更点は次のとおりです。

focused_box = $("#jspsych-survey-text-" + i).append('<textarea autofocus onfocus="advance(event)" onblur="recoverfocus(event)" required name="#jspsych-survey-text-response-' + i + '" cols="' + trial.columns[i] + '" rows="' + trial.rows[i] + '"></textarea>');

(はい、インライン JavaScript が悪い考えであることは知っていますが、これまでのところ、それを機能させることができた唯一の方法です)

私が試したこと：

  • getElementById() 同様の質問の多くは、メソッドの使用、またはgetElementsByTagName()DOM 要素を処理することを示唆していますが、何らかの理由でそれらのどれも機能しません。
  • ここで提案されているように、タイマーを使用してテキスト領域にフォーカスすることも試みました（そのトピックで提案された他の解決策も機能しませんでした）。
  • 私のコードからわかるように、ぼかしをトリガーする関数を使用してフォーカスを「回復」しようとしています。そのようなアプローチ onLoad() も試しましたが、どちらの場合も結果はありません。
  • 多くのトライアルを使用する代わりに、単一のトライアル内のネストされたタイムラインに質問を表示しようとしました。運もありません。

何か不足していますか？

いくつかの追加メモ:

この質問のタグから推測できるように、オートフォーカスを単独で機能させることができない場合に備えて、JQuery および HTML5 固有の関数はソリューションとして完全に許可されています。自分を制限する必要はありません。楽しんでください。

この動作は、Ubuntu 16 用の Firefox の最新バージョン、および Windows 用の Chrome (具体的には Windows 10) の最新バージョンでテストされています。

更新:ここでこのコードを試すことができます

4

1 に答える 1

1

要素をページに追加した後、フォーカスを適用できます。変更したアンケート テキスト プラグインで、63 行目でこれを試してください。

$("#jspsych-survey-text-" + i +" textarea").focus();

これにより、コードに含まれている他のものが時代遅れになる可能性がありますが、他の変更は試していません。

于 2016-08-09T19:35:21.487 に答える