Mini-games are a great way to learn how to use Thunkable. There are a lot of easy games that you can Thunk, such as tic tac toe, rock paper scissors, and many more.
Now, I’d like to share a tutorial on making a funny fill-in app using JUST 24 BLOCKS!
What are Funny Fill-Ins?
Funny fill-ins are book-based game in which there is a story with lots of blanks. Each of these blanks has a hint, such as ‘adverb’ or ‘noun’ or ‘large number’. One person reads out these hints to a second person, and Person 2 gives an example of these hints, and Player 1 fills them in the blanks. The output is a hilarious story that does not make sense.
For example, I have a funny-fill in which goes like this:
Once, during the (season) break, I decided to go on a vacation to (country). Since the average temperature there was (large number) Celsius, I decided to pack lots of (type of clothing, plural). Since it was a long trip in a (transport), I also packed some (food, plural) to eat. Once I reached my destination, I looked around for my (place stayed at during a vacation), and saw a sign bearing the name of my stay hanging on the door of a run-down (type of a building). I was (adjective of feeling), but decided to lug my suitcase and (noun) up into it. It was quite late and I had no choice but to look for a better hotel the next day. The bed was really (adjective), and the food was also (adjective)! I slept (adverb ending in ly), and the next morning, got up to find my room crowded with (animal, plural). I (verb of sound, past tense), and (verb, past tense) out of the room. I was in no mood to stay another day, so I packed my bags and booked a ticket via (transport) home.
Now for all these hints in the brackets, Player 2 might have given these answers:
Season= winter
Country= Singapore
Large Number= 8 million
Type of clothing, plural= socks
Transport= bus
Food, plural= biscuits
Place stayed at during a vacation= inn
Type of building= shack
Adjective of feeling= angry
Noun= cat
Adjective= rude
Adjective= friendly
Adverb ending in -ly= naughtily
Animal, plural= hippos
Verb of sound, past tense= sang
Verb, past tense= flew
Transport= cruise ship
So, now we have our final funny story:
Once, during the winter break, I decided to go on a vacation to Singapore. Since the average temperature there was 8 million Celsius, I decided to pack lots of socks. Since it was a long trip in a bus, I also packed some biscuits to eat. Once I reached my destination, I looked around for my inn, and saw a sign bearing the name of my stay hanging on the door of a run-down shack. I was angry, but decided to lug my suitcase and cat up into it. It was quite late and I had no choice but to look for a better hotel the next day. The bed was really rude, and the food was also friendly! I slept naughtily, and the next morning, got up to find my room crowded with hippos. I sang, and flew out of the room. I was in no mood to stay another day, so I packed my bags and booked a ticket via cruise ship home.
I decided to make this an app, and here I am, with this app accomplished in no more than 24 blocks.
Our Story
For my app, I decided to use a funny fill-in called Cookie Confusion from National Geographic Kids.
Design
The design is fairly simple. We need to create a screen, and set it to ‘scrollable’. Then, create a column with the width set to ‘fill container’ and the height set to ‘fill contents’. The margin is 5 all around. Set the horizontal alignment to ‘left’, and vertical alignment to ‘center’. Inside the column, add a label with font size 18, and set its text to the first hint in your funny fill-in story. In my case, with the Cookie Confusion story, it is ‘Celebrity’. Under the label, add a text-input with the the absolute height as 32, and the relative width as 99%. My final output is this:
Keep duplicating this column and changing the ‘hint’ text until you have one column and one input for every hint.
You do not need to set an ID for any of the inputs or labels as we are using the ‘Any Component blocks’.
Underneath your input-columns, add a button called ‘ButtonGenerate’, that the users can click when they have filled in all the fields.
And lastly, add a label at the bottom of your screen for displaying our outputted story, and name it as ‘LabelStory’ or whatever you want.
CODE
First, initialize a variable ‘fill after’, to a ‘make list from text block’. Set the delimiter as % or $ or a symbol or character that your story will definitely NOT contain. Now, what do we include in this block? This is a list to include each part of the story before a hint. In my case, I should copy each sentence before a bolded word, which is what the user has inputted:
Don’t forget to add a % after each part!
After all this, my variable fill after now contains every single part of my story excluding the hints, separated by a %. In case there’s only a space between two hints, such as in
, then you must include that space too.
When you’re done with the list from text, initialize another variable called ‘final story’.
Now, what we want to do is when the button GENERATE is clicked, we want to join each part of the story with the corresponding answer for the hint that the user has filled in. For this, we need a for loop and the any component blocks.
We want to add on to whatever part of the story we have already finished. That’s why we use the join block to connect variable 'final story to our new joined part. Each input’s answer goes after a certain part of your ‘fill after’ variable. This is why it is essential that you create all your input columns in the order that the answers are required. The final count of our loop is 24, because we have 24 sentences in our fill after variable. If you don’t know how many you have, find out the length, by creating 2 labels, and using this:
Variable fill after should be 1 more than the number of inputs on your screen.
Delete this code once you’re done, and set the loop end to the number of inputs.
The 2nd and 3rd parts in our join loop:
We need the get the correct sentence number, and since we’re using a for loop, it will be ‘i’.
Then, we need to get the hint-answer for that specific sentence, so we need to get the text from the 'i’th input.
Now, set Label Story’s text to final story variable. And that’s done!
You can test out my Cookie Confusion app here. In case you want to look at the code, it’s on screen FFI CC(stands for Funny Fill-In Cookie Confusion).
Do try this out and share your versions of it here, I’d love to see them.
Happy Thunking!