Hello Makers !
I’m learning Bubble and to do so i tried making the now famous Wordle with Bubble.
I’m getting close but i’m wondering how to set focus to a specific reusable element? I created a row as a reusable element so that i don’t need to repeat it 6 times. It works but the problem is that on page load, the focus is put on any row randomly. How can i tell Bubble to start with the 1st row, and then go to the next ?
Also, is there a way to go back to previous input when hitting the “delete key”?
hi, I’m also building a Wordle clone in Bubble and will be doing some write ups of the process on my newsletter over at bubblebuilder.substack.com. I’ve just started work on it, so I don’t have an answer to your question just yet.
In the mean time, here is a link about reusables, just because it’s good explainer of the pros and cons. I wasn’t planning to make use of them for this project.
also I don’t think I’ll come across the focus problem, as each of the letter placeholders in the top grid will probably be individually referenceable by workflow actions… will see, yet to get to that point.
Hi @marty.lindsay !
Thanks for your reply. I will have a look at the links you sent me. And yes i used the reusable elements because i was hoping i wouldn’t need to do the same workflows 6 times I will give it a second thought.
The other problems i got was to go back to the previous input when pressing the delete button.
And for the database, i’m not quite sure how to import the dictionnary reference list of words. Do we have to import it or can we directly reference a website like Five Letter Words: 660+ Common 5 Letter Words in English • 7ESL for instance ?
Anyway, i would be happy to see how you handle this Wordle project when you’re done !
Keep me updated
Aurelien
PS : here is what i have for the moment (u can use words POLIE, EOLES and PERDU all in capital letter to see the changes and the right word is SUPER) : Bubble | No-code apps
nice.
for "go back to the previous input " … I’m actually not going to use inputs for the visible character slots… the original wordle doesn’t have fields in which you can click and type… it has an onscreen keyboard for clicking items , and it also supports use of the keyboard, which then seems to populate each character slot visually…
I’m wondering about having a separate [hidden] input for each row which can intercept the keyboard presses… still thinking about that. I think ideally there would be 6 of these, and this would support the backspace. then workflow actions to manage the visual side of populating individual text elements so that shows what was typed.
Yes i also thought about this in the beginning, to do an 5 letters input and to draw square on top of it so that we can use the back space, but i couldnt figure out how to compare only with letter afterwards… i don’t know if thats clear
I gave it another try this after noon, u can check it here. Now it works kind of good, except for the delete button. The word to find is still “SUPER”, and listed words are “ZEBRA, CASES, POOL”. If you put other words, it should say not in the list Let me know what you think : https://wordletest2.bubbleapps.io/version-test
Hey, so i used the plugin “Mouse and keyboard interaction”, and now you can use the backspace to correct your letters So i’m kind of done ! I did only 3 rows because the rest would be only repeating, and unfortunately i could find a way to copy with workflows (it only copy the sates but not the workflows with the new copied elements…). It was nice doing this project !
Hey, so here is my last attempt at a Wordle look alike. I tried many ways to make a virtual keyboard but couldn’t find something really satisfying. Now i used the database so that when a key is pressed, the corresponding letter is stored. And then, square number 1 is related to data #1, square number 2 to data #2 etc, until 30. But the problem is it can only be one player at a time, otherwise it doesnt work. ahah And to change the word, you need to change the conditions for every 30 squares… So quite a challenge to make it perfect, not sure it’s possible with 100% nocode. Curious to see how you takle it !
Looks good.
I’m doing some work this weekend on the logic of my one.
I think I’ll use states rather than dB storage. I think states are per session and they also have better ui performance.
Lots of challenges in this build which makes it interesting.
Hey @marty.lindsay ! How is it going with your logic? I gave it a second thought with states and i’m super close to the original now
I did only 3 rows because it’s quite long and repetitive to do 6, and also, only the 1st row is fully fonctionnal (with green / yellow, letter of the keybord changing colors when not in the word, etc).
looking good
I’m making progress, and have been focussing on getting the input working from both the physical keyboard input and the onscreen keyboard causing the same result, which I’ve got working with a little javascript and the toolbox plugin. Next will be adding support for the delete key, then on to multi row support, then adding a list of valid words, then other things like transition effects.
Adding content to my write up too, so it’s been a little slow…
and will be doing some write ups of the process on my newsletter over at 
