9

Notes
Std. : VIII Sub.: Computer Topic: Ch 8 Using Block statements in Apps

LEARNING IN THIS CHAPTER ???

● Explain the concept of block programming
● Open the Block Editor
● Create a Start screen
● Add questions and answers Add Images
Scenario
Mona is working on the app, EQuiz to organise a quiz over the Internet. Mona and her friends have already
created a new project using the MIT App Inventor project. Mona has also designed the user interface for
the Start and the Quiz screens, by adding the required components to the app layout. Mona now intends
to connect the two screens, so that the Start screen leads into the Quiz screen. It is also required to allow
the students to answer the question. The app lets the students submit their answers and/or move to the
next question.

Block Programming
A block or a code block is the basic feature of structured programming. A block is simply a section of a
software code that contains one or more statements and declarations. A block can also be an algorithm or
script and may contain one or more blocks within itself.

Similar to programming in Scratch application, a block allows us to create control structures and improve
the code efficiency. Block-based coding is a term used to describe the process of building a programming
code by connecting multiple blocks of instructions together. In case of app development, block
programming allows us to combine multiple groups of different statements or conditions. This helps to
lower the number of Individual instances of variables and procedures that we need to specify.
Opening the Block Editor

In App Inventor, the Block Editor allows us to arrange the required blocks of code and program the app's
behaviour. Let us program the behaviour of the Start the Quiz button. When clicked, the button leads the
user to Screen 2 that is titled as the Question screen.
To open the Block Editor:
1. Access the MIT App Inventor dashboard. The dashboard appears in th Projects view. App Inventor
dashboard appears in the Projects View.
SGVP International School, Ahmedabad - INDIA 1 of 15
2. Under the My Projects section, click the required project. For example, click EQuiz. The project opens in
Design View displaying the Screen1 titled EQuiz.

3. To open the Block Editor, click the Blocks button. The Block editor for Screen1 appears.

The Block panel displays the blocks used to program general behaviour, as well as the blocks for specific
components added by us. We can drag and drop the required blocks into the Viewer to build relationships
among different statements and conditions.

SGVP International School, Ahmedabad - INDIA 2 of 15

Connecting Different Screens
In Block Editor, we can apply component-specific blocks, allowing us to switch between separate screens.
Let us add some functionality to the button Start the Quiz on Screen1 so that once clicked, Screen2
appears.
To connect individual screens on the click of a button:
1. In the Blocks Editor, select Screen1.

2. From the Blocks panel, click Button1. The drawer displays the blocks associated with the
Button component.
 ( Button1 Drawer )

SGVP International School, Ahmedabad - INDIA 3 of 15

3. From the drawer, select the when Button 1 Click block and drag it into the Viewer.

(When Button1 Click Block)

4. From the Blocks panel, under the Built-in section, click Control. The drawer displays the general
blocks associated with Control.
 (Control Blocks)

5. From the drawer, select the open another screen block and add it to the When Button1 click block.

(open another screen block)

SGVP International School, Ahmedabad - INDIA 4 of 15
6. From the Blocks panel, under the Built-in section, click Text. The drawer displays the general
blocks associated with Text.
 ( Text Blocks )

7. From the drawer, select the " " block and add it to the When Button1 click event block.

