Search code examples
javascriptpythonhtmlotree

How to make available the keyboard on a Otree application for cellular


I adapted a IAT (Implicit Association Task), I used this for an experiment using computers,but now I need to implement this IAT on tablets or cellulars,

This is how the IAT looks in a celullar:

enter image description here

The people get stuck on this screen, because they can't use the keyboard in their celullar to press E, I or SPACE. Someone can give an idea of how to make this works.

I have the next code in the models.

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"

And this is the code that configure the keypresses.

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

This is my template

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

Thanks in advance


Solution

  • What about adding a visible input field outside of the viewport ?

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

    Then set a touch event as follows

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

    ?


    To summarize, put this

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

    here :

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