2

我需要为显示一个简单数学问题的 JsPsych 实验编写一些试验代码。用户必须尽快在文本框中回答，然后按 Enter 键移动到下一个问题。等等。

在每个问题上，都会显示一个文本区域供用户输入他/她的答案，并且这样的文本区域必须立即获得焦点。

我修改了调查文本插件以通过按 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 元素，但由于某种原因，它们都不起作用。
  • 我也尝试过使用计时器来聚焦文本区域，如此处所建议的（关于该主题的其他解决方案也不起作用）。
  • 正如您从我的代码中看到的那样，我正在尝试使用一个触发 Blur 的函数来“恢复”焦点。我也尝试过这种方法 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 回答