

{"id":29894,"date":"2020-12-07T12:59:34","date_gmt":"2020-12-07T11:59:34","guid":{"rendered":"https:\/\/blog.hwr-berlin.de\/elerner\/?p=29894"},"modified":"2022-06-22T09:44:41","modified_gmt":"2022-06-22T07:44:41","slug":"interaktive-moodleinhalte-mit-h5p-erstellen","status":"publish","type":"post","link":"https:\/\/blog.hwr-berlin.de\/elerner\/interaktive-moodleinhalte-mit-h5p-erstellen\/","title":{"rendered":"Interaktive Moodleinhalte mit H5P erstellen"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8220;1&#8243; admin_label=&#8220;section&#8220; _builder_version=&#8220;4.16&#8243; global_colors_info=&#8220;{}&#8220;][et_pb_row column_structure=&#8220;1_2,1_2&#8243; admin_label=&#8220;row&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;1_2&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_blurb use_icon=&#8220;on&#8220; font_icon=&#8220;&#x70;||divi||400&#8243; icon_placement=&#8220;left&#8220; content_max_width=&#8220;100%&#8220; _builder_version=&#8220;4.16&#8243; _module_preset=&#8220;default&#8220; background_color=&#8220;#F0F0F1&#8243; custom_padding=&#8220;20px|20px|20px|20px|true|true&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p><strong>Eine genauere Erkl\u00e4rung, wie H5P-Elemente in die Kursoberfl\u00e4che eingebaut werden k\u00f6nnen finden Sie <a href=\"https:\/\/blog.hwr-berlin.de\/elerner\/moodle-quickeasy-einbettung-von-h5p-elementen\/\" target=\"_blank\" rel=\"noopener noreferrer\">hier<\/a>.<\/strong><\/p>\n<p>[\/et_pb_blurb][\/et_pb_column][et_pb_column type=&#8220;1_2&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8220;row&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;4_4&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_text admin_label=&#8220;Text&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p><strong><em style=\"font-size: 16px;\">Ein Gastbeitrag von Marei Kalinka, Tutorin im E-Learning Zentrum<\/em><\/strong><\/p>\n<h2>1. Die interaktive Zeitleiste<\/h2>\n<p>Behandeln Sie im Kurs ein geschichtsnahes Thema, indem Sie Daten und Ereignisse zum einfacheren Verst\u00e4ndnis visualisieren m\u00f6chten? Hier bietet sich eine interaktive Zeitleiste an. Die Studierenden k\u00f6nnen mit der Zeitleiste interagieren, vor und zur\u00fcck springen und sich genauer zu einzelnen Themen informieren. W\u00e4hlen Sie hierf\u00fcr beim Einf\u00fcgen eines H5P-Elementes \u201eTimeline\u201c aus.<\/p>\n<h3>Wir gehen Sie vor?<\/h3>\n<p>Im ersten Schritt ben\u00f6tigen Sie einen Namen (der nicht angezeigt wird) und eine \u00dcberschrift (wird angezeigt). Wir empfehlen auch ein Hintergrundbild einzuf\u00fcgen, um die Zeitleiste noch ansprechender zu gestalten. Au\u00dferdem kann ein Zoom eingestellt werden, bei dem in der Zeitleiste mit einem Klick die Ereignisse vergr\u00f6\u00dfert oder verkleinert werden k\u00f6nnen.<\/p>\n<div id=\"attachment_29910\" style=\"width: 381px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-29910\" class=\"wp-image-29910\" src=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Timeline_1-294x300.png\" alt=\"\" width=\"371\" height=\"379\" srcset=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Timeline_1-294x300.png 294w, https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Timeline_1.png 641w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><p id=\"caption-attachment-29910\" class=\"wp-caption-text\">Konfiguration der Timeline in der Moodleaktivit\u00e4t.<\/p><\/div>\n<p>Im n\u00e4chsten Schritt wird die eigentliche Zeitleiste erstellt. Hier m\u00fcssen die einzelnen Daten eingetragen werden. Wichtig ist das Ausf\u00fcllen des Startdatums und der \u00dcberschrift. Au\u00dferdem k\u00f6nnen optional den einzelnen Ereignissen Enddaten zugeordnet werden und im Textfeld lohnt es sich, eine genauere Beschreibung einzuf\u00fcgen. Hier k\u00f6nnen auch Links oder Verweise auf zus\u00e4tzliche Quellen eingef\u00fcgt werden.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_29959\" style=\"width: 650px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-29959\" class=\"wp-image-29959 size-large\" src=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Timeline-1024x469.png\" alt=\"\" width=\"640\" height=\"293\" srcset=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Timeline-1024x469.png 1024w, https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Timeline-300x137.png 300w, https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Timeline-768x352.png 768w, https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Timeline.png 1198w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><p id=\"caption-attachment-29959\" class=\"wp-caption-text\">Fertige Timeline<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>Nach dem anschlie\u00dfenden Speichern kann die Zeitleiste ausprobiert, kontrolliert und gegebenenfalls korrigiert werden. Es kann sich nun durch die einzelnen Ereignisse geklickt werden, welche mit Inhalten, Links und Bildern noch zug\u00e4nglicher gestaltet wurden.<\/p>\n<p>&nbsp;<\/p>\n<h2>2. Drag &amp; Drop<\/h2>\n<p>Eine weitere M\u00f6glichkeit, die H5P bietet, um spielerisch zu lehren, ist das Erstellen von \u201eDrag and Drop\u201c-L\u00f6sungen. \u201eDrag and Drop\u201c eignet sich beispielsweise sehr gut f\u00fcr den Sprachunterricht. Mit Hilfe eines Hintergrundbildes und einzelner Textfeldern k\u00f6nnen Vokabeln gelehrt oder abgefragt werden. Am Beispiel der Zeitleiste k\u00f6nnte durch \u201eDrag and Drop\u201c auch das inhaltliche Wissen in einem Test abgefragt werden. Hierf\u00fcr k\u00f6nnten die Studierenden auf einer Leiste die einzelnen Events korrekt zu sortieren und durch korrekte Antworten Punkte erreichen, sofern gew\u00fcnscht.<\/p>\n<h3>Wie gehen Sie vor?<\/h3>\n<p>Nach dem Vergeben eines Titels muss ein Hintergrundbild eingef\u00fcgt werden, auf dem die Textfelder sp\u00e4ter richtig sortiert werden m\u00fcssen. Im zweiten Schritt wird die Aufgabe erstellt. Hierbei m\u00fcssen die Ablageorte erstellt werden, auf denen die Textfelder angeordnet werden sollen. Klicken Sie am Beispiel der nebenstehenden Grafik beispielweise auf den Bildschirm und benennen den Ablageort Bildschirm. Dann Erstellen Sie den Text und klicken hier unbedingt auf die passende Ablagezone, damit Text und Zone verkn\u00fcpft werden.<\/p>\n<p>Nun m\u00fcssen Sie nur noch die Punktebereiche definieren. Also bei Erreichen welcher Punktzahl, welche R\u00fcckmeldung an die \u00fcbende Person gegeben wird. Beispielsweise k\u00f6nnte im Bereich von 0% bis 70% die R\u00fcckmeldung kommen \u201eunzureichende Punktzahl\u201c und von 71% bis 100% \u201egute Punktzahl\u201c. Erneut das Speichern nicht vergessen, und das interaktive Lehren und Lernen kann beginnen.<\/p>\n<div id=\"attachment_29960\" style=\"width: 650px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-29960\" class=\"wp-image-29960 size-large\" src=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Zuordnung-1024x643.png\" alt=\"\" width=\"640\" height=\"402\" srcset=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Zuordnung-1024x643.png 1024w, https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Zuordnung-300x188.png 300w, https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Zuordnung-768x482.png 768w, https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Zuordnung.png 1204w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><p id=\"caption-attachment-29960\" class=\"wp-caption-text\">Fertiges Ergebnis.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit H5P lassen sich vielerlei interaktive Inhalte in Moodle einbauen, von denen wir Ihnen hier einige vorstellen m\u00f6chten. Vielleicht m\u00f6chten Sie Ihrem Kurs eine kleine Freude in der Adventszeit bereiten und spielerisch die Weihnachtszeit einleiten? Bei den vielen interaktiven Inhalten, die die Aktivit\u00e4t H5P mit sich bringt, sind der Kreativit\u00e4t keine Grenzen gesetzt. M\u00f6chten Sie vielleicht ein Wortr\u00e4tsel oder ein Memory erstellen? Auch weitere Aktivit\u00e4ten wie das Kreieren von Collagen, Grafiken, interaktiven Videos, Quizzen oder Ereignisb\u00e4ume sind m\u00f6glich.<\/p>\n","protected":false},"author":114,"featured_media":26858,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<em>Ein Gastbeitrag von Marei Kalinka, Tutorin im E-Learning Zentrum<\/em>\r\n\r\nMit H5P lassen sich vielerlei interaktive Inhalte in Moodle einbauen, von denen wir Ihnen hier einige vorstellen m\u00f6chten. Vielleicht m\u00f6chten Sie Ihrem Kurs eine kleine Freude in der Adventszeit bereiten und spielerisch die Weihnachtszeit einleiten? Eine genauere Erkl\u00e4rung, wie H5P-Elemente in die Kursoberfl\u00e4che eingebaut werden k\u00f6nnen finden Sie <a href=\"https:\/\/blog.hwr-berlin.de\/elerner\/moodle-quickeasy-einbettung-von-h5p-elementen\/\" target=\"_blank\" rel=\"noopener noreferrer\">hier<\/a>.\r\n\r\nBei den vielen interaktiven Inhalten, die die Aktivit\u00e4t H5P mit sich bringt, sind der Kreativit\u00e4t keine Grenzen gesetzt. M\u00f6chten Sie vielleicht ein Wortr\u00e4tsel oder ein Memory erstellen? Auch weitere Aktivit\u00e4ten wie das Kreieren von Collagen, Grafiken, interaktiven Videos, Quizzen oder Ereignisb\u00e4ume sind m\u00f6glich.\r\n\r\nIm Folgenden wollen wir Ihnen zwei H5P-Elemente n\u00e4her vorstellen.\r\n\r\n\u00a0\r\n<h2>1. Die interaktive Zeitleiste<\/h2>\r\nBehandeln Sie im Kurs ein geschichtsnahes Thema, indem Sie Daten und Ereignisse zum einfacheren Verst\u00e4ndnis visualisieren m\u00f6chten? Hier bietet sich eine interaktive Zeitleiste an. Die Studierenden k\u00f6nnen mit der Zeitleiste interagieren, vor und zur\u00fcck springen und sich genauer zu einzelnen Themen informieren. W\u00e4hlen Sie hierf\u00fcr beim Einf\u00fcgen eines H5P-Elementes \u201eTimeline\u201c aus.\r\n<h3>Wir gehen Sie vor?<\/h3>\r\nIm ersten Schritt ben\u00f6tigen Sie einen Namen (der nicht angezeigt wird) und eine \u00dcberschrift (wird angezeigt). Wir empfehlen auch ein Hintergrundbild einzuf\u00fcgen, um die Zeitleiste noch ansprechender zu gestalten. Au\u00dferdem kann ein Zoom eingestellt werden, bei dem in der Zeitleiste mit einem Klick die Ereignisse vergr\u00f6\u00dfert oder verkleinert werden k\u00f6nnen.\r\n\r\n[caption id=\"attachment_29910\" align=\"alignleft\" width=\"371\"]<img class=\"wp-image-29910\" src=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Timeline_1-294x300.png\" alt=\"\" width=\"371\" height=\"379\" \/> Konfiguration der Timeline in der Moodleaktivit\u00e4t.[\/caption]\r\n\r\nIm n\u00e4chsten Schritt wird die eigentliche Zeitleiste erstellt. Hier m\u00fcssen die einzelnen Daten eingetragen werden. Wichtig ist das Ausf\u00fcllen des Startdatums und der \u00dcberschrift. Au\u00dferdem k\u00f6nnen optional den einzelnen Ereignissen Enddaten zugeordnet werden und im Textfeld lohnt es sich, eine genauere Beschreibung einzuf\u00fcgen. Hier k\u00f6nnen auch Links oder Verweise auf zus\u00e4tzliche Quellen eingef\u00fcgt werden.\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\n[caption id=\"attachment_29959\" align=\"aligncenter\" width=\"640\"]<img class=\"wp-image-29959 size-large\" src=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Timeline-1024x469.png\" alt=\"\" width=\"640\" height=\"293\" \/> Fertige Timeline[\/caption]\r\n\r\n\u00a0\r\n\r\nNach dem anschlie\u00dfenden Speichern kann die Zeitleiste ausprobiert, kontrolliert und gegebenenfalls korrigiert werden. Es kann sich nun durch die einzelnen Ereignisse geklickt werden, welche mit Inhalten, Links und Bildern noch zug\u00e4nglicher gestaltet wurden.\r\n\r\n\u00a0\r\n<h2>2. Drag & Drop<\/h2>\r\nEine weitere M\u00f6glichkeit, die H5P bietet, um spielerisch zu lehren, ist das Erstellen von \u201eDrag and Drop\u201c-L\u00f6sungen. \u201eDrag and Drop\u201c eignet sich beispielsweise sehr gut f\u00fcr den Sprachunterricht. Mit Hilfe eines Hintergrundbildes und einzelner Textfeldern k\u00f6nnen Vokabeln gelehrt oder abgefragt werden. Am Beispiel der Zeitleiste k\u00f6nnte durch \u201eDrag and Drop\u201c auch das inhaltliche Wissen in einem Test abgefragt werden. Hierf\u00fcr k\u00f6nnten die Studierenden auf einer Leiste die einzelnen Events korrekt zu sortieren und durch korrekte Antworten Punkte erreichen, sofern gew\u00fcnscht.\r\n<h3>Wie gehen Sie vor?<\/h3>\r\nNach dem Vergeben eines Titels muss ein Hintergrundbild eingef\u00fcgt werden, auf dem die Textfelder sp\u00e4ter richtig sortiert werden m\u00fcssen. Im zweiten Schritt wird die Aufgabe erstellt. Hierbei m\u00fcssen die Ablageorte erstellt werden, auf denen die Textfelder angeordnet werden sollen. Klicken Sie am Beispiel der nebenstehenden Grafik beispielweise auf den Bildschirm und benennen den Ablageort Bildschirm. Dann Erstellen Sie den Text und klicken hier unbedingt auf die passende Ablagezone, damit Text und Zone verkn\u00fcpft werden.\r\n\r\nNun m\u00fcssen Sie nur noch die Punktebereiche definieren. Also bei Erreichen welcher Punktzahl, welche R\u00fcckmeldung an die \u00fcbende Person gegeben wird. Beispielsweise k\u00f6nnte im Bereich von 0% bis 70% die R\u00fcckmeldung kommen \u201eunzureichende Punktzahl\u201c und von 71% bis 100% \u201egute Punktzahl\u201c. Erneut das Speichern nicht vergessen, und das interaktive Lehren und Lernen kann beginnen.\r\n\r\n[caption id=\"attachment_29960\" align=\"aligncenter\" width=\"640\"]<img class=\"wp-image-29960 size-large\" src=\"https:\/\/blog.hwr-berlin.de\/elerner\/wp-content\/uploads_elerner\/2020\/12\/Screen_H5P_Zuordnung-1024x643.png\" alt=\"\" width=\"640\" height=\"402\" \/> Fertiges Ergebnis.[\/caption]\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\n\u00a0","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[413],"tags":[844,336,143],"class_list":["post-29894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-moodle","tag-h5p","tag-interaktive-elemente","tag-moodle"],"_links":{"self":[{"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/posts\/29894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/users\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/comments?post=29894"}],"version-history":[{"count":23,"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/posts\/29894\/revisions"}],"predecessor-version":[{"id":35985,"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/posts\/29894\/revisions\/35985"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/media\/26858"}],"wp:attachment":[{"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/media?parent=29894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/categories?post=29894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hwr-berlin.de\/elerner\/wp-json\/wp\/v2\/tags?post=29894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}