Filled TextInput

[Anna]

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 2 years, 5 months ago by Anna.

[Jeremy]

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

[Anna]

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

[Jeremy]

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

[Anna]

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

[apspj]

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 2 years ago by apspj.

[Jeremy]

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

[apspj]

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.

[Jeremy]

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

[apspj]

Great! It works perfectly!

Thanks, Jeremy!

[apspj]

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.

[Jeremy]

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

[apspj]

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.

[apspj]

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

[apspj]

It worked well with dropDown. Sorry for bothering.

Ana.

[Author]

Posts