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


Would this work better?

The image is good, but my idea will work if the colors of each cell is unique. So you can identify which cell was touched by evaluating the color of the pixel touched. I see you have 19 cells so you will have to make 19 different colors, right? The geometric figures should also be identifiable if touched. If they are all black, then you will have to use a different way of finding out which one was touched.
The colors doesn’t need to be very different, as example, you can have a cell with these colors, they looks exactly the same to the regular eye, but they are not:
image

2 Likes

Would the different colored cells help the sprites from moving when used on a different device?

Italo's advice refers to a solution where you do not use sprites at all, only variations in the colors of the 'cells' . His method relies on selecting a particular color using the GetBackgroundPixelColor on a Canvas . Use this block to determine the color of the 'cell' chosen. If the choice matches a color you determine , do something with a conditional Block (If..then else if...)
pixelColor (i.e. something if color is R 110;G 0;B255 then do something else if color is R109 ..... then do something else

Perhaps like this

Another example using 'colors' is Redirecting to Google Groups

The only way to ensure the Canvas works perfectly using Sprites is to size the Canvas using pixel dimensions. (Not Automatic or other options) so the x and y of the sprite is always correct regardless of device screen size. Unfortunately your Canvas always uses fixed dimensions and will appear larger or smaller depending on the device it is used on.

Developers sometimes have good results using vertical and horizontal arrangements with a Canvas inside them to keep the sprite positions honest...Italo has said in a post he has done this and might have an example. This is significantly more complex to code.

hope this helps.

2 Likes

Steve got the idea exactly as I thought.

Now this I’m going to explain is in the case you want to use sprites for the cells, not for my initial idea.
I would create the background, then I determine how many cells I will need simultaneously on a single line.
In your case, it seems like you can have 5, or the space of 5 cells laid horizontally.
When the app initializes, make your cells sprites width = canvas width / 5.
Next make your cells sprites height = cell sprites width / 2, that will make the sprites height half of their width
making them look like the rectangles you need for the cells and they will look the same in any device.
After that you will have to create a procedure to place the cells in a path like you have in your game.
But knowing that every cell is 1/5 of the width of your canvas will make the positioning relatively easy.
You only need to increment x position of the cell = x position + cell sprite width.

It really sounds more complex than it is. May be I’m not good at describing it, :grin:
I’ll try to make an example if I can find the time today. If not during the weekend.

But really, I would go with the colors method, you will work a lot less.

1 Like

This is a sample of how to do it with colors, every cell has the blue value corresponding to its number, so when you touch a cell all you need to identify it is the blue value of its color.


Meghan_GameBoard.aia (34.5 KB)

3 Likes


I made a new file that looks similar to the last one I uploaded. These are the color combinations for each cell. Are you saying that every cell should have a distinct blue value?

You can do that if you want, but for simplicity, I only gave it different values to the R and G values.
Then the B values is a correlative number matching the cell number, like:

C1: R000 G255 B001
C2: R104 G205 B002
C3: R166 G255 B003
C4: R171 G255 B004
etc.

I chose the B value for no particular reason, it could be any of the three.


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.

2 Likes

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.

2 Likes

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 App inventor español. Offline. Tutorial. Ejemplos. Instalación. Códigos. Juegos. Curso gratis de App inventor. 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?