Creating Mobile and Web Application.pptx

TRANSFORMATIVE TEACHING Enhancing Learners’ Engagement and Learning Outcomes Mobile & Web App Creation Lumi Notepad HTML Java Web2APK

Lumi H5P Desktop Editor

Lumi H5P Desktop Editor https://lumi.education/en/

Lumi H5P Desktop Editor

https://bit.ly/eve_lumieducation Lumi H5P Desktop Editor

Lumi H5P Desktop Editor

https://h5p.org/tutorial-question-set Lumi H5P Desktop Editor

Lumi H5P Desktop Editor

Lumi H5P Desktop Editor The top part of the Question Set editor consists of general settings at the top including Background image, Progress indicator, and Pass percentage A Question section in the middle Customizable text fields at the bottom, including Quiz introduction and Quiz Finished: and Your result: Scroll down

Lumi H5P Desktop Editor The top part of the Question Set editor consists of general settings at the top including Background image, Progress indicator, and Pass percentage A Question section in the middle Customizable text fields at the bottom, including Quiz introduction and Quiz Finished: and Your result:

Lumi H5P Desktop Editor

Lumi H5P Desktop Editor Add Title Choose Textual in Progress Indicator Save by clicking File, then Save As Create Folder and name it H5P Files

Lumi H5P Desktop Editor In the Question type dropdown, select a MULTIPLE CHOICE QUESTION. This will load the Multiple choice question editor.

Lumi H5P Desktop Editor The Multiple Choice question content type consists of a question and a set of options. The Question is used to introduce the problem to be solved, and the Options are the possible answers the learner can choose from.

Lumi H5P Desktop Editor Under Media, you can add image or video files relevant to the question.

Lumi H5P Desktop Editor Click “Add” to add Image Type of Media.

Lumi H5P Desktop Editor Click “Add File” to add Video Type of Media.

Lumi H5P Desktop Editor Under Available Options, add answering options the learner can choose from. Two empty available options are listed by default.

Lumi H5P Desktop Editor Add another option by clicking the “Add Option” button below the two currently available options.

Lumi H5P Desktop Editor

Lumi H5P Desktop Editor Check the “Correct Checkbox” for the correct option. Leave the “Correct Checkbox” unchecked for incorrect options.

Lumi H5P Desktop Editor Click “Behavioral Settings”

Lumi H5P Desktop Editor Uncheck Enable “Retry” butoon Check the Enable “Show Solution” button Select among Automatic, Multiple Choice, Single Choice Check “Randomize Answers” EXCEPT for options that do not need to be randomized. Check “Require Answer before the solution can be viewed” Check “Automatically check answers” Check “Show Score Points”

Lumi H5P Desktop Editor Check “Disable backwards navigation” Check “Randomize questions”

Lumi H5P Desktop Editor Click ”View” and try to answer the question.

Lumi H5P Desktop Editor When additing another MULTIPLE CHOICE QUESTION Type, click “Copy” Click “Add Question” Click “Paste”

Lumi H5P Desktop Editor Just modify the question, options and the correct answer; no need to modify Behavioral Settings. Click File, then Save.

Lumi H5P Desktop Editor To Export, click “File” then click “Export” Click “Export Now” Create “Exported” Folder and export the file to “Exported” Folder.

Lumi H5P Desktop Editor

Lumi H5P Desktop Editor Type in some Title Type the Question Choose True or False

Lumi H5P Desktop Editor In Finished Section, Click “Text overrides and translations” Click “True/False Question” Change into Tama and Mali

Lumi H5P Desktop Editor

Notepadd ++ - HTML Editor Install Notepadd ++

Notepadd ++ - HTML Editor

Notepadd ++ - HTML Editor Copy the Index Paste it in “Exported” Folder

Notepadd ++ - HTML Editor Right Click on Index and Click “Edit with Notepad++

Notepadd ++ - HTML Editor Change the “Enter App Title” Click Save

Notepadd ++ - HTML Editor Right click the Index and Open with Chrome or Edge

Notepadd ++ - HTML Editor Resize the window to see both Notepad++ and browser

Notepadd ++ - HTML Editor Change the “a href = “ file into the file names in Exported Folder

Notepadd ++ - HTML Editor Save changes in notedpad . Reload the browser to see changes.

Java Double click the ”jre-8u391-windows-i586” Click “Install”

Java Click “Close”

Website 2 APK Builder Double click the ”Website.2.APK.Builder.v5.0.Installer_Downloadly.ir”

Website 2 APK Builder

Website 2 APK Builder Click “Local HTML Website” Type the “App Title” Change the Icon Click the “Customize App Permission”

Website 2 APK Builder Click “Change” in the Directory of Local Website Choose the “Exported” folder created

Website 2 APK Builder Click “Build Android APK”

Website 2 APK Builder Click “OK”

Website 2 APK Builder Click “Finish”

Using Web App

Installing Mobile App Copy to you device thru OTG or cable cord the built APK or upload the APK file to OneDrive

Installing Mobile App From OneDrive, download the APK File to your device Install the APK File Open the App

Installing Mobile App

Thank you. ~Ma’am Eve

Creating Mobile and Web Application.pptx

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

Creating Mobile and Web Application.pptx

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75

Slide 76

Slide 77