javascript - 如何在 Otree 应用程序上为蜂窝网络提供键盘

Question

我改编了一个IAT(隐式关联任务)，我用它来进行计算机实验，但现在我需要在平板电脑或手机上实现这个IAT，

这就是 IAT 在蜂窝中的样子:

人们被困在这个屏幕上，因为他们无法使用蜂窝键盘来按 E、I 或 SPACE。有人可以提供如何使其发挥作用的想法。

我在模型中有下一个代码。

class Constants(BaseConstants):
    name_in_url = 'iat'
    players_per_group = None

    LEFT, RIGHT = iat_order.LEFT, iat_order.RIGHT
    FIRST, SECOND = iat_order.LEFT, iat_order.RIGHT

    num_rounds = len(default_iat_blocks.iat_block_list)
    LEFT_KEYCODE = 69
    LEFT_KEY_NAME = '"E" (Presione E)'
    RIGHT_KEYCODE = 73
    RIGHT_KEY_NAME = '"I" (Presione I)'
    META_KEYCODE = 32
    META_KEY_NAME = 'Barra de Espacio'

    OR = " o"

这是配置按键的代码。

const is_key_valid = (keycode) => {
    return keycode === left_keycode || keycode === right_keycode;
};

const mark_wrong = () => {
        $(".wrong_answer_mark").show();
};

const is_correct = (pressed_side, correct_side) => {
    return (pressed_side === correct_side);
};

const which_side = (keycode) => {
    if (keycode === left_keycode) return side['left'];
    else if (keycode === right_keycode) return side['right'];
    else return undefined;
};

这是我的模板

% extends "global/Page.html" %}
{% load otree static %}


{% block title %}

{% endblock %}

{% block app_scripts %}
    <script>
    /*
    All variables which take their values from django tag should be placed here
    with ES5 format. I.e., use var rather than let or const.

     */
        var round_number = {{ subsession.round_number }};
        var iat_items = {{ iat_items|json }};

        var correct_sides = {{ correct_sides|json }};
        var side = {
            'left': {{ Constants.LEFT }},
            'right': {{ Constants.RIGHT }},
        };
        var left_keycode = {{ Constants.LEFT_KEYCODE }};
        var right_keycode = {{ Constants.RIGHT_KEYCODE }};

        var category = {
            'main': {
                'left': {{ left_main_category|json }},
                'right': {{ right_main_category|json }},
            },
            'sub': {
                'left': {{ left_sub_category|json }},
                'right': {{ right_sub_category|json }},
            }
        };
        var main_items = {{ main_items|json }}
        var sub_items = {{ sub_items|json }}
        var META_KEYCODE = {{ Constants.META_KEYCODE }}
        var left_category_name = {{ left_category_name|json }};
        var right_category_name = {{ right_category_name|json }};
        var current_item;
    </script>
    <script src="{% static 'iat/lib/iat.js' %}?{{ seed_for_refresh_js_cache }}"></script>
{% endblock %}

{% block content %}
    <div class="container">
{#        <div class="row" id="progress">  </div>#}
        <div class="row" id="mainbox">
             <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6"
                  style="" id="left_panel">
                <h2 id = "left_key">
                    {{ Constants.LEFT_KEY_NAME }}
                </h2>
                <div id = "left_category">
                    {% if left_main_category %}
                        <h1 class="keyword main">
                            {{ left_main_category|safe|escape }}
                        </h1>
                        {% if left_sub_category %}
                            <h4>o</h4>
                        <h1 class="keyword sub">
                            {{ left_sub_category|safe|escape }}
                        </h1>
                        {% endif %}
                    {% elif left_sub_category %}
                        <h1 class="keyword sub">
                            {{ left_sub_category|safe|escape }}
                        </h1>
                    {% endif %}
                </div>
            </div>
            <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6" id="right_panel">
                <h2 id = "right_key">
                    {{ Constants.RIGHT_KEY_NAME }}
                </h2>
                <h1 id = "right_category">
                    {% if right_main_category %}
                        <h1 class="keyword main">
                            {{ right_main_category|safe|escape }}
                        </h1>
                        {% if right_sub_category %}
                            <h4>o</h4>
                        <h1 class="keyword sub">
                            {{ right_sub_category|safe|escape }}
                        </h1>
                        {% endif %}
                    {% elif right_sub_category %}
                        <h1 class="keyword sub">
                            {{ right_sub_category|safe|escape }}
                        </h1>
                    {% endif %}
                </h1>
            </div>
        </div>
        <div class="row">
            <div class="wrong_key_box col-lg-12 col-md-12 col-sm-12 col-xs-12">
                     Tipeaste la letra equivocada! <br>
                    En la izquierda. <span class="emph">{{ Constants.LEFT_KEY_NAME }}</span>,
                    En la derecha. <span class='emph'>{{ Constants.RIGHT_KEY_NAME }}</span> Presiona la tecla!
            </div>
        </div>
        <div class="row_keyword">
            <div id="keyword">
                Cargando... Por favor espera.
            </div>
        </div>
        <div class="next_block_box">
             Buen trabajo oprime  <span class="emph">{{ Constants.META_KEY_NAME }}</span> para continuar
        </div>
    </div>
    <div class="wrong_answer_mark">×</div>

    <form id="form">
        <input type="hidden" name="category_table" id="category_table">
        <input type="hidden" name="item_table" id="item_table">
        <input type="hidden" name="keypress_table" id="keypress_table">
        <input type="hidden" name="iat_table" id="iat_table">
    </form>
{% endblock %}

提前致谢

Answer 1

在视口(viewport)外部添加一个可见的输入字段怎么样？

$('body').append("<input type='text' id='dummy'>");
$("#dummy").css({"position":"fixed","left":"120%"});

然后设置触摸事件如下

$(document).on("touchstart",
    () => $(document).find("#dummy").focus()
)

？

<小时/>总结一下，把这个

$( document ).ready(function() {
    $('body').append("<input type='text' id='dummy'>");
    $("#dummy").css({"position":"fixed","left":"120%"});
    $(document).on("touchstart",
        () => $(document).find("#dummy").focus()
    )
});

这里:

<script src="{% static 'iat/lib/iat.js' %}?{{ seed_for_refresh_js_cache }}"></script>
/* HERE */
{% endblock %}