PennController for IBEX › Forums › Support › Filled TextInput
Tagged: TextInput Element
- This topic has 29 replies, 6 voices, and was last updated 2 years, 11 months ago by
apspj.
-
AuthorPosts
-
March 30, 2021 at 5:29 am #6781
Anna
ParticipantHi 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 3 years, 5 months ago by
Anna.
March 30, 2021 at 2:04 pm #6784Jeremy
KeymasterHi 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
March 30, 2021 at 2:55 pm #6786Anna
ParticipantHi 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,
AnnaMarch 30, 2021 at 3:51 pm #6787Jeremy
KeymasterAh, 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
March 30, 2021 at 4:15 pm #6788Anna
ParticipantHi,
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,
AnnaAugust 29, 2021 at 8:15 pm #7203apspj
ParticipantHi, 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 years ago by
apspj.
August 30, 2021 at 10:51 am #7205Jeremy
KeymasterHi 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
August 30, 2021 at 5:01 pm #7206apspj
ParticipantHi, 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.
August 30, 2021 at 5:49 pm #7207Jeremy
KeymasterHi 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 agetTextInput("inputNasc")
after your Function element’scall
command (don’t forget the separating comma) and attach thewait
lines to thatgetTextInput
instead, so that you wait for a keypress after the function has been executedTwo 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 tosug = 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
August 30, 2021 at 6:31 pm #7208apspj
ParticipantGreat! It works perfectly!
Thanks, Jeremy!
September 5, 2021 at 6:08 pm #7226apspj
ParticipantHi, 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.
September 6, 2021 at 1:51 pm #7231Jeremy
KeymasterHi 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
September 6, 2021 at 9:04 pm #7234apspj
ParticipantHi, 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.
September 8, 2021 at 11:34 am #7236apspj
ParticipantI thought of using dropdown, but a dropdown with a huge list of 5.000 and sth cities is not the best option…
September 8, 2021 at 11:46 am #7237apspj
ParticipantIt worked well with dropDown. Sorry for bothering.
Ana.
-
This reply was modified 3 years, 5 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.