Как сделать доступной клавиатуру в приложении Otree для сотовых - PullRequest
Новая
       53

Как сделать доступной клавиатуру в приложении Otree для сотовых

1 голос
/ 24 марта 2020

Я адаптировал IAT (Задача неявного связывания), я использовал это для эксперимента с компьютерами, но теперь мне нужно внедрить этот IAT на планшетах или сотовых телефонах,

Так выглядит IAT в клеточной оболочке :

enter image description here

Люди застряли на этом экране, потому что они не могут использовать клавиатуру в своей клавиатуре для нажатия E, I или ПРОБЕЛ. Кто-то может дать представление о том, как заставить это работать.

У меня есть следующий код в моделях. 

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 %}

Заранее спасибо

1 Ответ

0 голосов
/ 25 марта 2020

Как насчет добавления видимого поля ввода за пределами области просмотра? 

$('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 %}
...