1. Go to ​https://appinventor.mit.edu​ .

2 . click on “create apps” at top left corner. And create new project .
 3 . goto layout and take table arrangement layout and goto its properties and from
there set rows and columns to 2.

Explanation :
TableArrangement-> 

Use a table arrangement component to display a group of components in a 

tabular fashion. 

4. To add images click on “upload file” button in the media. (we need to add different
images showing four different pieces of our puzzle.)
6 .Choose the image file from your computer by clicking on the “choose file “ icon.
And then click ok.
7. You can see uploaded images have been appeared in media section .

8. take four images components to show images from the user interface in that table
arrangement layout.
9 . click on the image1 component in the component section to alter its properties . Add
first image in picture option .

10 . likewise add remaining three parts of image puzzle .

11. now goto properties of screen and from there set align horizontal to center .
Explanation :
AlignHorizontal
A number that encodes how contents of the HorizontalArrangement are aligned
horizontally. The choices are: 1 = left aligned, 2 = right aligned, 3 = horizontally centered.
Alignment has no effect if the HorizontalArrangement’s Width is Automatic.

12 . take to the horizontal layout from palette just below the image puzzle.
13 .goto the properties of each horizontal layout you have taken . and change the height
to fill parent and set width as your choice.
14 . Take three labels from the palette . drag them in first horizontal layout .rename
them as “number1” , “operator” and “number2” respectively.
Explanation :
Label 

Labels are components used to show text. 

15 . take one textbox in just ahead of that number2 label . rename it as “answer “ . and
then take a button just ahead of the answer textbox and rename it as “check_btn” and
also give the text as “check”.

Explanation :
TextBox

Users enter text in a text box component.

The initial or user-entered text value in a text box component is in the ​Text
property. If ​Text​ is blank, you can use the ​Hint​ property to provide the user with a
suggestion of what to type. The ​Hint​ appears as faint text in the box.
16 .Take two buttons in the second horizontal layout one after another . rename them
as “generate_btn” and “reset” . and also give the text as “generate”.

Explanation :
Button

Button with the ability to detect clicks. Many aspects of its appearance can be
changed, as well as whether it is clickable (Enabled). Its properties can be
changed in the Designer or in the Blocks Editor.
17 . goto the coding part by clicking on the “blocks” at right top corner.

18 . goto variable in the block section and pick “ initialize global to” puzzle . give name
as num1.
Explanation :
initialize global name to

This block is used to create global variables. It takes in any type of value as an
argument. Clicking on ​name​ will change the name of this global variable. Global
variables are used in all procedures or events so this block will stand alone.

19 . goto math and pick the first puzzle to give value zero to our num1 variable.
20 . goto variable again and pick three “ initialize global to” puzzles and give zero value
to all of them as given to the first num1 variable and give name as “num2” and “result”.

19 . ​At bottom left corner ,click on “generate_btn” .

20 .take first “when click do” puzzle on the screen .
Explanation :
Click()
Indicates that the user tapped and released the Button.
21 .In variables take “set to “ puzzle .

set

This block follows the same rules as ​get​. Only variables in scope will be available
in the dropdown. Once a variable ​v​ is selected, you can attach a block to give ​v​ a
new value.
22 . select num1 in that and take the “random integer “puzzle from math and attach to it.
Explanation :

random integer 

 
Returns a random integer value between the given values, inclusive. The order of the 
arguments doesn’t matter. 
23 . follow the same for the num2 variable .

24 . take one “initialize global “ puzzle from variables and give the name as “image_list”.
25 . take the “create empty list” puzzle from lists and attach it .
26 . take “set to “ puzzle from variable and in that puzzle select image_

27 . In list ,take “make a list” puzzle and attach.

Explanation :

Creates a list from the given blocks. If you don’t supply any arguments, this creates an 
empty list, which you can add elements to later. This block is a ​mutator​. Clicking the 
blue plus sign will allow you to add additional items to your list. 
28 . in “make list puzzle” click on settings icon and from there add total four items.

make a list 

 
Creates a list from the given blocks. If you don’t supply any arguments, this creates an 
empty list, which you can add elements to later. This block is a ​mutator​. Clicking the 
blue plus sign will allow you to add additional items to your list. 
29 . goto text and pick four text to attach those four items.
Explanation :

” “ (string block) 

 
Contains a text string. 
This string can contain any characters (letters, numbers, or other special characters). 
On App Inventor it will be considered a Text object. 
30. Now goto design part of your project . just go through the names of images you added in
the media section.
31 . put those names in the empty text to make a list of images.

32 . take two “set label to text” puzzles and attach them in “generate_btn click” puzzle .
33 . take and initialize two variables as imageindex to 0 and selected_index to “create empty
list”.

Explanation :

Creates an empty list with no elements. 

34 . Go to procedure drag a when to do block and write a select image in it .

Explanation :

procedure do 
  
