Chapter 4: Lists and Iteration

BUILD

The following images and sound files are for use in the chapter 4 tutorial of Drag and Drop Code with Thunkable

Video Tutorial

The following 3-part video series accompanies Chapter 4 of Drag and Drop Code with Thunkable. The quiz gets built as in the book using list variables, and then built using a spreadsheet.

  1. Build a slideshow of famous women leaders
  2. Transform the slideshow into a trivia quiz
  3. Make a trivia app from a spreadsheet

CONCEPTUALIZE

DragDropLivePaperbackV2SizeWCover

1. In processing a list, you use an index to keep track of the current position. In determining when you’ve reached the end, it is better to compare the index to the length of the list as opposed to a fixed number like 4, even if your list has 4 items. Explain why.

2. Explain why the code for the “Slideshow” in this chapter, using a list variable, is a better solution than the “if-elseif-else” solution in Chapter 3.

3. Consider the following blocks and assume the picList has the same items as in the sample of this chapter:

The blocks here are different from the correct solution (Figure 4.19) and don’t successfully allow the user to navigate through the pictures. Explain what does happen when the NextButton is clicked the first time, and what happens on successive clicks.

CUSTOMIZE

1. Incorporate video into the slideshow or trivia app by 1) finding a video clip of each of the inspirational women leaders, then 2) adding a Video component to replace the Image on the Screen. The video clips must be .mp3 files and you can either upload them into the app, or reference a URL. You can’t reference a YouTube link: it has to be a URL with a “.mp3” extension at the end.

Hint: you’ll need another variable for the list of video clips.

2. Add a StartButton to the “Slideshow” app that, when clicked, auto-plays the slides, i.e., every few seconds the next picture appears. While the slides are playing, disable the NextButton and the StartButton. Stop the show and re-enable the buttons when the last picture appears.

Hint: use a Timer component.

3. Add a PreviousButton to the “Slideshow” app such that the user can navigate backward through the pictures.

As with the NextButton, the slideshow should “wrap around” when the endpoint is reached, i.e., when the first picture (Parks) is showing and the user clicks PreviousButton, the last picture in the list (Ginsburg) should appear.

4. Rewrite the “Slideshow” app so that it doesn’t “wrap around”, but instead disables the NextButton when the last item appears, and disables the PreviousButton when the first item appears. You can set the Enabled property of a Button to true to enable it, and false when you want it disabled. When a button’s Enabled property is set to false, it is grayed out. Hint: Be sure to take care of re-enabling the buttons when appropriate.

CREATE

1. Create your own trivia or study guide app, but one with both pictures and sound clips. Find your own media on the Internet. Begin by making a copy of the “Trivia” app and removing the media files already in it, then adding your own.

2. Create a “Name that tune” app.


Share your creative apps with your authors and other Drag and Drop coders:

  • Use #DragAndDropCode and #MadeWithThunkable on your social media platforms.