2

Estoy intentando hacer que dos botones funcionen como letras, es decir que cuando presione en el botón con la letra E sea como si hubiera presionada la letra E y que cuando presione la letra I sea como si hubiera presionado la tecla I, estoy intentando correr una tarea de asociación implícita y es necesario correrla en tablets por el problema del coronavirus.

introducir la descripción de la imagen aquí

Esta es la imagen de como se ve la aplicación, la letra E y I y el espacio hacaen que cambien de página, es decir que cuando oprimo E la página debe cambiar. Pero si se fijan en la parte de abajo lo qua pase es que en el espacio se escriben las letras y la página no pasa.

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"

Y este es el código que configura los 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;
};

Es el código del template

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

No tengo idea de cómo hacer para que cada click se asocie con una letra para que el programa me guarde las respuestas.

3
  • Averigua sobre los eventos onClick y onkeyup de javascript.
    – Shassain
    el 24 mar. 2020 a las 23:40
  • Necesitamos un ejemplo mínimo y verificable de tu código amigo, edita por favor y agrega lo que llevas, además explica mejor el resultado deseado
    – BetaM
    el 24 mar. 2020 a las 23:40
  • 1
    Hola @BetaM creo que ya puse el código de lo que estoy haciendo, tal vez así me puedas ayudar. el 28 mar. 2020 a las 2:50

1 respuesta 1

1

Lo puedes hacer utilizando data-attribute. Si quieres un ejemplo con JQuery me dices, espero te sirva.

let btn1 = document.getElementById('btn1')
let btn2 = document.getElementById('btn2')
let btn3 = document.getElementById('btn3')
let input = document.getElementById('texto')

let getLetra = function(){
  let letra = this.dataset.letra

  input.value += letra
}

btn1.addEventListener("click", getLetra);
btn2.addEventListener("click", getLetra);
btn3.addEventListener("click", getLetra);


const log = document.getElementById('log');

document.addEventListener('keypress', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
button{
  height:100px;
  width:100px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
  <body>
    <button data-letra="A" id="btn1">A</button>
    <button data-letra="B" id="btn2">B</button>
    <button data-letra="C" id="btn3">C</button>


    <input type="text" id="texto">
    
    <p>Presiona una tecla.</p>
<p id="log"></p>
  </body>
</html>

3
  • Michas gracias @Aneudy, el problema acá es que el botón debe funcionar como si fuera una letra del teclado real porque a esas tres letras del teclado tengo asociado otras funciones, lo que tú propones guarda las letras pero no activa las funciones de fondo. Por ejemplo el espacio me ayuda a pasar de página pero con los botones simplemente me genera un espacio y no pasa de página. Quedo atento a si me puedes ayudar el 25 mar. 2020 a las 15:51
  • Oohh ya entendí lo que necesitas, he modificado el código, revísalo a ver si esto te sirve! Saludos! el 26 mar. 2020 a las 20:44
  • Hola @Aneudy Abreu, intente con el código que me sugeriste y sigue pasando lo mismo. Intenta ponerte un screenshot pero stack no me dejo. el 28 mar. 2020 a las 2:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.