Vocabulary app - Newbie!

Questions about Thunkable Issues / Bugs
1

Hi there! I’m new to Thunkable. Trying to create a very simple vocabulary app - one of those standard quizes where in each round 4 pictures are shown and you have to select the correct picture when hearing a word. I’ve created a container with four images, connected to google sheets, but have been struggling for a day with the blocks to actually fetch random images from google sheets into the images. ChatGPT seems to provide solutions for no longer existing blocks. I got stuck at step 3 (see below)…Any ideas how to solve this or is there perhaps a ready template out there or a tutorial explaining this? Thanks a lot for your help to this newbie!

:white_check_mark: STEP 1: VARIABLES (You’ve likely already done this)

From the Variables drawer:

  1. initialize app variable allFlashcards to empty list
  2. initialize app variable shuffledList to empty list

:white_check_mark: STEP 2: LOAD DATA FROM GOOGLE SHEETS

From the Blocks view under Control and Data Sources:

blocks

CopyEdit

when FlashcardScreen Opens
  set app variable allFlashcards to list of values in GoogleSheet "YourSheet" in Sheet1 in Default View

Make sure your sheet has a column image_url with direct PNG or JPG links (like ones from imgur.

:white_check_mark: STEP 3: SHUFFLE 4 RANDOM ITEMS

Now you’ll use the new “Shuffle list with quantity” block:

  1. From the Lists drawer, drag:

blocks

CopyEdit

set app variable shuffledList to shuffle list with quantity [4] from list []
  1. You can’t drag app variable directly, so do this:
  • In the Lists drawer, find this block:

blocks

CopyEdit

get list [app variable allFlashcards]
  • Drag it into the empty [] slot in the shuffle block.

:white_check_mark: Final result:

blocks

CopyEdit

set app variable shuffledList to shuffle list with quantity [4] from list [app variable allFlashcards]

:light_bulb: Note: You might need to hover a bit before it drops into the slot. If it’s not snapping, try zooming in or drag slower.

:white_check_mark: STEP 4: SET IMAGES

From the Image drawer, drag and connect:

blocks

CopyEdit

set Image1.Picture to get property "image_url" of item #1 of app variable shuffledList
set Image2.Picture to get property "image_url" of item #2 of app variable shuffledList
set Image3.Picture to get property "image_url" of item #3 of app variable shuffledList
set Image4.Picture to get property "image_url" of item #4 of app variable shuffledList

If get property of item isn’t available, you might see this updated version:

blocks

CopyEdit

get object property "image_url" of item #1 in list [app variable shuffledList]

Either one works.

:white_check_mark: STEP 5 (OPTIONAL): Add a “Next” Button

If you want to show 4 new cards when the user taps a button:

blocks

CopyEdit

when Button1 Click
  set app variable shuffledList to shuffle list with quantity 4 from list [app variable allFlashcards]

  set Image1.Picture to get property "image_url" of item #1 of app variable shuffledList
  set Image2.Picture to ...

:white_check_mark: STEP 6: TROUBLESHOOTING

  • Confirm image URLs are direct links ending in .png, .jpg, etc.
  • Add a debug label to see if data loads:

blocks

CopyEdit

set Label1.Text to join ["Loaded ", length of app variable allFlashcards, " flashcards"]