(“ " Block )

(Specifying Screen 2)
SGVP International School, Ahmedabad - INDIA 5 of 15
8. In the " " block, enter the name of the screen that should appear, when we click the button. For
example, enter Screen 2.
9. Press Enter.
10. To test the app, run the emulator.

Adding Questions and Answers

Once a user moves from the Start screen to the Quiz screen, a question appears. The user is required to
enter the correct answer in the given text box, click the submit button, and receive correct/incorrect
feedback.
The Question screen is a single-user interface designed to serve as a template for all questions. The
content on the screen changes with each user input. A global variable set for questions allows the app to
identify the correct text to be displayed. Here, the value of the variable is designed to change as per the
user input. Creating Question List
We can create a list of questions that the app can refer to. Lists drawer offers the option to create a
list. To create a question list:
1. To define the question list, from the Variables drawer, drag the initialize global name to block
and rename it. For example, rename it as QuestionList.
2. To add the items to the question list, from the Lists drawer, drag the make a list block. 3. To add new
items to the list block, click the Blue Modifier icon and from the pop-up, add the required number of
items. For example, let us ensure that three slots exist for the list.
4. From the Text drawer, drag the " " block and repeat the process to fill all three slots added in the make a
list block
5. In the three “ ” text blocks, enter the three questions as shown in Figure.

(Creating a Question List)

6. To link the question list to the Question_Label component added in Screen2, perform the
following actions.
a. To specify an event where Screen2 is initialised, from the Screen2 drawer, drag the
when Screen2.Initialize block.
b. To ensure that the first question is displayed, once Screen2 appears, from Question_Label
drawer drag the set Text.to block and select Question_Label.
C. To select the first question, perform the following actions.
i. From the Lists drawer, drag the select list item block.
ii. To specify the question list, from the Variables drawer, drag the get block and
select QuestionList.
iii. To select the first question by using an index of one, from the Math drawer, drag the
0 block and change its value to 1.
SGVP International School, Ahmedabad - INDIA 6 of 15

(Linking Question List)

Set the Hidden Index Variable
As a user clicks the Next button, the quiz process moves to the next stage. In this case, the app needs to
keep track of the current question being displayed. This requires us to set the index variable for the
question list, which includes defining a new variable for the current question number. To set the hidden
index variable:
1. From the Variables drawer, drag the initialize global name to block.
2. To rename the variable, click the block name and enter the required name. For example, enter Question
Index.

(Setting the Index Variable )

3. To set the initial value of Questionlndex to 1, from the Math drawer, drag the 0 block and change its
value to 1.
Set the Questions Stages
Once we have set the index variable for the question list, the app needs to increment this variable when
we click the Next button. As the variable changes, the new value indicates the corresponding question as
the current question. As a result, a value new question is displayed on the screen. To set the question
stages: 1. To set an event for the Next button, from the Next drawer, drag the when Next. Click block. 2.
To specify the first question in Question_Label, from the Variables drawer, drag the set to block and select
Question Index.
3. To increment the Question Index value by 1, perform the following actions
a. From the Math drawer, drag the + block.
b. To increase the old value by one, from the Variables drawer, drag the get block and select
global Question Index.
C. From the Math drawer, drag the 0 block and change its value to 1.

(Incrementing the Value for Index Variable)

4. To display the next question in Question Label, perform the following actions.
a. From the Question_Label drawer, drag the set Question_Label.Text to block.
b. To select the first question from the question list, perform the following
actions. i. From the Lists drawer, drag the select list item block.
SGVP International School, Ahmedabad - INDIA 7 of 15
ii. To specify the question list, from the Variables drawer, drag the get block and select
 global Question List.
iii. To specify the index variable for the question list, from the Variables drawer, drag the get
block and select global Question Index.

(Displaying the Questions)

Setting Condition for the Last Question

In case the user clicks the Next button, the Question Index value increases by one. As we have only listed
three questions, it becomes necessary to indicate the end of the quiz.
A condition can allow us to recognise an event where the Question Index value has reached three. This
means the last question is being displayed. Once such an event occurs, an action can be set to end the quiz.
In the event of Next button being clicked, once the user answers the third and the last question, let us set
the app to show the Result screen. To set the condition for the last question:
1. To specify the condition where the last question is displayed, perform the following
actions. a. From the Control drawer, drag the if then block.
b. To test if the Questionlndex value is three, from the Math drawer, drag the = block. C.
To specify the index in question, from the Variables drawer, drag the get block and select
QuestionIndex.
d. To specify the value of three, from the Math drawer, drag the 0 block and change its value to 3.

(Condition for the Last Question)

Add a third screen and perform the following actions.

a. Change the screen title to Result.
b. Add a label and change the label text to Congratulations! You have completed the
assessment. c. Add the second label and change the label text to Your Score.
d. Add the third label and change the label name to Score.
e. As required, modify the text properties in all three labels.
SGVP International School, Ahmedabad - INDIA 8 of 15
 (Adding Screen3)

3. To set the action to go to the Result screen, perform the following steps.
a. From the Control drawer, drag the open another screen with start value block.
b. For screen Name, from the Text drawer, drag the " " block and enter Screen3(Result).

(Setting the Action to Display Result Screen)

SGVP International School, Ahmedabad - INDIA 9 of 15

C. To set the score value index variable, perform the following actions
i. From the Variables drawer, drag the initialize global name to block.
 ii. To rename the variable, click the block name and enter the required name. For example,
enter ScoreValue
iii. To set the initial value of ScoreValue to zero, from the Math drawer drag the 0

block.

(setting Score Value Index Variable )

d. To specify the start Value for the Result screen, from the Variables drawer drag the get block and
select global Score Value.

(specifying the start value for the Result Screen )

E. To display the startvalue on Screen3(Result), perform the following action
i. Switch to Screen3.
ii. From the Screen3 drawer, drag the when Screen3. Initialize do block.
iii. From the Score drawer, drag the set Score. Text to block.
iv. From the Control drawer, drag the get start value block.

(Displaying the startValue on Screen3)

Displaying Blank Feedback and Answer Text Box

The app is designed to allow the user to move to the next screen, once an answer is entered and feedback
is provided. For the next question, it becomes necessary that both the answer and feedback text is
refreshed, so that the user can enter a new answer and the app can provide new feedback. When the Next
button is clicked, we need to ensure that the feedback label and the answer text box remain blank.

SGVP International School, Ahmedabad - INDIA 10 of 15

To display blank feedback and answer text box:
1. From the Feedback Label drawer, drag the set FeedbackLabel.Text to block and attach the same as
 the first code for the event.
2. From the Text drawer, drag the " " block.
3. From the Answer Text drawer, drag the set Answer Text. Text to block.
4. From the Text drawer, drag the " " block.

(Displaying Blank Feedback and Answer Text Box )

Creating an Answer List

Similar to the list of questions, let us create an answer list that the app can refer to. The list is created in
a similar manner to the question list. It contains the correct answers to the questions in the same
sequence that the questions are listed.

Testing User Response and Setting up Feedback

Once the user enters the answer, and clicks the Submit button, there are two possible outcomes. ● In case
the answer entered matches with the answer list provided as a reference the feedback "That is
correct." appears.
● In case the entered answer does not match with the answer list, the feedback "That is Incorrect."
appears.
Let us first set the condition that tests the entered answer with reference to the answer list provided.
Here, the question index is used to match the assigned index value of the question with each answer. To
set the condition to test answers:
1. To set the event where the Submit button is clicked, from the Submit drawer drag the when
Submit. Click do block.
2. To set the condition to test the answer, from the Variables drawer, drag If then block. 3. To specify the
answer list and the question index, perform the following actions. SGVP International School, Ahmedabad - INDIA
11 of 15
a. From the Lists drawer, and drag the select the list item block.
b. For list, from the Variables drawer, drag the get block and select Answer List.
c. To match the answer list with the user answer, perform the following actions
i. From the Math drawer, drag the + block.
 ii. From the Answer Text drawer, drag the Answer.Text block.
d. For index, from the Variables drawer, draq the get block and select Question Index.

(Setting the condition to check the Answer)

Let us now specify the feedback text to be displayed, in case the answer provided by the user is tested to
be correct or incorrect. Also, in case of correct feedback, let us increase the value of the start value by
one, which will be displayed in the Result screen as a score.
To specify the user feedback:
1. In the select list item block, click the Blue Modifier icon and from the popup, click and add the
else component.
2. To specify the feedback, in case the answer is correct, perform the following actions. a.
For then, from the Feedback Label drawer, drag the Feedback Label.Text to block. b. From
the Text drawer, drag the " " block and enter the text That is correct.
3. To specify the feedback, in case the answer is incorrect, perform the following actions. a. for else.
from the Feedback Label drawer, drag the Feedback Label.Text to block the text That is
incorrect.
b. From the Text drawer, drag the " " block and enter the text That is incorrect.

(Specifying the Feedback )

4. To ensure that the start Value changes for every correct answer, perform the following
action. a. From the Variables drawer, drag the set to block and select global Score
Value. b. From the Math drawer, drag the + block.
c. To increase the old score value by one, from the Variables drawer, drag the get block and select
global Score Value.
d. From the Math drawer, drag the 0 block and change its value to 1

SGVP International School, Ahmedabad - INDIA 12 of 15

 (Specifying the startValue Changes )
Adding Question Images
Each question on the Quiz screen can be assigned an image. Images are added in the media library and
assigned to the question list later. We can set each question to show different images in the Image1
component added in the app user interface.
Let us upload the available three images in the Media panel of the EQuiz dashboard.

(Uploaded Images)

(Image List)
In the Block editor, let us now create a list of images for the app. The first image appears with the first
question as the Screen 2 is initialised. Other images appear as the user clicks the Next button. To link the
image list to the Image1 component
1. To change the picture, from the Image1 drawer, drag the set Image1.Picture to block. 2.
To specify the picture corresponding to the current question, perform the following actions.
a. From the Lists drawer, drag the select list item block. A.
b.To specify a file name from this list, from the Variables drawer, drag the get block and select
Picture List.
c.To specify the current question, from the Variables drawer, drag the get block and select
Questionlndex.
3. To test the app, run the emulator or AI Companion.
SGVP International School, Ahmedabad - INDIA 13 of 15
 (Adding the Image List to when next is clicked event)

(Emulator Test)

7. To view the user interface as seen on the mobile screen, run the emulator.
Synopsis
● A block is simply a section of software code that contains one or more statements
and declarations.
● In App Inventor, the Block Editor allows us to arrange the required blocks ot Code and to
program the app's behaviour.
● In Block Editor, we can apply component-specific blocks, allowing us to switch between
separate screens.
● The Question screen is a single-user interface designed to serve as a template for all
questions. ● We can create a list of questions that the app can refer to. The app needs to keep
track of the current question being displayed.
● Once we have set the index variable for the question list, the app needs to increment this
variable when we click the Next button.

SGVP International School, Ahmedabad - INDIA 14 of 15

● In case the user clicks the Next button, the Questionlndex value increases by one. For the next
question, it becomes necessary that both the answer and feedback text is refreshed, so that
the user can enter a new answer and provide new feedback.
● Once the user enters the answer, and clicks the Submit button, there are two possible
outcomes: "That is correct." feedback "That is Incorrect." feedback Fach question on the Quiz
screen can be assigned an image.
Q : A Fill in the blanks.
(1) A block or a code block is the basic feature of __________ programming.
(2) The __________ in the Viewer allows us to save blocks to be used in other screens or projects.
(3) A Script made of multiple blocks executes its code in__________ to ___________ manner. (4) A
global ________ set for questions, allows the app to identify the correct text to be displayed.
(5) As a user clicks the Next ________, the quiz process moves to the next stage.
Q : B State whether the following statements are true or false.
(1) As the global variable changes, the new value indicates the
Corresponding question as the current question. ____ (2) An action can allow us to recognise
an event where the
Questionlndex value has reached three. ____ (3) In case the entered answer does not match
with the answer list
provided as a reference, the feedback "That is correct." appears. ____ (4) Images are added in
the media library and assigned to the
question list later ____ (5) We can use blocks to build relationships among different
statements
and conditions. ____
\
Q : C Answer in one word.

(1) An algorithm or a script. ____

(2) The drawer which contains the 'open another screen block. ____
(3) The drawer which contains the get block. ____
(4) The panel in Project dashboard that displays the uploaded images. ____
(5) The area in the Design View where the blocks are assembled. ____

Q : D Answer in brief.
(1) List two advantages of using block programming.
(2) What is included in the Block panel?
(3) Explain the need for a global variable in case of questions.
(4) Why is a condition set for the last question?
(5) How is the score tracked?

Q : E Perform the following activities in lab:

1. Open the Block Editor for the project Math Test and connect the Hello! screen with the
Practice screen.
2. For the Practice screen, use block programming to show three basic algebra problems. 3.
Allow users to enter the answer by clicking a Submit button and Provide correct or incorrect
feedback.

SGVP International School, Ahmedabad - INDIA 15 of 15