Collects a sequence of blocks together into a group. You can then use the sequence of 
blocks repeatedly by calling the procedure. If the procedure has arguments, you specify 
the arguments by using the block’s mutator button. If you click the blue plus sign, you 
can drag additional arguments into the procedure. 

35. go to variables drag a set to block and select global image index.
36. Go to maths, drag and drop random integer from 1 to 4.

37. go to control and select if then else loops.

Explanation :

if then else 

Tests a given condition. If the statement is true, performs the actions in the then-return 
sequence of blocks and returns the then-return value; otherwise, performs the actions in 
the else-return sequence of blocks and returns the else-return value. This block is 
similar to the ternary operator (?:) found in some languages. 

38. go to logic and select not.

Explanation :

not 

 
Performs logical negation, returning false if the input is true, and true if the input is 
false. 
39.now go to list and select is in list things.
explanation :

is in list 

 
If thing is one of the elements of the list, returns true; otherwise, returns false. Note that 
if a list contains sublists, the members of the sublists are not themselves members of 
the list. For example, the members of the list (1 2 (3 4)) are 1, 2, and the list (3 4); 3 and 
4 are not themselves members of the list. 
40. go to variables and select global image index and global selected index.

41. go to list and select add item to list.

Explanation :  

add items to list 

 
Adds the given items to the end of the list. The difference between this and append to 
list is that append to list takes the items to be appended as a single list while add items 
to list takes the items as individual arguments. This block is a ​mutator​. 

42. Go to variables and select get. write selected image and image index in it.
43. Go to controls and select if then else if then else if loop.

if then else 

Tests a given condition. If the statement is true, performs the actions in the then-return 
sequence of blocks and returns the then-return value; otherwise, performs the actions in 
the else-return sequence of blocks and returns the else-return value. This block is 
similar to the ternary operator (?:) found in some languages. 
44. go to maths and select as shown in image.
Some math blocks are dropdowns which means that they can be converted into 
different blocks. Here’s a list of what is included in each dropdown. 
=, ≠, >, ≥, <, ≤ 

 
45. Go to variables and select the get method. set global imageindex in it.
Explanation :

get 

 
This block provides a way to get any variables you may have created. 
46. go to maths and select 0, set as 0 to 1.

47. go to image 1 and select set image 1 visible to..

48.go to logic and select true

Explanation :
Represents the constant value true. Use it for setting boolean property values of 
components, or as the value of a variable that represents a condition. 
49. go to maths and select as shown in image.

50. go to variables select get and set global imageindex. and go to maths and set as 2.
51. Go to maths and select is equal to sign. also drag 0 and set at 3.

52. go to variables and select get global imageindex.

53. go to image 3 and select set image visible to .
Visible
Specifies whether the Image should be visible on the screen. Value is ​true​ if the Image
is showing and ​false​ if hidden.
54. go to logic and select true.

55. similar process done for image 3 and image 4.

 56. go to procedure and select call selectimage.

After creating this procedure, a call block that needs to be plugged in will be created.
This is because the result from executing this procedure will be returned in that call
block and the value will be passed on to whatever block is connected to the plug.
MIT App Inventor 
57. Go to procedure and select to check success do.

58. go to control and select if then loops

59. go to logic and drag and drop “​and​” block.
Explanation :

and 

 
Tests whether all of a set of logical conditions are true. The result is true if and only if all
the tested conditions are true. The number of tests can be expanded using the ​mutator​.
The conditions are tested left to right, and the testing stops as soon as one of the
conditions is false. If there are no conditions to test, then the result is true. You can
consider this to be a logician’s joke.
60. again go to logic block select is equal to block.

61. go to image 1 and select image1 visible. next go to logic and drag true.
62. go to logic and select is equal to part.

63. go to image 2 and select image2 visible.

64. go to logic and select true.

65. go to logic and select and and drop on the screen.

66. go to logic and select and block.

67. go to logic and and select is equal to part. then go to image 3 and select image3 visible.then
next go to logic block and select and block.
68. go to logic and select is equal to block. then next go to image four and select image 4 visible
. go to logic and select true.

69. Now go to procedure and select to set images do.

70. go to image 1 and select set image1 visible. similarly do for image 2,3 and 4.

71. go to logic and select false and drop it on the screen.

Explanation :
false 

 
Represents the constant value false. Use it for setting boolean property values of 
components, or as the value of a variable that represents a condition. 

72. go to screen 1 select when do block drop it on the screen. next go to procedure and select
call set images.
73. Go to the check button and select when.click do block. Then go to variables and select set
global result .
74. Go to maths block and drag addition block. now go to variables block and select set global
num1 and set global num 2.

75. go to control and select if then else loop.

76. go to maths and select is equal to block. then next go to answer and select answer text
block . next go to variables and select get global result.

77. go to procedure and select call select image and call check successes.
78. go to procedure and select to reset function do.

79. here we completed our design and coding part . now its time to run your app. All the best!!