Filled TextInput

PennController for IBEX Forums Support Filled TextInput

This topic contains 29 replies, has 6 voices, and was last updated by Avatar apspj 1 week, 5 days ago.

Viewing 15 posts - 16 through 30 (of 30 total)
  • Author
    Posts
  • #6781
    Avatar
    Anna
    Participant

    Hi again,

    I “fixed” this issue by removing the offending input as the error message is displayed:

            .wait(
                 newFunction('dummy', ()=>true).test.is(true)
                // Age
                 .and( getTextInput("age").test.text(/^\d+$/)
                    .failure( newText('errorage', "Bitte tragen Sie Ihr Alter ein."), 
                              getTextInput("age").text("")))  
            )

    Best,
    Anna

    • This reply was modified 5 months, 3 weeks ago by Avatar Anna.
    #6784
    Jeremy
    Jeremy
    Keymaster

    Hi Anna,

    Thank you for the feedback and the suggestion. Which code are you referring to exactly? When I open https://farm.pcibex.net/r/SsqEZD/ and enter “AP” in the “age” textbox and try to click the button (regardless of whether I filled the other fields correctly) I get an error message, which disappears as soon as I start typing again in the textbox. If I click on the button again after typing a 2-digit number in the textbox (and with the other fields correctly filled) then the experiment proceeds.

    Did you include a Key element with callback as suggest in this message to have the error message automatically disappear upon keypress?

    Jeremy

    #6786
    Avatar
    Anna
    Participant

    Hi Jeremy,

    when I open your link, enter into the age text field letters “AP”, letter-string combinations “2a”, special signs like “//” or spaces and try to click the button, then I get the error message (as intended). The error message disappears when I try to change the age but nothing happens to the input itself, i.e. AP, 2a, // or ” ” stay put despite my trying most keys on the keyboard. If it helps, I’m using Firefox version 86.0.1 (64-bit) on Fedora 32.

    Either way, my workaround seems to do the job for this issue, which hopefully it’s unique to my setup.

    Best,
    Anna

    #6787
    Jeremy
    Jeremy
    Keymaster

    Ah, I’m able to reproduce the issue if I select all the text and start typing in the expectation that it will overwrite the selected text: no (printing) character replaces the old text, which simply remains unedited (and still selected) in the input box. However, if I press the backspace key, the content is deleted as it should, and I can start typing successfully again.

    I didn’t notice it before because I just wouldn’t select the text at all; instead, I would place my cursor at the end of the text, press the backspace key twice and start typing. Am I describing the same issue as yours?

    Jeremy

    #6788
    Avatar
    Anna
    Participant

    Hi,

    yes, you are spot on. I tried it out now. If I press backspace I can input new text but overwriting the existing text does not work.

    Best,
    Anna

    #7203
    Avatar
    apspj
    Participant

    Hi, Jeremy.

    Is there a way to create an autocomplete textInput when asking for participants information? I wanted to restrict the options of cities choosen so participants won’t type random names of city but, actually, choose among certain given list. Something like this: https://www.w3schools.com/howto/howto_js_autocomplete.asp

    Thanks,

    Ana.

    • This reply was modified 3 weeks ago by Avatar apspj.
    #7205
    Jeremy
    Jeremy
    Keymaster

    Hi Ana,

    Sure, you’ll need to adapt the javascript code to the specific DOM stucture of a PennController trial, but it’s pretty much the same logic as what you found on w3schools. Here’s an example:

    newTrial(
        newTextInput("country")
            .print()
        ,
        newFunction( ()=>{
            let sug = [];
            let idx = 0;
            const ipt = document.querySelector(".PennController-TextInput-container.PennController-country-container textarea");
            const countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
            const select = s=>{
                ipt.value = s;
                if (ipt.parentElement==div.parentElement)
                    ipt.parentElement.removeChild(div);
            };
            const div = document.createElement("DIV");
            div.classList.add("PennController-suggestions")
            let previousIdx = 0;
            const refreshSug = ()=>{
                if (div.parentElement!=ipt.parentElement) return;
                if (idx!=previousIdx){
                    div.childNodes.forEach((v,i)=>{
                        if (i==idx) {
                            v.style["background-color"] = "pink";
                            v.scrollIntoView({block: "nearest"});
                        }
                        else v.style["background-color"] = "transparent";
                    });
                    previousIdx = idx;
                }
                window.requestAnimationFrame(refreshSug);
            }
            ipt.addEventListener("keydown", e=>{
                if (div.parentElement!=ipt.parentElement) return true;
                if (e.keyCode==40) idx = (idx+1)%sug.length;
                else if (e.keyCode==38) idx = (idx-1 < 0 ? sug.length-1 : idx-1);
                else if (e.keyCode==13) select(sug[idx]);
                else return true;
                e.preventDefault();
                return false;
            })
            ipt.addEventListener("input", ()=>{
                sug = countries.filter(v=>v.match(new RegExp(ipt.value, "i")));
                if (sug.length){
                    div.innerHTML = "";
                    sug.forEach((v,i)=>{
                        const s = document.createElement("SPAN");
                        s.innerText = v;
                        s.addEventListener('mouseenter', ()=>idx=i);
                        s.addEventListener('mousedown', ()=>select(v));
                        div.appendChild(s);
                    });
                    idx = -1;
                    ipt.parentElement.appendChild(div);
                    refreshSug();
                } else if (div.parentElement==ipt.parentElement)
                    ipt.parentElement.removeChild(div);
            });
            ipt.addEventListener("blur", ()=>ipt.parentElement==div.parentElement && ipt.parentElement.removeChild(div));
        }).call()
        ,
        newButton("Hello world")
            .print()
            .wait()
    )

    You'll also need to add those CSS rules to Aesthetics/PennController.css:

    .suggestions {
        position: absolute;
        transform: translateY(-100%);
        display: flex;
        flex-direction: column;
        max-height: 5em;
        overflow-y: scroll;
        background-color: lightgray;
    }

    Let me know if you have questions

    Jeremy

    #7206
    Avatar
    apspj
    Participant

    Hi, Jeremy.

    I see that it works, but, because I’m new to all this programming world, I don’t seem to find the correct place to insert the function within the code I have created so far: https://farm.pcibex.net/r/wntBGE/ When I insert the autocomplete with my list of cities/states in the code, the autocomplete does not work.

    Thanks.

    Ana.

    #7207
    Jeremy
    Jeremy
    Keymaster

    Hi Ana,

    You inserted the code at the right place, there only are two minor problems:

    – your TextInput element is named "inputNasc" so you need to update the querySelector line: const ipt = document.querySelector(".PennController-TextInput-container.PennController-inputNasc-container textarea");

    – you have a wait on the TextInput element before you call the Function element, so the function will only be called after a keypress on Enter, at which point it is too late for the function to have any effect, really; simply add a getTextInput("inputNasc") after your Function element’s call command (don’t forget the separating comma) and attach the wait lines to that getTextInput instead, so that you wait for a keypress after the function has been executed

    Two last notes:

    – you haven’t added the CSS rules to Aesthetics/PennController.css yet—the function will work without them, but the rendering will look very messy (even more so given the long list of cities you have)

    – you might want to change the local.filter line to sug = local.filter(v=>v.match(new RegExp("^"+ipt.value, "i"))); so you only keep the suggestions that start with what’s in the text box, rather than any suggestion that simply contains what’s in the text box anywhere (notice the addition of "^"+)

    Jeremy

    #7208
    Avatar
    apspj
    Participant

    Great! It works perfectly!

    Thanks, Jeremy!

    #7226
    Avatar
    apspj
    Participant

    Hi, Jeremy.

    I would not like to ask participant’s name because of data protection issues. Is there a reliable way to identify each participant? Like assigning a random number or would it be a problem in case two participants eventually start the experiment at the same time?

    Thanks,

    Ana.

    #7231
    Jeremy
    Jeremy
    Keymaster

    Hi Ana,

    The first column in the results file is already (almost) unique to each participant. You only get duplicates when the same browser on the same device is used multiple times to take the experiment

    You can also generate a unique completion code, as described here. Some recruiting platforms also allow you to pass a unique ID as part of the experiment’s URL: here is a guide on how to interface your PCIbex experiment with the recruiting platform Prolific

    Let me know if you have questions

    Jeremy

    #7234
    Avatar
    apspj
    Participant

    Hi, Jeremy.

    Regarding this autocomplete function, is there a way to make the participant choose, obligatorily, one of the cities of the autocomplete list?

    The way it is now: https://farm.pcibex.net/r/wntBGE/ I can type only “Rio”, instead of “Rio de Janeiro”, for instance, press enter and it will be ok, but it should not be ok because I need the complete name of the city (state) as provided in the autocomplete list.
    This is to avoid the fact that some participants may type anything. For now, I was able to insert an error message only when the TextInput is blank, but not when any name of city, apart from those from the list, is typed.

    Thanks a lot,

    Ana.

    #7236
    Avatar
    apspj
    Participant

    I thought of using dropdown, but a dropdown with a huge list of 5.000 and sth cities is not the best option…

    #7237
    Avatar
    apspj
    Participant

    It worked well with dropDown. Sorry for bothering.

    Ana.

Viewing 15 posts - 16 through 30 (of 30 total)

You must be logged in to reply to this topic.