This document provides step-by-step instructions for creating mobile applications and gamified educational resources using different templates. It includes directions for making a book reader application, using the Lumi app to create drag-and-drop, word search and crossword activities offline, and saving/sharing the finished products. The goal is to help educators organize materials and create customized, gamified learning resources for students.

2. Mobile Application
Development – Basic Program
(Android Platform)
Prepared By: Mr. Mark Anthony C. Sy

3. Lesson 1
Creating a Book Reader
Objectives:
1. Craft a self-developed and customized e-book
material using the available resources in pdf file
format.
2. Organize materials and create app based open
educational resources.

4. 1. Go to appsgeyser.com and click Login

5. 2. Click Sign Up for first time user of the platform.
You can also Sign Up by choosing Continue with
Google or Continue with Facebook. If you already
have an account, click Log In.

6. 3. Type your Email and Password then click Log In.
You can also Log In by choosing Continue with
Google or Continue with Facebook.

7. 4. Click Start Now to proceed.
5. Choose Individual and select your preferred
template.

8. 6. Select Book Reader.
7. Scroll down and click the Next button.

9. 8. Give a Book title.
9. Upload a PDF File. Select a material from your
computer.

10. 10. Click +Add more to upload more PDF file
contents. The number on the lower right side is an
indicator on how many resources you have uploaded.

11. 11. Select a Color theme for your application.

12. 12. For customization, create a color theme that
will fit your interest and style. Click the box for
Primary Dark Color, Primary Color, and Accent
Color.

13. 13. Give a name for your application in the
App caption.
14. Choose an icon. (It is the design of the application.)

14. 15. The Default icon is a preset icon in the
Appsgeyser system. If you want to personalize
your icon, click the Custom icon and upload it.
Then click Crop after resizing.

15. 16. Click the Save button.
17. On the upper portion, click Download APK. (This
is the file format for Android applications to run offline.)

16. 18. There are 3 ways to extract the
APK file.
First, scan the QR code.
Second, click the URL link.
Lastly, share it via Twitter or Facebook.
As a recommendation, choose the URL
Link because it will directly go to your
downloads folder in the computer.

17. 19. Wait for the building of your application.
The downloading of APK will proceed after.

18. NOTE: If the installation is not successful,
follow these steps.

19. 20. Copy the downloaded APK and use your
charging cable in transferring the files directly to
the smartphone.
21. Click the File Manager in your phone and locate
the icon/ name of copied APK file.
22. Click the APK file and proceed with the installation
process. Follow the prompt messages and make sure
not to cancel to allow the file to run.

20. Congratulations!
You are successful in creating your very first Android
Application without creating any codes.
Share to us your stories by using
#EdTechUnit .

21. Lesson 2
Lumi for Education (Offline H5P)
Objectives:
1. Develop H5P contents offline.
2. Create gamified resources using the H5P
templates (drag and drop, find the words, and
crossword).

22. 1. Go to lumi.education and click Download
2. Select the Operating System of your device.

23. 3. If you are using a Windows device, select
Download installer (exe). Download and install
the file.

24. 4. Once the installation is complete, open the Lumi
application in your computer. Click Start.

25. 5. If this is the first time you use Lumi, select Create
New H5P button. If you have previously created
Lumi’s H5P Editor, select Open Existing H5P
button.

26. 6. Select the preferred template. Click the GET
button to download the template so that it will
function even offline. Once installation is complete, it
will become a DETAILS button.

27. Congratulations!
You are successful in installing the Lumi’s H5P Editor.
Please make sure to install the following templates
(drag and drop, find the words, and crossword).Use the
#EdTechUnit if you like this activity.

28. 7. Click the Details button for Drag and Drop.
Then, click the Use button.

29. 8. Provide a title for your gamified activity. Kindly
see the example below.

30. 9. It is your option to include a background image for
your activity. But as a recommendation, it is more of a
professional look not to add a background image.

31. 10. Click the Task button to proceed.

32. 11. Familiarize yourself with these 3 buttons.
Add Drop
Zone – it is
where you
will drop an
image or
text
Text – it is
where you
provide
textual
information
Image – it is
where you upload
images used in
the drag and drop
activity.

33. 12. Click T for Text and type the directions of your
activity. Click Done button if finish.

34. 13. Resize the Text tool and place it in the desired
area of the activity box.
14. Click the Add Drop Zone button.

35. 15. Type the name of the Drop Zone. Please see
the example below. It is highly recommended to
follow the check marks below. Click Done button.

