Coding Challenge 1: Make an Image Gallery

Build an Image Gallery

Coding Challenge 1

This challenge will help you earn points in the following judging rubric lines: "App Function", "User Experience and Design", "Technical Learning", and "Code Complexity".

To complete this challenge, you will...

  • Use what you have learned about event handlers and user interface
  • Create your own image gallery app

Key Terms

  • Pseudocode - writing out an algorithm in plain language, instead of in code

Challenge: Make an Image Gallery

Create an app that allows someone to view at least three different pictures. The app should have a "gallery" feel, so the user should be able to view each picture, one at a time.


 

Welcome to your first coding challenge! This is a checkpoint for you to practice what you have learned so far. We recommend you try solving this challenge with App Inventor, Thunkable, Swift, Thunkable Classic or Java (as those are the languages you can submit to our competition in)! Below are the instructions that highlight App Inventor and Thunkable.

Here are different solutions to help you get inspired!

Activity: Write Pseudocode

Before you start coding, it will be helpful to write out some pseudocode to describe what  you want your app to do. Remember that pseudocode is  writing out an algorithm in plain language, instead of in code. Here’s an example that we wrote out before creating our solution.

  • There will be 3 buttons on the screen
  • When a button is clicked, an image appears
  • When another button is clicked, a different image appears

One Possible Solution - App Inventor

If you're getting stuck, you can take a peek at the solution here. Give it a shot before you look though!

One Possible Solution - Thunkable

If you're getting stuck, you can take a peek at the solution here. Give it a shot before you look though!

Reflection

You just completed your first coding challenge! Here are three reflection questions for you to consider with your team.

  • Can you suggest any improvements that could be made to slideshow app that would make it more fun and useful?
  • How might you redesign this app for a user that did not have the ability to touch a button?
  • Is it possible to add a picture to your slideshow by taking a picture with the phone’s camera? What App Inventor programming features would you need? How do you learn to go build that into your app?  

Hint: Do a google search and share with your team what you discover.

Additional Resources

 

Using Multiple Screens in App Inventor

You may have noticed that the App Inventor solution does not rely on creating multiple screens. App Inventor makes it easy to add more screens to an app, but you’ll need to be cautious about adding too many screens. This is because using a lot of screens in App Inventor uses a lot of memory. Once you create more than 10 screens, it is possible that your app won’t work anymore.

Instead of adding more screens, you should find parts of your user interface that you can reuse, just like the solution to this code challenge. Keep this in mind when designing your app. You will also get to see more examples of how to reuse parts of your user interface in the other code challenges.