Кнопки, которые работают как клавиши

Question

Я пытаюсь опубликовать это в группе, но, видимо, я не могу этого сделать. Можете ли вы помочь мне, пожалуйста?

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

Я пытаюсь сделать клавиатуру для планшетов, но я хочу изменить некоторые вещи для целлюлярных приложений.

Так выглядит IAT в цвете целлюлара

Я положил на три кнопки букву А, букву I и пробел.

Мне нужно эмулировать букву, чтобы убедиться, что участники могут go через Например, приложение «Пробел» должно перейти на следующую страницу до того, как участники прочитают инструкции (так работает приложение при использовании компьютеров, например, когда я нажимаю клавишу пробела), но вместо этого, когда я делаю нажимайте на кнопки, я получаю букву или пробел, и приложение не запускается. Я попытался использовать режим отладки для Google Devtools, и приложение отлично работает в сотовой сети, когда я нажимаю на клавиатуре на моем компьютере.

Может кто-нибудь дать мне представление о том, как заставить работать эти кнопки?

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

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>


document.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 69) {
    document.getElementById("ButE").click();
}
});

document.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 73) {
    document.getElementById("ButI").click();
}
});

document.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 32) {
    document.getElementById("ButSpace").click();
}
});


    function AsignaValor(Nombre,Valor){
var Campo = document.getElementById(Nombre);
if(Valor==""){
    Campo.value="";
}else{
    if(Campo.value!=""){
        Campo.value = Campo.value + Valor;
    }else{
        Campo.value = Valor;
    }
}
}
</script>


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

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

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
<body>
    <div align="center" valing="center"><br><br>
        <table cellpadding="2" cellspacing="0">
            <tr>
                <input style="width:150px; border: 0" id="caja" readonly/>
            </tr>
            <tr>
              <td>
               <input type="button" value="E" id="ButE" onclick="AsignaValor('caja', 'E')" />   

               <input type="button" value="ESPACIO" id="ButSpace" onclick="AsignaValor('caja', ' ')" /> 

               <input type="button" value="I" id="ButI" onclick="AsignaValor('caja', 'I')" />      
               </td>  
            </tr>

        </table>
    </div>
</body>