Scratch Card App in App Inventor

Hello friends and welcome to Obsidian Soft

Today, I am going to show you how to make a scratch card app in MIT App Inventor.

In a scratch card app, you can scratch a card to find the hidden picture beneath it. Nowadays, this is used to make money-earning apps so you can build on this scratch card app to make earning apps or you can even make a children’s app to make them guess the hidden picture below by scratching the screen in a given time. First of all, open up MIT App Inventor.  Start a new project and call it ScratchCard.Upload vertical pictures that you want to hide beneath the scratch card. For this tutorial, I am using 3 vertical scenery pictures that I will randomly hide beneath 3 differently colored scratch cards. I will also be uploading a fun logo picture in this app that I will display on my screen 1 which is basically the menu screen. 

For screen1 properties, make align horizontal and align vertical both center and screen orientation portrait.

Drag and drop an image from the user interface.

Use the uploaded logo as the picture for this image.

Drag and drop a horizontal arrangement from Layout.

Make height 20% and align horizontal and align vertical both center.

Drag and drop a button from the user interface. Rename to greenCardBtn. Make the width 20%, change the text to “Green”, and make the background color green.

Duplicate the button by selecting it and pressing Ctrl +C & Ctrl + V for Windows and Command + C & Command + V for MacOS.

Rename to blueCardBtn and change the background color to blue color and text on it to “Blue”. Again, duplicate the blue card button and rename to yellowCardBtn, and change it accordingly.

Now, we need to open our main card screen when a color button is pressed.

So, first of all, add a new screen and call it cardScreen. The designer view for the new screen will open up but go back to screen1 and then, go to the blocks section.

Whenever a color button is pressed, open the card Screen by using a block from Control called Open Another screen block with start Value. Pass the color name as a text in the start value.

Now go back to the designer view of the cardScreen.

Change screen orientation to portrait. Change the title to Scratch the card! For cardScreen’s screen properties, make align horizontal and align vertical both center.


Drag and drop canvas from drawing and animation and make height and width both fill parent.

Drag a button from the User interface.

Rename it to backBtn. Make the background color red and change the text to Back.

Now, go to the blocks section of cardScreen.

When the screen is initialized, we need to do two things: First, choose a random pic and make it the canvas background.

So, get cardScreen’s initialize event.

Initialize a local variable and name it randomNum. Assign it a random integer block from Math and choose 1 to the number of pictures as the range. I will choose 3 as the upper limit as I uploaded 3 images. 

Next, get the third kind of if else block from Control, and depending on the value of the generated randomNum, set canvas’s background to a picture. So, if randomNum is 1, give it picture 1, if randomNum is 2 give it the second picture and so on and so forth.

The second thing is to paint a huge circle on this canvas to hide the picture and the color of this circle will be that of the start value sent by the previous screen i.e. screen1.

So, again, get the third type of if else block from control, check for start value and set canvas paint color to that color.

Now, we will use this paint color to draw a huge circle in the middle of the canvas so that its background picture is hidden. In the end, we will set the canvas paint color to make the color white and transparent.

The Initialize event is done and the final look is this:


When the back button is pressed, we just want to open up our screen 1 again.

When the canvas is touched, just use Canvas.drawCircle procedure to draw a circle at the point touched.

When someone drags a finger on the canvas, the canvas dragged event is triggered. In this scenario, we want to draw a line from the previous position to the current position but first set canvas.lineWidth to 15.

As you can see the dragged and touch code is identical to a doodle or drawing app code which I have taught before.

So, we are done and you can see that this app has a lot of potential.

Have fun coding this app and expanding on it to make your own unique earning or children’s app.

Download the project file:

Scratchcard.aia


I hope you liked this tutorial. Please like and share it.

You can also have a look at the video here:

Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.

Please like my social media pages for more educational resources and tips.

Pinterest:
https://www.pinterest.co.uk/obsidiansoft/_created/
For links to free educational apps, have a look at the educational apps page


Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h...
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing...
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ...
Read more