Calling specific variables from specific columns in an CSV file and displaying

[veronica stanley-hooper]

I am creating a multiplication game for my students. I have a CSV file (see attachment) with all of the multiplication facts that I want my students to practice. Column One of the file has the first multiple. Column Two contains the second multiple. Column Three contains the product. I would like the game to select a random row from the CSV list then display an image in a specific place on the screen for each variable in the row (see screenshot of game screen). The students will fling the multiplication sign at the multiples (when both are hit then the multiplication sign disappears) then fling the equals sign at the product. 

I have the programming for the 'game' done. (see screenshot)

But I do not know how to:

1. Import the CSV file 

2. Which blocks to use to call up the variables

3. Attached the variables to image files

4. Put the images in specific places on the screen (see screenshot)

I have searched the forums and online for help and found nothing for my specific needs. Any help is appreciated.

[SteveJG]

The answers to most of these questions could be found either in the many tutorials or by using the Search for messages block at the top of this page.  Part of the difficulty in finding appropriate material might be in not knowing the terminology to search.   Here is some help:

1. Import the CSV file   What you show is not a csv file; it is a spreadsheet with the values you want to use to create a comma separated value file.  Some spreadsheets have the ability to export these values to a csv text file.  Export the file and give it a name.   Numbers.txt or Numbers.csv; App Inventor will not care.  Here you have several possible routes.  The simplest is to just add the Numbers.csv to your Media.   This works great if Numbers.csv is the only resource file the app will ever need.  If you need to update the file occasionally, you need to use another method.  There are several other ways, all more complicated in which you would use the File control.

2. Which blocks to use to call up the variables .  Your app your option.  To effectively use the numbers.csv, the app should convert the csv to a List to make the information available to your app. Create a List of csv values.  Hint: you  need the list from csv table   or list from csv row block .  You will benefit most from this structure if you create your csv with \n control characters as the final 'character' in your csv row so your csv can be loaded as  a table.   Obviously there is a lot to do here so look in the Forum for Lists by Saj  and 

• Chapter 19. Programming Lists of Data

Once you have the List, you can select values from any of the columns using two 

select list item list  

                    index   where the index in one of the blocks will be 'your column. and the other block will be the row.

3. Attached the variables to image files  .  This probably can be done lots of ways.  It depends on how you set up your list, the image files (which you will probably place and upload to Media)   and other factors.   You have several two digit numbers in your csv .. think about this a bit because you might need an image of each number shown.  That is quite a few images and that you will assign to perhaps four or more  ImageSprites that will be either the factors or the answer.

4. Put the images in specific places on the screen (see screenshot)  

• Chapter 17. Creating Animated Apps

describes how the Canvas is constructed and how to place/move objects if you use a Canvas. You can place ImageSprite using Canvas screen coordinadtes.  Then you perhaps place the images in ImageSprites  If you do not use a canvas you could use a Table arrangement (layout) to use the Image controls. 

Others may have other suggestions.  You will have to do all of these things.  If I were doing this, I would create several discrete mini projects .. to learn each of the four 'skills'

and to test in an uncluttered environment.  Save copies.. and perhaps aia files.    Your app is complicated and soon to become more complicated

   Have you done  MoleMash for App Inventor 2

In the arcade game Whac-a-Mole TM , a "mole" pops up at random positions on a playing field, and the user score points by hitting the mole with a mallet. This is a similar game that uses the touchscreen. This tutorial introduces: image sprites, timers, and procedures.   pOr MoleMash 2?

If you get into difficulty, ask another question.  It is very difficult to answer multiple questions or give advice to lots of different activities.

Regards,

Steve

[veronica stanley-hooper]

Thank you Steve. I have read through those materials and have also gone through the relevant tutorials. The specific information that I need regarding the CSV (I understand my pic was from excel. My actual CSV has comma separated values.) How do I call up a specific variable from a specific row and column using the app inventor 2 blocks? My head is just swimming. I have created mini projects based on the tutorials but none of the tutorials I have found pull an entire row of variables and place them in specific areas.

I am very new to App inventor and programming in general. Specific step by step would be helpful.

Also, regarding the pics. I was considering placing  "number_pic_name.png" (referencing the specific number) in for each value in my CSV. Do you think this is a good way to call up the image variables for he multiples and products. (Yes there are many number file pics that will be needed, do you think this will be a loading problem?)

Thanks,

Veronica 

[SteveJG]

third row second column  of the table list called numberList   yields 3

Now you do it with the csv you saved.

[veronica stanley-hooper]

Steve....excellent! Thank you! I understand your example. I have 2 further questions.
1. Do I have to list all of my multiple/product facts in the global variable text box or is there a way to just call up my CSV file?

2. Do you think that listing my multiple/product facts with their respective .png instead of just raw numbers would be a better way to call up the images needed?

Thanks so much! You are a savior!

[SteveJG]

1) You do not have to have to place the contents of the csv you generated from your Excel spreadsheet in a text box as shown in the example.  Using the text box is a simple way to define a csv for an example.  Consider uploading your csv into Media.  Once the csv is in Media , populate the  global csv with the csv file using the File control (instead of using a text box) ..something like shown here where the csv is called fileCSVSpreadsheet.csv .

You might want to read about the File control   http://ai2.appinventor.mit.edu/reference/components/storage.html#File  

The code in button 6 calls the content of a random row in the numberList and then parses the row to produce the text.  It might be useful to you. Shown, just to show how a user can manipulate the csv data once the data is placed in a List.

2)  What you say is possible and would work.  1.png, 2.png, 3.png  etc. You might need to put that image names in "  ", like "1.png", "2.png", "3.png."  I would run a test case Project using a few images loaded to Media and an Image control. You could also just use  1,2,3 and 'add' the png suffix when you want to assign an image using a join block.

--Steve

[veronica stanley-hooper]

Finallly had a few minutes to work on this. AND I got it to work using your example. Thank you so much. I really appreciate your patience. Now to work on getting the images to be called from the CSV file and incorporate the game coding! Thank you again. I am really looking forward to using this app with my students. :)