36. 16. Resize the added Drop Zone section and place
it in the desired portion of the activity box. Continue
adding the Drop Zone for the gamified exercise.

37. NOTE: You can use the copy and paste button for
the Drop Zone.

38. 17. Click Image to add dragging objects in the
activity box.

39. 18. Click Add button and search for the image in
your computer. Provide an Alternative Text which
is a description about your added image.

40. NOTE: The image will be previewed once
successfully uploaded. Click Edit Image button if
you prefer to change it.

41. 19. It is optional if you provide a Hover Text. Identify
the drop zones. Do not check select infinite number of
element instances. Then click Done button.

42. 20. Repeat the process until you complete all
needed images in the activity box. Arrange these
images how you would like them to be reflected in
the gamified activity.

43. 21. Click again the text section, one at a time and
edit it.

44. 22. Make sure to Select the Correct Elements
identified to apply the scoring mechanism. Click
Done button after.

45. 23. Adjust the scoring settings by adding a range.

46. 24. Apply the Behavioural settings. Copy the check
mark items as recommended.

47. 25. Make sure that the Drop Zone Highlighting is
set to Always and the spacing is set to 2.

48. 26. Click View located on the upper field.

49. 27. Try the gamified activity and adjust or edit as
necessary.

50. 28. To save the file, click File then Save as. Give a
filename to your H5P activity.
29. Once you save the H5P file, it can be uploaded in
the DepEd Learning Management System for future
activities to gamify your classroom experience.

51. Congratulations!
You are successful in creating the H5P gamified
activity using the Drag and Drop template. Use the
#EdTechUnit if you like this activity.

52. 1. To create a word search activity, go back to
Lumi Dashboard and click Start button.

53. 2. Select the Find the words template, make sure
you have installed it and then select the Details
button. Click the Use button.

54. 3. Provide the Title or Topic. Type the description
or directions of the gamified activity.

55. 4. List all identified words. It is a good practice to
arrange them by typing in alphabetical order. Take
note that there must be no spaces. Each word is
separated by a comma.

56. 5. Click View to preview the activity.
6. Edit as necessary if there are needed changes.
To save your work, click File then Save As. Give a
filename for your H5P gamified resource using the
Find the words template.

57. Sample Preview of the Find the Words Activity.

58. Congratulations!
You are successful in creating the H5P gamified
activity using the Find the Words template. Use the
#EdTechUnit if you like this activity.

59. 1. To create a crossword activity, go back to Lumi
Dashboard and click Start button.

60. 2. Select the Crossword template, make sure you
have installed it and then select the Details button.
Click the Use button.

61. 3. Provide a Title for the gamified activity. Give
directions for the Task description. See example
below as a reference.

62. 4. By default, we will have two preset Words where
we can directly edit. Click Add Word if you have
more items.

63. 5. If you have 5 items, make sure to have the
same number located in the Words section.

64. 6. Provide the Clue (question field) and the
indicative Answer which will be reflected in the
crossword. See examples below as a reference.

65. 7. It is highly recommended to include an Extra
Clue to make your activity more engaging and
compelling to the end-users/ learners. It can be in
Text, Image, Audio, and Video formats.

66. 8. To add Clue as a text, input the needed details.
Make it direct and precise as possible.

67. 9. To add Clue as an image, click the Add button
and select the image file in your computer. Then,
input the needed details such as Alternative Text
and Hover Text.

68. 10. A preview of the image will be reflected upon
successful uploading of the file.

69. 11. To add Clue as an audio, click the Add button
and select the audio file in your computer. Then,
put a check mark to Fit to wrapper.

70. 12. You have an option to input an audio source
URL link or upload an audio file. Take note that the
URL will only function for online purposes.

71. 13. A preview of the audio file is reflected upon
successful upload.

72. 14. To add Clue as a video, click the Add button
and select the video file in your computer. You
have an option to upload a file or use a video
source URL. Click Insert button.

73. 15. The set of questions will automatically be
reflected and arranged using artificial intelligence of
the system. However, if you click Fix word on
grid, you need to visualize how it is reflected on
the playing field. This is not recommended as it
will incur difficulty in visualization on the part of the
teacher.

74. 16. Complete the set of questions and click View
button to preview the gamified activity.

75. 17. Click letter I button to play the clue.

76. 18. Edit as necessary if there are needed changes.
To save your work, click File then Save As. Give a
filename for your H5P gamified resource using the
Find the words template.

77. Congratulations!
You are successful in creating the H5P gamified
activity using the Crossword template. Use the
#EdTechUnit if you like this activity.