Difference between revisions of "Learn H5P"

From Open Educational Resources
Jump to navigation Jump to search
Line 51: Line 51:
 
# Slides :  
 
# Slides :  
 
* We'll start by adding a keyword in the keywords panel to the left. The keywords can also be used to navigate between the slides.  
 
* We'll start by adding a keyword in the keywords panel to the left. The keywords can also be used to navigate between the slides.  
* Click on the "three line" icon to add a keyword for the slide  
+
* Click on the "three line" icon to add a keyword for the slide and click on the add new slide option from button right side panel to add multiple slides.
 
2. Text :  
 
2. Text :  
  
To add a block of text to the slide. Click on the text icon, a dialog will appear Insert the text in the '''Edit text''' dialog,  Leave the other fields blank and press '''Done'''. You can move and resize the text block in the same way as images.  
+
To add a block of text to the slide. Click on the text icon, a dialog will appear Insert the text in the '''Edit text''' dialog,  Leave the other fields blank and press '''Done'''.
 +
 
 +
[Image - add text dialogue]
 +
 
 +
You can move and resize the text block in the same way as images.  
  
 
3. Link :   
 
3. Link :   
Line 62: Line 66:
 
4. Image :
 
4. Image :
  
We can upload and add the pictures by using this option. Click on this icon ->
+
Press this button, drag it to where you want the image to be placed and drop it there. A dialog will automatically open. Press on the "'''+"''' icon browse to where you saved the picture you want to add and select it for upload.
 +
 
 +
[image upload option] [image - licence]
 +
 
 +
We must also remember to add multimedia license information. Add the following information to the '''Edit copyright''' dialog.
 +
 
 +
Finally, we have to add an '''Alternative text''' and a '''Hover text'''. The '''Alternative text''' is used to describe the image as an alternative to being displayed. The '''Hover text''' will show up on devices using a mouse when the cursor hovers over the image. Now resize the picture by pulling in the lower right corner of the image.
 +
 
 +
5.
 
* Video
 
* Video
 
* Audio
 
* Audio
Line 73: Line 85:
 
* Mark the word
 
* Mark the word
 
* More elements
 
* More elements
 +
 +
==== Dialog Cards ====
 +
The Dialog cards content type enables you to create a set of cards with corresponding words or expressions on either side of the cards. Dialog cards can be used as a drill to help learners memorize words, expressions or senctences. Dialog cards provide a prompt on one side of the card, and a corresponding answer on the other side.
 +
 +
Now lets start create dialog cards by selecting this option from this content types. The Dialog cards editor should now appear. The top part of the editor looks like this:
 +
 +
[Dialog card main image]
 +
* The '''Title''' will be displayed to the learner throughout the set of cards.
 +
* '''Task description :''' In this field we can give elaborate instructions to the learner. The '''Task description''' is displayed throughout the entire set of cards, below the '''Title'''. Insert the following text.
 +
** '''Dialogs''' : Press the '''Add dialog''' button to add the first card. Here, "Text" means you need to type the question or any word which learning should thing and answer. 
 +
[Image - dialog card main page]
 +
 +
In the '''Answer''' field, we provide the correct answer. Additionally  yoy can image and audio file under the '''Image and audio''' section (this optional).
 +
* By clicking and add dialog you can keep creating dialog cards like this in the file.
 +
* '''Save''' the node/article when you're satisfied to view your final set of Flashcards.
  
 
=== Additional references ===
 
=== Additional references ===
 
# [https://h5p.org/documentation/for-authors/tutorials Handout for content authors]
 
# [https://h5p.org/documentation/for-authors/tutorials Handout for content authors]

Revision as of 12:40, 6 June 2018


Introduction

H5P is short for HTML5 Package and is a simple way to create and share rich and interactive web content. H5P is modular and consists of several content types and applications. This H5P will allow to teachers to create interactive learning contents and students can use those contents through computers, mobilles and tablets.

Basic information

ICT Competency
Educational application and relevance
Version
Other similar applications
The application on mobiles and tablets
Development and community help https://h5p.org/about-the-project

Working with application

There are different kinds of contents you can create and here are some important ones. For creating any content in H5P, you need to sign up in their website https://h5p.org/testdrive-h5p.

[Image 1]

Once you registered with this site now its time to login and create your first content. To save your created contents, a user account is needed and also later you can modify the created contents. Once you login, It will show the users basic details

There are different kinds of content creation types are :

  1. Course Presentation
  2. Multiple Choice
  3. Interactive Video
  4. Fill in the Blanks
  5. Drag the words
  6. True/False Question
  7. Audio resources

These are some popular content types but in h5P you can find many more types from here

Course presentation

The Course presentation content type allows you to create a slide-based presentation of your learning material. Elements such as text, images, audio’s and videos. By combining any of these resources you can create contents.

Also, this presentation content type which allow users to add multiple choice, fill in the blanks, texts and other types of interactions with in their presentations. The Course presentation editor should now appear. The top part of the editor looks like this:

[Image]

  1. Slides :
  • We'll start by adding a keyword in the keywords panel to the left. The keywords can also be used to navigate between the slides.
  • Click on the "three line" icon to add a keyword for the slide and click on the add new slide option from button right side panel to add multiple slides.

2. Text :

To add a block of text to the slide. Click on the text icon, a dialog will appear Insert the text in the Edit text dialog, Leave the other fields blank and press Done.

[Image - add text dialogue]

You can move and resize the text block in the same way as images.

3. Link :

Using this you can add any external webpage links in your slide. To add link, just click on the link icon -> add Title for your link, in the URL box just type (or copy paste the) URL of the webpage.

4. Image :

Press this button, drag it to where you want the image to be placed and drop it there. A dialog will automatically open. Press on the "+" icon browse to where you saved the picture you want to add and select it for upload.

[image upload option] [image - licence]

We must also remember to add multimedia license information. Add the following information to the Edit copyright dialog.

Finally, we have to add an Alternative text and a Hover text. The Alternative text is used to describe the image as an alternative to being displayed. The Hover text will show up on devices using a mouse when the cursor hovers over the image. Now resize the picture by pulling in the lower right corner of the image.

5.

  • Video
  • Audio
  • Go to slide
  • Fill in the blanks
  • Single choice set and Multi choice
  • True/False questions
  • Summary
  • Drag text
  • Mark the word
  • More elements

Dialog Cards

The Dialog cards content type enables you to create a set of cards with corresponding words or expressions on either side of the cards. Dialog cards can be used as a drill to help learners memorize words, expressions or senctences. Dialog cards provide a prompt on one side of the card, and a corresponding answer on the other side.

Now lets start create dialog cards by selecting this option from this content types. The Dialog cards editor should now appear. The top part of the editor looks like this:

[Dialog card main image]

  • The Title will be displayed to the learner throughout the set of cards.
  • Task description : In this field we can give elaborate instructions to the learner. The Task description is displayed throughout the entire set of cards, below the Title. Insert the following text.
    • Dialogs : Press the Add dialog button to add the first card. Here, "Text" means you need to type the question or any word which learning should thing and answer.

[Image - dialog card main page]

In the Answer field, we provide the correct answer. Additionally yoy can image and audio file under the Image and audio section (this optional).

  • By clicking and add dialog you can keep creating dialog cards like this in the file.
  • Save the node/article when you're satisfied to view your final set of Flashcards.

Additional references

  1. Handout for content authors