54
edits
Changes
Jump to navigation
Jump to search
m
no edit summary
Line 1:
Line 1:
+On the main dashboard, A new window will appear with two choices '''Open Existing File''' and '''Create New H5P'''.
−<gallery widths="1080" heights="300">
−</gallery>
−
<gallery mode="packed" heights="600" widths="1080">
−</gallery>
−[[File:Plan.png|400px]]+
+
</gallery>
−
<gallery mode="packed" heights="400">+
−File:05 aView Edit.png|View and Edit mode in the interface
−</gallery>
<gallery heights="400" widths="1080">
−File:Lumi Truefalse1.png|True or false activity settings window
−File:Lumi truefalse2.png|Preview of True or false question in the slide
−</gallery>
<gallery widths="1080" heights="500">+</gallery>4. '''Correct Answer :''' If the statement is correct, click on "True"; if not, click on "False."
After we created a true or false content types, now lets take another example for Multiple choice. +<gallery mode="packed" heights="400">+File:MCQ1.png|Adding MCQ as an activity+
−File:MCQ2.png|MCQ interface
−</gallery>
−
<gallery mode="packed" heights="400">
−File:Lumi Fillintheblanks1.png|Fill in the blanks activity
−File:Lumifillintheblanks2.png|Fill in the blanks interface
−</gallery>
−'''3. Behavior Settings :'''
−
+
+
+
+
+
+
+
+
+
+'''* Enable "Show Solution" Button:''' If the user answers incorrectly, they will see a "Show Solution" button after submitting their answer. Clicking it will display the correct answer.
−'''* Automatically Check Answer :''' This option automatically checks the answer as soon as it's clicked, eliminating the need for a "Check" button.
−'''* Case Sensitive:''' If enabled, the user must input the answer exactly as you have written it.
−'''* Require All Fields to Be Answered Before the Solution Can Be Viewed:''' Users must fill in all blanks before the hint is shown.
−'''* Put Input Fields on Separate Lines:''' This option allows users to enter their answers on separate lines.
−'''* Show Confirmation Dialog on "Check":''' Before submitting an answer, the user will be asked to confirm their submission, helping prevent accidental submissions.
−'''* Show Confirmation Dialog on "Retry" :''' This works the same as the previous option but applies to the "Retry" button.
−'''* Accept Minor Spelling Errors:''' If activated, the answer will still count as correct even with minor spelling errors (1 error for 3-9 characters, 2 errors for more than 9 characters).
−'''4. Add New Question:''' To add a new question, click on the "Add New Text Block" button. The rest of the process is the same as outlined above.
−=====Flashcards =====
−The Flashcards content type allows learners to engage with a set of cards, each containing a picture on one side and a corresponding text on the other. The learner is asked to type a word or expression that matches the picture before flipping the card to reveal the correct answer.
−<gallery mode="packed" heights="400">
−File:Lumi Flashcard1.png|Flashcard settings
−File:Lumi Flashcard2.png|Flashcard 'view'
−</gallery>
−'''How to Create Flashcards'''
−After opening the Flashcards package, follow these steps to create or edit your flashcards:
−'''1. Title :''' To set the title , please refer to Steps in the True or False section.
−'''2. Task Description:''' Use this option to provide a clear explanation of the task, helping the user understand what is expected and how they should answer.
−'''3. Creating the Flashcard:'''
−<nowiki>*</nowiki> In the card section, there are four available options. Let's say you want to show an image of a human brain and ask the user to identify it. First, you need to upload an image. Under the "Image" column, there is an option called "Add Image." Click on it, and it will prompt you to upload a relevant image from your computer. Select the image and click on "Select/Upload."
−<nowiki>*</nowiki> Now that you have uploaded an image of the human brain, type your question in the question box, such as "Identify the following human body part."
−<nowiki>*</nowiki> In the answer box, type "Brain." You can also include alternative answers by separating them with a forward slash ("/").
−'''4. Behavior Settings:'''
−'''* Case Sensitive:''' If you enable this option, the user must input the answer exactly as you have typed it.
−'''* Require All Fields to Be Answered Before the Solution Can Be Viewed:''' The hint will not be shown until all fields are completed.
−'''* Randomize Answers:''' Enable this to randomize the order in which the answers are displayed.
−'''5. Adding More Flashcards:''' Once you’ve finished creating a card, you can click the "Add Card" button to add more flashcards or questions.
−'''6. Finalizing the Project:''' Once everything is done, your flashcard project should look something like this, with each card featuring a question and an image, ready for the learner to interact with.
<gallery mode="packed" heights="400">+File:Lumi Timeline2.png|Timeline creation settings
−</gallery>
−
− +{{Note}} '''Difference Between Save and Export'''
+<nowiki>====</nowiki> '''How to Export?''' <nowiki>+<gallery mode="packed" heights="400">
−File:Exporta.png|Exporting the lumi project
−</gallery>
[[Category:Explore an application]]
[[Category:Explore an application]]
+
+
=== Introduction ===
=== Introduction ===
Line 59:
Line 61:
+<big>On the main dashboard, A new window will appear with two choices '''Open Existing File''' and '''Create New H5P'''.</big>
−[[File:Creating New Project New.png|thumb|883x883px|Image of creating new project |alt=]]
−[[File:Creating New Project New.png|center|thumb|900x900px|Image of creating new project ]]
−'''Open Existing File :''' Select this option if you have previously worked on an H5P file or have an existing H5P file saved on your computer. Clicking on Open Existing File will allow you to browse your files and open the H5P project you want to continue working on or to preview the content of the file.
'''Open Existing File :''' Select this option if you have previously worked on an H5P file or have an existing H5P file saved on your computer. Clicking on Open Existing File will allow you to browse your files and open the H5P project you want to continue working on or to preview the content of the file.
Line 72:
Line 70:
To start a new project, you'll click on Create New H5P. This option will open a fresh template it’s the starting point for creating anew H5P interactive project.
To start a new project, you'll click on Create New H5P. This option will open a fresh template it’s the starting point for creating anew H5P interactive project.
+
==== What are H5P packages and why we need to install them ====
==== What are H5P packages and why we need to install them ====
Line 82:
Line 81:
[[File:04 Installing New packages.png|center|thumb|900x900px|Image Installing New packages]]
[[File:04 Installing New packages.png|center|thumb|900x900px|Image Installing New packages]]
−To use '''H5P template packages''' within Lumi, you generally don’t need to install anything additional beyond the Lumi app itself, as Lumi comes pre-packaged with many H5P content types ready to use. If you need some H5P content which asks them to download and use, you may have to download those as well.
To use '''H5P template packages''' within Lumi, you generally don’t need to install anything additional beyond the Lumi app itself, as Lumi comes pre-packaged with many H5P content types ready to use. If you need some H5P content which asks them to download and use, you may have to download those as well.
Line 93:
Line 91:
*'''Filter Box :''' If you're unsure of the template's exact name, you can use the filter menu to sort the packages alphabetically, from A to Z. This will display all available packages in alphabetical order, making it easier to find what you're looking for.
*'''Filter Box :''' If you're unsure of the template's exact name, you can use the filter menu to sort the packages alphabetically, from A to Z. This will display all available packages in alphabetical order, making it easier to find what you're looking for.
−'''To install a new H5P package, follow these steps: (For this action your system need to be connected to the Internet)'''
'''To install a new H5P package, follow these steps: (For this action your system need to be connected to the Internet)'''
−#'''Choose a Template:''' Select any template you want to edit from the list of available packages.
#'''Choose a Template:''' Select any template you want to edit from the list of available packages.
#'''Click on "Get":''' On the right side of the window, you'll see an option labeled '''Get'''. Click on that.
#'''Click on "Get":''' On the right side of the window, you'll see an option labeled '''Get'''. Click on that.
#'''Install :''' After clicking, a prompt will appear asking you to confirm the installation. Click the '''Install''' button.
#'''Install :''' After clicking, a prompt will appear asking you to confirm the installation. Click the '''Install''' button.
−#'''Installation Confirmation:''' Once the package has been successfully installed, you will see a message stating that "'''[Name of the template] has been installed!'''" In addition, the button that previously said '''Install''' will now display '''Use''', indicating that your template is ready for use.
+#'''Installation Confirmation:''' Once the package has been successfully installed, you will see a message stating that "'''[Name of the template] has been installed!'''" In addition, the button that previously said '''Install''' will now display '''Use''', indicating that your template is ready for use.<br />
−<gallery mode="packed" heights="400">
+[[File:04.2a Installing new packages.png|thumb|alt=|border|center|900x900px|Installing new packages]]
−File:04.2a Installing new packages.png|Installing the new packages
−*'''One-Time Installation:''' This installation is required only once for each package you need.
*'''One-Time Installation:''' This installation is required only once for each package you need.
*'''No Re-installation Needed:''' You do not need to install the package every time you use it.
*'''No Re-installation Needed:''' You do not need to install the package every time you use it.
Line 114:
Line 105:
====Understanding the User interface inside H5P editor====
====Understanding the User interface inside H5P editor====
Before we begin, it's important to understand interface Once you've chosen a package, you'll notice two options at the top: "View" and "Edit."
Before we begin, it's important to understand interface Once you've chosen a package, you'll notice two options at the top: "View" and "Edit."
−'''View :''' When you select "View," you'll see exactly how your H5P content will look to users. This feature lets you preview the content, test interactions, and ensure everything functions as expected.
'''View :''' When you select "View," you'll see exactly how your H5P content will look to users. This feature lets you preview the content, test interactions, and ensure everything functions as expected.
'''Edit :''' Choosing "Edit" allows you to make changes to your H5P content. You can add or remove elements, adjust text, tweak settings, and refine the overall design and functionality to your liking.
'''Edit :''' Choosing "Edit" allows you to make changes to your H5P content. You can add or remove elements, adjust text, tweak settings, and refine the overall design and functionality to your liking.
+
+[[File:05 aView Edit.png|border|center|thumb|900x900px|Image of View & Edit options]]
Line 131:
Line 122:
Once you’ve opened any template, make sure to save it on your computer before making any changes. After that, as you edit, remember to regularly save your progress by pressing Ctrl + S after every few steps. This will help prevent any data loss and ensure your work is up to date.
Once you’ve opened any template, make sure to save it on your computer before making any changes. After that, as you edit, remember to regularly save your progress by pressing Ctrl + S after every few steps. This will help prevent any data loss and ensure your work is up to date.
−<gallery mode="nolines" heights="500" widths="1080">
+<gallery widths="650" heights="400" perrow="2">
−File:Lumi save2.png|Giving the path, name and saving the project
+File:Lumi save1.png|Image of saving as a project file
−File:Lumi save1.png|Saving a Lumi project
+File:Lumi save2.png|Image giving a proper file name
</gallery>
</gallery>
−====Working on Different activities====
+==== Working on Different activities ====
+[[File:Lumi Truefalse1.png|thumb|400x400px|Title column in true or false activity]]
=====True or False=====
=====True or False=====
Open the "True or False" activity, follow these steps to create/ edit your template.
Open the "True or False" activity, follow these steps to create/ edit your template.
−1. '''Title Column:''' Enter your title in the title column. This title is for your reference only and will not be visible to users answering the question.
1. '''Title Column:''' Enter your title in the title column. This title is for your reference only and will not be visible to users answering the question.
Line 157:
Line 145:
3. '''Question Box:''' Enter your question or statement in the question box. For example, "London is the capital city of the USA."
3. '''Question Box:''' Enter your question or statement in the question box. For example, "London is the capital city of the USA."
− [[File:Question Box.png|center|thumb|900x900px|Image of adding question box]]
+ [[File:Question Box.png|center|thumb|700x700px|Image of adding question box|alt=]]4. '''Correct Answer :''' If the statement is correct, click on "True"; if not, click on "False."
−[[File:Lumi truefalse2.png|center|thumb|700x700px|An example of how a true-or-false activity is typically presented.]]
−=====Multiple Choice Questions=====
=====Multiple Choice Questions=====
−[[File:06 MC Opt.png|thumb|673x673px|Adding details to multiple-choice questions interface.]]
−First, we created a True or False content type. Now, let’s explore another example: '''Multiple Choice.'''
−After opening the Multiple Choice Questions activity, follow these steps to create or edit your questions:
After opening the Multiple Choice Questions activity, follow these steps to create or edit your questions:
−1. Title and Media: To understand how to set the title and media options, please refer to Steps 1 & 2 in the True or False section.
+'''1. Title and Media:''' To understand how to set the title and media options, please refer to Steps 1 & 2 in the True or False section.
−2. Question box: In the question box, type the question you want to ask. For example, "Which animal is considered the King of the Jungle?"
+'''2. Question box:''' In the question box, type the question you want to ask. For example, "Which animal is considered the King of the Jungle?"
−3. Default Options: By default, two options will be pre-loaded for you.
+'''3. Default Options''': By default, two options will be pre-loaded for you.
−4. Add New Option: If you need more options, click the "Add New Option" button at the bottom.
+[[File:06.1Options.png|thumb|670x670px|Adding details to multiple-choice questions interface continued |alt=]]
+'''4. Add New Option:''' If you need more options, click the "Add New Option" button at the bottom.
−5. Enter Options: Enter each possible answer in the provided text boxes.
+'''5. Enter Options:''' Enter each possible answer in the provided text boxes.
−6. Mark the Correct Option: For the correct answer, check the "Correct" checkbox located below the text box.
+'''6. Mark the Correct Option:''' For the correct answer, check the "Correct" checkbox located below the text box.
−7. Multiple Correct Answers: If your question has more than one correct answer, you can mark multiple options as correct based on your needs.
+'''7. Multiple Correct Answers:''' If your question has more than one correct answer, you can mark multiple options as correct based on your needs.
−8. Tips and Feedback: Each option has an additional feature called "Tips and Feedback." Use this feature carefully, depending on your requirements:
+'''8. Tips and Feedback:''' Each option has an additional feature called "Tips and Feedback." Use this feature carefully, depending on your requirements:
−Tip Text: This text is visible to the user before they choose an answer. If you want to provide additional information about the option (for both correct and incorrect answers), you can enter it here.
+'''Tip Text:''' This text is visible to the user before they choose an answer. If you want to provide additional information about the option (for both correct and incorrect answers), you can enter it here.
Message Displayed if Answer is Selected: This is the message that will appear if the user selects the correct answer.
Message Displayed if Answer is Selected: This is the message that will appear if the user selects the correct answer.
Line 200:
Line 185:
=====Fill in the blanks=====
=====Fill in the blanks=====
+[[File:Lumi Fillintheblanks1.png|thumb|673x673px|Adding title and question in fill in the blanks]]
After opening the Fill in the Blanks package, follow these steps to create or edit your questions:
After opening the Fill in the Blanks package, follow these steps to create or edit your questions:
Line 205:
Line 191:
'''2. Enter the Text:''' Under the text block column, you'll find a text box labeled "Line of Text." Here, enter the entire sentence including the blank answer. For example: '''"The roots of a tree grow deep into the ground."'''
'''2. Enter the Text:''' Under the text block column, you'll find a text box labeled "Line of Text." Here, enter the entire sentence including the blank answer. For example: '''"The roots of a tree grow deep into the ground."'''
−'''Follow these steps to mark the blank answers:'''
'''Follow these steps to mark the blank answers:'''
Line 230:
Line 210:
The final question might look something like this: "The *roots/Roots:Hint: This part of the tree helps it stand tall and absorbs water from the soil* of a tree grow deep into the ground."
The final question might look something like this: "The *roots/Roots:Hint: This part of the tree helps it stand tall and absorbs water from the soil* of a tree grow deep into the ground."
−'''* Enable "Retry" Button:''' Allows users to retry if they give the wrong answer.
+[[File:Lumifillintheblanks2.png|center|thumb|923x923px|Preview of fill in the blanks]]
+=====Flashcards =====
+The Flashcards content type allows learners to engage with a set of cards, each containing a picture on one side and a corresponding text on the other. The learner is asked to type a word or expression that matches the picture before flipping the card to reveal the correct answer.
+'''How to Create Flashcards'''
+After opening the Flashcards package, follow these steps to create or edit your flashcards:
+'''1. Title :''' To set the title , please refer to Steps in the True or False section.
+'''2. Task Description:''' Use this option to provide a clear explanation of the task, helping the user understand what is expected and how they should answer.
+'''3. Creating the Flashcard:'''
+<nowiki>*</nowiki> In the card section, there are four available options. Let's say you want to show an image of a human brain and ask the user to identify it. First, you need to upload an image. Under the "Image" column, there is an option called "Add Image." Click on it, and it will prompt you to upload a relevant image from your computer. Select the image and click on "Select/Upload."
+<nowiki>*</nowiki> Now that you have uploaded an image of the human brain, type your question in the question box, such as "Identify the following human body part."
+<nowiki>*</nowiki> In the answer box, type "Brain." You can also include alternative answers by separating them with a forward slash ("/").
+[[File:Flash cards 0.png|left|thumb|630x630px|image of creating a flash card]]
+[[File:Flash cards 1.png|thumb|665x665px|Preview of flash cards]]
−===== Timeline=====
===== Timeline=====
The Timeline content type lets you arrange a sequence of events in chronological order. You can add images, text, and even assets from different internet web platforms.
The Timeline content type lets you arrange a sequence of events in chronological order. You can add images, text, and even assets from different internet web platforms.
−[[File:Lumi TImeline1.png|thumb|600x600px|Image of creating a timeline]]
−File:Lumi TImeline1.png|Timeline creation settings
+'''How to Create a Timeline'''
−'''How to Create a Timeline'''
Once you’ve opened the Timeline package in your H5P editor, follow these steps:
Once you’ve opened the Timeline package in your H5P editor, follow these steps:
Line 322:
Line 290:
Click to watch – NC
Click to watch – NC
−[[File:Lumi Timeline2.png|thumb|600x600px|Continued image of creating a timeline]]
−'''7. Creating the Timeline:'''
+'''7. Creating the Timeline:'''
'''* Dates:''' Expand the date column to input the dates for each event. Dates should be entered in the format YYYY, MM, DD. If you don't have the exact date, the year is mandatory.
'''* Dates:''' Expand the date column to input the dates for each event. Dates should be entered in the format YYYY, MM, DD. If you don't have the exact date, the year is mandatory.
Line 351:
Line 319:
'''Tips:'''
'''Tips:'''
−- For better understanding it is always recommended to use all the features one by one and preview your project after every step.
+-For better understanding it is always recommended to use all the features one by one and preview your project after every step.or
−For better understanding using '''Timeline,''' [https://cloud.itforchange.net/s/Csq5nna9qBptP4F Click here to watch the video]
+
+
+==== Common behavior settings ====
+
+===== True or false =====
+#'''Enable "Retry" Button:''' Allows users to retry if they give the wrong answer.
+#'''Enable "Show Solution" Button :''' If the user answers incorrectly, they will see a "Show Solution" button after submitting their answer. Clicking it will display the correct answer.
+#'''Question Type:'''
+#* If your question has a single correct answer, choose "Single Choice" (Radio Button).
+#* If your question has multiple correct answers, choose "Multiple Choice" (Check Boxes).
+#'''Give One Point for the Whole Task:''' Enable this option to give a total of one point for multiple correct answers. This option is not available in "Single Choice" mode.
+#'''Randomize Answers:''' Enable this to randomize the order of the answers when displayed.
+#'''Show Confirmation Dialog on "Check":''' Before submitting an answer, the user will be asked to confirm their submission, helping prevent accidental submissions.
+#'''Show Confirmation Dialog on "Retry":''' This works the same as the previous option but applies to the "Retry" button.
+#'''Automatically Check Answer:''' This option will automatically check the answer as soon as it's selected, so there will be no need for a "Check" button.
+
+===== Fill in the blanks =====
+#'''Enable "Retry" Button:''' Allows users to retry if they give the wrong answer.
+#'''Enable "Show Solution" Button:''' If the user answers incorrectly, they will see a "Show Solution" button after submitting their answer. Clicking it will display the correct answer.
+#'''Automatically Check Answer :''' This option automatically checks the answer as soon as it's clicked, eliminating the need for a "Check" button.
+#'''Case Sensitive:''' If enabled, the user must input the answer exactly as you have written it.
+#'''Require All Fields to Be Answered Before the Solution Can Be Viewed:''' Users must fill in all blanks before the hint is shown.
+#'''Put Input Fields on Separate Lines:''' This option allows users to enter their answers on separate lines.
+#'''Show Confirmation Dialog on "Check":''' Before submitting an answer, the user will be asked to confirm their submission, helping prevent accidental submissions.
+#'''Show Confirmation Dialog on "Retry" :''' This works the same as the previous option but applies to the "Retry" button.
+#'''Accept Minor Spelling Errors:''' If activated, the answer will still count as correct even with minor spelling errors (1 error for 3-9 characters, 2 errors for more than 9 characters).
+
+===== Flash Cards =====
+#'''Case Sensitive:''' If you enable this option, the user must input the answer exactly as you have typed it.
+#'''Require All Fields to Be Answered Before the Solution Can Be Viewed:''' The hint will not be shown until all fields are completed.
+#'''Randomize Answers:''' Enable this to randomize the order in which the answers are displayed.
+#'''Adding More Flashcards:''' Once you’ve finished creating a card, you can click the "Add Card" button to add more flashcards or questions.
+
+
+
+'''Note:'''
+
+# These check boxes should be checked according to your specific requirements. There's no need to check or uncheck all of them.
+# For better understanding, it's recommended to try checking and unchecking each option one by one and previewing the results.
+
+[[File:Exporta.png|thumb|418x418px|An image of exporting Lumi ]]
+
+
+==== {{Note}} '''Difference Between Save and Export''' ====
'''Save:''' When you done the changes you've made are stored in the project file. If you share this project file with others, they will need to have the Lumi application installed on their devices to view or edit your packages. However, they won’t be able to interact with it.
'''Save:''' When you done the changes you've made are stored in the project file. If you share this project file with others, they will need to have the Lumi application installed on their devices to view or edit your packages. However, they won’t be able to interact with it.
Line 362:
Line 374:
'''Recommendation:''' It is recommended to use the HTML file ( exported ) on a computer for better viewing and easier interaction.
'''Recommendation:''' It is recommended to use the HTML file ( exported ) on a computer for better viewing and easier interaction.
−===== '''How to Export?''' =====
−1. Preview your project to ensure everything works as expected.
1. Preview your project to ensure everything works as expected.