Button placement(How to use Canvas screen colors to create a Q&A Quiz

I changed the red values to have their own individual value. Do the colors have to correspond to the cell number?

Well, again, that’s up to you. You only need a system that will allow you to identify without any doubt which cell was touched. If this works for you, then it’s fine. If there’s no repetitions, then it should work.

So if I wanted each cell to go to a screen, that has two questions per screen, but only wanted one of the two questions to show each time, what would my blocks look like?

I hope that makes sense.
We want each cell to open a question to answer, and then return to the game board screen to click on the next cell and answer the next question, and so on.

How to make your app make decisions Chapter 18. Programming Your App to Make Decisions

On Screenwith2Questions.Initialize
If thisIsTrue then show questionA else then show questionB

Questions appear in a Label? so questionALabel.Visible = true if you want it visible, = false if you want to hide.

thisIsTrue is your criteria for displaying the appropriate question. Use a random block to select between them or use a value in a variable etc.

Try some blocks Megan and show us what you tried.


Where on the blocks shown, would I indicate which color value to add the if then command to?

This will give you a jumpstart to try your own code. You will need to keep filling these with all the cells values.
Try things and see how far you can go.


I’ve got this so far, so where would I need to place the If then control to make only one question visible per each cell that is selected?

and I expect you are already in trouble.

Here is a Reality check:

You are anticipating having 20 or 30 screens. After about ten screens, the app will become unstable.

This example uses a virtual screens to show your questions when you touch a colored block (simulated with buttons in this example). You did not indicate what your criteria for selecting the question to display or an alternate question so I assumed they would appear randomly.

I set up your questions as a listoflists 1a/1b; 2a/2b and show how to do four sets of questions (but only provided two simulated ‘touches’ using Buttons … A and B…

Code this example as a separate Project to test the concept Megan. Place two buttons, a VerticalArrangement (initially setting Visible to false) and create the dummy list of questions and the two Procedures. Can you do it and test the example app. Does it do what you want? Is this advice sufficient to get you coding on your own?

You will need to do more coding in your actual app, but need code similar to this example. The Canvas.Touched example Block below might work.

I don’t have an image of your current Canvas background image so I can not test the example code. You should be able to use this code with your current Canvas (instead of using the button ‘simulation’). Does the Touched work?

Can you do this differently? Yes, there are many different possibilities.

Here are some resources to help you learn to use the AI2 tools A very good way to learn App Inventor is to read the free Inventor’s Manual here in the AI2 free online eBook http://www.appinventor.org/book2 … the links are at the bottom of the Web page. The book ‘teaches’ users how to program with AI2 blocks.

There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro and the aia files for the projects in the book are here: http://www.appinventor.org/bookFiles

How to do a lot of basic things with App Inventor are described here: http://www.appinventor.org/content/howDoYou/eventHandling .

Also look here http://kio4.com/appinventor/index.htm and here http://www.imagnity.com/tutorial-index/ for more tutorials.

I already ran into that problem, and that is why I was trying to have two/three questions per screen and only have one question visible at a time per each cell that is clicked on the canvas. I have 2 screens so far, so that leaves 8 screens left for a total of 19 questions. If I wanted multiple choice questions, would making a list still be the best way to go about it?

OK. Have it your way, You do not need 8 screens or 19 or whatever. The example provided a way to simplify your app. Did you code the example and try it? You can do something similar with multiple screens. :frowning:

Why do I ask that silly question (did you do the example) ? It shows how important list are answering " If I wanted multiple choice questions, would making a list still be the best way to go about it?" … I would recommend using a List. See the multiple choice quiz tutorials below.

Have you done any tutorial that shows how to build a quiz? Try QuizMe or MultipleChoice by Taifun or Chapter 8. President’s Quiz

Do you think you should?

1 Like

I’m running into problems with my picture and questions loading on my screen. What is my code missing?

I have an app that is supposed to be like a board game combined with a quiz feature. On my game board screen, you need to click on each cell of the board to open a screen with my list of questions, answers, and pictures. There is a back button to return to the game board screen after each question to click on another cell and open a new question. However, the code pictured is what I have for the screen with the questions and the questions are not changing. What is my code missing?

@Meghan_Menasco You might want to use the “Download Blocks as Image” option in the context (right-click) menu to download the whole blocks workspace to post here.

I was trying to include as much as the code as possible, but I have my list for the Image, Questions, and Answers. I also have a block just like the one pictured but for the question list as well. However, nothing shows on my screen except for the labels.

Oh my…your way isn’t working Meghan.

Earlier, I said “OK. Have it your way, You do not need 8 screens or 19 or whatever. The example provided a way to simplify your app. Did you code the example and try it? You can do something similar with multiple screens.” and you did but it does not work.

You provided an image of PART of what you are doing and hope to get some advice. Here is
some advice:


  • Do you know why you see red x’s above? Fix this and you might fix some of your problem.
  • Why do you have two instances of Screen3.Initialize?
  • How do you instantiate questionsList and QuestionImage lists on Screen3. Are you using a TinyDB or what? Remember, developers must transfer common variables from screen to screen when switching screens and using data from a previous screen (something you do not need to do if you use virtual screens).
  • In addition to the probable errors pointed out above, your code snippet is insufficient to offer specific advice Megan. Sorry. What kind of problems are you seeing with your picture and questions?

There are better ways to copy images of your Blocks Megan:


How to capture an image of your Blocks screen or your emulator

On Windows

Ctr + PrtScn keyboard keys pressed at same time copies an image of the screen to the Windows Clipboard. Open Paint and save the image by putting the contents of the clipboard into Paint. Save the image to your desktop or another folder as a png or jpg file.

On Win 7 and above you can use the Snipping tool (in Accessories) to capture an image of blocks directly from the screen. Capture what you need and Save the file as to a folder on your PC. The tool can be used to selectively capture an area of your screen that you select. https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots

On a Mac, command-shift-3 (whole-screen) or command-shift-4 (drag a rectangle) to take a screenshot. The image file will appear on your desktop.

Both Windows and Mac users also can capture an image of ALL you blocks from the Blocks screen. Right click a white area of the Blocks screen; a menu appears; select Download Blocks Image . This downloads an image of all your blocks to your PC downloads folder.

The example shows a project with only a few blocks. You can drag the Block image to the Forum input window.


Capture the Screen from a device.

This procedure varies depending on the device.

Perhaps press the Power button and the Audio Increase button simultaneously or

Press the Home button plus the Power button simultaneously or you can

Google Android screen capture xxxx , where xxx is the model of your phone or tablet and get Web advice.

Once you capture the image of the screen, the image will most likely be in your Gallery, probably in a folder called ScreenCaptures. You can eMail the image to your PC,then download the attachment Once the screen capture is on your desktop, you can post it in the forum.



I deleted the block with the QuestionImage command and the red x is gone. I was watching the Presidents Quiz and trying to replicate the code and adjust it to work for my app. However, the design of my app is different and now I am struggling to find a new way for one question to appear each time a cell is clicked. Should I delete my screen 3 (the one I am currently trying to show the questions on) and try the virtual screens instead. Or is there a different way to make it work?

Yes, that got rid of the red x; it did not get rid of the real problem. Now you tell the app to start Screen3 with the QuestionLabel but don’t have the QuestionImage. You could move the QuestionImage code to immediately under the QuestionLabel code (as indicated with a black arrow on the image previously shared / provided. You populate the QuestionImage list and the questionsList lists on Screen3 .

Should you delete screen3? That is up to you Megan. Your app could work with multiple screens.

Fix the Screen3.Initialize and see what happens when you press the answer Button. How successful you will be depends whether the AnswerTextBox is on Screen3 or somewhere else.

To ensure the questions change, ensure that you increment the Indices as shown
meghanIssues2 based on some criteria. Where does your global Index come from. At the moment it always appears to be 1 . (perhaps based on which cell was touched in a previous screen) To get that information, you need a TinyDB or use another method to pass values from the game screen to the question screen.

Does that work?

Would the TInyDB be placed on both screen 2 (game board) and screen 3 (questions)? I’m currently watching some youtube videos on how to use them. It’s just difficult to apply it to my app.
This is what my screen 2 looks like right now.

Do I need to add something to the if statements to specify which question is opened?

Yes. I don’t know exactly but it appears that when your TouchedRedValue is 91, then the Index on Screen3 should be 1; when it is 8, then the Index on Screen3 should be 2; etc.

When TouchedRedValue is a value, you should pass a corresponding question value (index) to Screen3 using a TinyDB to specify which question is opened. Yes, place a TinyDB control on both Screen2 and Screen3 (the control instances share information).

Try some blocks; you are making progress. :slight_smile:

If you use virtual screens, and have the information you place on Screen2 and Screen3 on just one screen (perhaps Screen2) you might find it is actually easier to code (see my earlier example); however you can do it this way and learn some useful skills.

When I try the first way you suggested, do I need to delete the global index to 1 block that I currently have on screen3?