Line 148:
Line 148:
=====Multiple Choice Questions=====
=====Multiple Choice Questions=====
−
[[File:06 MC Opt.png|thumb|457x457px|Adding details to multiple-choice questions interface.]]
+
[[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.'''
First, we created a True or False content type. Now, let’s explore another example: '''Multiple Choice.'''
Line 159:
Line 159:
'''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.
−
[[File:06.1Options.png|left|thumb|640x640px|Adding details to multiple-choice questions interface continued ]]
+
[[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.
'''4. Add New Option:''' If you need more options, click the "Add New Option" button at the bottom.
Line 183:
Line 183:
=====Fill in the blanks=====
=====Fill in the blanks=====
+
[[File:Lumi Fillintheblanks1.png|thumb|660x660px|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 188:
Line 189:
'''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."'''
−
−
<gallery mode="packed" heights="400">
−
File:Lumi Fillintheblanks1.png|Fill in the blanks activity
−
File:Lumifillintheblanks2.png|Fill in the blanks interface
−
</gallery>
−
'''Follow these steps to mark the blank answers:'''
'''Follow these steps to mark the blank answers:'''
Line 212:
Line 207:
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."
−
+
[[File:Lumifillintheblanks2.png|center|thumb|811x811px|Preview of fill in the blanks]]
−
'''3. Behavior Settings :'''
−
−
'''* 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).
−
−
'''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 =====
=====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.
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'''
'''How to Create Flashcards'''
Line 259:
Line 228:
<nowiki>*</nowiki> In the answer box, type "Brain." You can also include alternative answers by separating them with a forward slash ("/").
<nowiki>*</nowiki> In the answer box, type "Brain." You can also include alternative answers by separating them with a forward slash ("/").
−
'''4. Behavior Settings:'''
+
[[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]]
+
+
+
+
+
+
+
−
'''* 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.
===== 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.
−
<gallery mode="packed" heights="400">
+
[[File:Lumi TImeline1.png|thumb|600x600px|Image of creating a timeline]]
−
File:Lumi TImeline1.png|Timeline creation settings
+
'''How to Create a Timeline'''
−
File:Lumi Timeline2.png|Timeline creation settings
−
</gallery>
−
−
'''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 305:
Line 273:
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 334:
Line 302:
'''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]
Line 345:
Line 316:
'''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.
−
<nowiki>====</nowiki> '''How to Export?''' <nowiki>
+
−
<gallery mode="packed" heights="400">
+
===== Common behavior settings =====
−
File:Exporta.png|Exporting the lumi project
+
−
</gallery>
+
+
[[File:Exporta.png|thumb|418x418px|An image of exporting Lumi ]]
+
+
+
'''How to Export?'''
1. Preview your project to ensure everything works as expected.
1. Preview your project to ensure everything works as expected.