Topic APP DEVELOPMENT
Class Advancing the Functional Programming Paradigm and its
Description application to build an interactive but complex app thus
enhancing creativity
Class ADV-C19
Class time 50 mins
Goal ● Create and Integrate two apps into one.
Resources ● Teacher Resources
Required ○ [Link] login
○ Earphones with Mic
○ Notepad and Pen
● Student Resources
○ [Link] login
■ Appears on panel.
■ Earphones with Mic (Optional)
○ Notepad and Pen
Class structure Warm Up 2 mins
Teacher-Led Activity 8 mins
Student-Led Activity 30 mins
Wrap Up 5 mins
Project cues and pointers 5 mins
Start the video call from H2H
WARM UP SESSION - 2 mins
Teacher starts slideshow from slides 1 to 28.
Refer to speaker notes and follow the instructions on each slide.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
1
TEACHER ACTIVITY - 8 mins
Teacher Initiates Screen Share
Say Do
Teacher Activity 1-APP LAB
I am going to open the same project which we built last Sign-in to [Link]
class to continue designing and coding the study button.
Press View Code and
Remix to continue building
See Below- the app.
Step 2: Design the App
According to the purpose we had already created 3
Screens:
[Link] with two buttons: Play and Study
[Link] with cubebutton and score labels.
Now we are going to design the
[Link]
So let's select the studyscreen and design it.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
2
Drag 2 Labels and 3 buttons
Change the properties for each.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
3
STUDY TIMER
id: labelStudyTimer
Text: Study Timer
you can change other properties if you want.
BLANK LABEL
id: lableTime
Text: (blank): this label kept blank and will display
calculated time after every one second.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
4
width: 280
height: 255
font size: 120 pixels
I am keeping the size of labelTime as large as possible to
display the time in bigger font.
Now let’s create a start, stop and reset button for the timer.
START BUTTON
id: buttonStart
width: 80
height: 40
STOP BUTTON
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
5
id: buttonStop
width: 80
height: 40
RESET BUTTON
id: buttonReset
width: 80
height: 40
background color: (any)
We change the reset button’s background color to
differentiate it from the start and stop button.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
6
Step 3: Code the App
In this step we specify the code blocks we want to use to
write code.
For teachers reference
Complete App is given
below.
click on
to see the complete code.
Drag the respective blocks
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
7
from Toolbox as shows with
arrows.
zoom-in to see the Complete Code
Teacher Activity 2: COMPLETE CODE
PlayApp (already built in the last class.)
StudyApp: Continue Coding from line 16 onwards
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
8
StudyApp: Explain each line of code to the student.
16. When the user click on the Study Button,
17. He/She is directed to studyScreen. This is how we integrate the mainscreen and the
two apps we are going to build: game and timer. You can integrate multiple apps by using
the setscreen blocks.
18. Declare a variable r. Set value to 0 as we want the timer to start from 0 seconds. We
will store the time in seconds in this variable r.
19. When the user clicks on the start button on the studyScreen the timer should start.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
9
20. Computers are very fast machines so they keep time in milliseconds, timedLoop
repeats the blocks that it encloses after every 1000 milliseconds or 1 second.
21. After every 1 second the value of variable r is increased by 1, remember r is time in
seconds and we want value of r to increase every second by 1.
22. After every 1 second, change the text color of the labelTime using rgb block which
mixes the red green blue shades. Let's set it to any random shade of Red (0 to 255) and
blue (0 to 255) keeping the shade of green constant to 100. The last number 1 is the level
of transparency you want the rgb-colors to have.
completely transparent=0 and No transparency=1
23. After every second, the increased value of r is set to labelTime to display number
value in seconds.
[Link] bracket encloses all that should happen every second inside timedLoop block.
[Link] buttonStop is clicked,
[Link] line says to stop the timedloop.
28. This bracket encloses all that should happen when StopButton is clicked.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
10
29. When buttonReset is clicked,
30. the value of variable r is set to zero. This will set the timer back to 0.
31. Also display the new value 0 of variable r in labelTime. This displays 0 on the screen.
[Link] encloses all that should happen when the user clicks on buttonReset.
33. This bracket encloses all that should happen when user clicks the Study Button from
mainScreen.
34. When the user clicks on button2 that is the home button,
35. We want the user to go to the mainScreen
36. This bracket encloses all that should happen when button2 is clicked
Step 4: Test the App
In this step we run the app to check if it works.
Wow! The app works!
Now let’s see if you can build it.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
11
Teacher Stops Screen Share
STUDENT ACTIVITY - 30 mins
Student Initiates Screen Share
● Ask Student to press ESC key to come back to panel
● Guide Student to start Screen Share
● Teacher gets into Fullscreen
Say Do
Student Activity 1-APP LAB
You have to build the same app. It’s your turn now:
Ask the student to sign-in
into [Link] using the
Can you tell me the steps you are going to follow? username and password
on student panel.
Ask the student to click
Step 1: Define a Purpose
In this step we specify what we want the app to do.
Step 2: Design the App
In this step we specify the design components we want in
our app. and then
Step 3: Code the App
In this step we specify the code blocks we want to use in and start designing
our code.
Step 4: Test the App
In this step we run the app to check if it works.
Ask the student to Copy the
project link and paste it in
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
12
the Project Link Field on
the student panel and click
Submit Button.
BETA TEST YOUR APP
Great!
So Your task will be to do a BETA Testing of your playstudy app by sharing your
app with at least 5 friends and get feedback on whether they liked the game app or
not.
You can ask your parents to send game app link that you generated , to your
friend’s parents on whatsapp or via email to get their feedback.
I will ask you about your friends feedback in the next class and we will try to work
on it together.
Teacher Guides Student to Stop Screen Share
Teacher Initiates Screen Share
WRAP UP SESSION - 5 mins
Teacher starts slideshow from slides 29 to 30.
Refer to speaker notes and follow the instructions on each slide.
PROJECT POINTERS AND CUES - 5 mins
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
13
Teacher starts slideshow at slide 31.
Say Do
LAP TIMER Note: You can assign the
project to the student in
Goal of the Project: class itself by clicking on
Today, you learned to combine two apps into one. One of the Assign Project button
these apps was a timer that counted the time you spent which is available under
studying. The other one tracked how fast you can track the projects tab.
and click on a square.
Open the Project Solution
In this project, you have to practice and apply what you link and demo the project to
have learned in the class and modify a Lap Timer to apply the student
the timer functionality.
Story:
Aarvi loves to jog every single morning in a playground,
near her house. However, she is not able to calculate how
much time it will take her to finish all her laps. Can you
help Aarvi to modify an app to calculate the lap time in
seconds?
The project will take only 30 minutes to finish. You can
try and finish it immediately after this class.
I am very excited to see your project solution and I know
you will do really well.
Bye Bye!
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
14
Teacher starts slideshow from slides 32 to 33.
Teacher Clicks
Activity No. Name of the Links
Activity
Teacher Activity 1 APP LAB [Link]
FIAzsrOROgD3dlifL7DBARJh1zoACmmQfV
A8Y
Teacher Activity 2 COMPLETE CODE [Link]
DnbKF1S0k1YxvTEOPzJbqMRisIkewcRePx
3bG9L0
Student Activity 1 APP LAB [Link]
FIAzsrOROgD3dlifL7DBARJh1zoACmmQfV
A8Y
Project Solution LAP TIMER [Link]
iA9ZxmYeVb8CEaU1hUvrGJHj1H-YypShlB
UzDU
Teacher Reference Visual aid link [Link]
Visual aid link ect+Asset/ADV_VA/ADV_V2_C19_withcues.
html
Teacher Reference In-class quiz [Link]
In-class quiz ect+Asset/ADV_VA/ADV+C19+V2+[Link]
[Link]
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
15
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
16