{"id":73532,"date":"2023-12-04T14:21:11","date_gmt":"2023-12-04T13:21:11","guid":{"rendered":"https:\/\/zfl-lernen.de\/?page_id=73532"},"modified":"2024-04-18T09:24:39","modified_gmt":"2024-04-18T07:24:39","slug":"branching-scenario-h5p","status":"publish","type":"page","link":"https:\/\/zfl-lernen.de\/en\/lernmaterial_erstellen_wordpress\/branching-scenario-h5p\/","title":{"rendered":"Branching Scenario in H5P"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

Erstellung eines Branching Scenarios in H5P<\/h2>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Das Branching Scenario erm\u00f6glicht Autor*innen, den Lernenden eine Vielzahl von Inhalten (Course Presentations, Bilder, Texte, interaktive Hotspots) sowie Antwortm\u00f6glichkeiten zu pr\u00e4sentieren. Die Lernenden treffen eine Auswahl aus mehreren L\u00f6sungsvorschl\u00e4gen. Die vorher ausgew\u00e4hlten Antworten bestimmen fortlaufend den Inhalt, den sie als n\u00e4chstes sehen werden.<\/p>\n

In diesem Artikel erfahren Sie, wie Sie ein Branching Scenario erstellen, welche M\u00f6glichkeiten es bez\u00fcglich der Gestaltung gibt und welche technischen Aspekte Sie ber\u00fccksichtigen m\u00fcssen.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n

<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

1. Vorzeige-Beispiel<\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Es wurde ein Vorzeige-Beispiel in H5P entwickelt. Darin k\u00f6nnen Sie direkt alle M\u00f6glichkeiten sehen und ausprobieren, die ein Branching Scenario bietet. (Direkt zum Beispiel: „Vorzeige Beispiel Branching Scenario“<\/a><\/strong>.) Sie finden diese Vorlage unter allen H5P-Elementen auch in der Suche. \u00a0<\/strong><\/p>\n

\"\"<\/p>\n

Sie haben die Auswahl zwischen sechs verschiedenen H5P- Inhaltstypen.<\/p>\n

<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

2. Nutzungsm\u00f6glichkeiten<\/strong><\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Auf der Seite von H5P (https:\/\/h5p.org\/branching-scenario#example=439819<\/a>) werden zwei Beispiele auf Englisch vorgestellt, die verschiedene Nutzungsm\u00f6glichkeiten eines Branching Scenarios zeigen:<\/p>\n

<\/h3>\n
    \n
  1. Ein videobasiertes Branching Scenario<\/strong> \u201cSkills Practice: A Home Visit\u201d<\/strong><\/li>\n
  2. Ein nicht videobasiertes oder dilemmabasiertes Branching Scenario \u201cArts of Europe\u201d, <\/strong>dessen Inhalt auf Course Presentations<\/strong> basiert.<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n
    <\/span><\/div><\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t
    \n\t\t\t

    3. Neues Branching Scenario anlegen und benennen<\/strong><\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t
    \n\t\t\t

    Wie finde ich die Branching Scenarios? <\/strong><\/p>\n

    Die Branching Scenarios befinden sich in den H5P-Inhalten. Suchen Sie daf\u00fcr in der linken Taskleiste in WordPress nach dem H5P-Plugin \u201cH5P-Inhalt\u201d<\/strong>.<\/p>\n

    \"\"<\/p>\n


    \nUm ein neues Branching Scenario anzulegen, gibt es zwei Optionen:<\/strong><\/p>\n

    <\/p>\n

      \n
    1. Sie duplizieren<\/strong> das Element „ZfL_Branching Scenario Vorlage_Kopie_Abstellen der Klingel“<\/strong>. (Es ist eine Kopie des Branching Scenarios „Gelingend Kommunizieren“<\/a><\/strong> im Fallbeispiel „Abstellen der Klingel“.) (empfohlen)<\/li>\n
    2. Sie erstellen ein neues Branching Scenario<\/strong> \u00fcber \u201cErstellen\u201d<\/strong> am oberen Seitenrand.<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

      1. Option (empfohlen): Kopieren der Vorlage<\/h4><\/i><\/div>

      1. Suchen Sie die Vorlage unter den H5P-Elementen. Die Vorlage hei\u00dft: „ZfL_Vorlage_Wiki_bitte_umbenennen_Abstellen der Klingel“<\/strong>. Daf\u00fcr geben Sie den Titel oder einzelne passende W\u00f6rter in die Suchleiste ein und klicken anschlie\u00dfend links auf den Titel des Branching Scenarios, um es zu \u00f6ffnen. Alternativ k\u00f6nnen Sie auf folgenden Link klicken, um zur Vorlage zu gelangen: „<\/strong><\/a>ZfL_Vorlage_Wiki_bitte_umbenennen_Abstellen der Klingel<\/a>„<\/strong><\/p>\n

      \"Screenshot<\/p>\n

      2. Wenn Sie das Branching Scenario ge\u00f6ffnet haben, klicken Sie anschlie\u00dfend auf „Bearbeiten“<\/strong>.<\/p>\n

      \"Screenshot<\/p>\n

      3. Nun erscheint \u00fcber dem Branching-Scenario-Fenster folgende Leiste von H5P mit den Optionen „Kopieren“ und „Einf\u00fcgen & Ersetzen“. Da Sie die Vorlage kopieren m\u00f6chten, klicken Sie auf „Kopieren“<\/strong>. Damit haben Sie das Branching Scenario erfolgreich kopiert.<\/p>\n

      \"Screenshot<\/p>\n

      4. Sie erstellen ein neues H5P-Element<\/strong>, indem Sie zur\u00fcck auf die \u00dcbersicht aller H5P-Elemente<\/strong> gehen.<\/p>\n

      \"\"<\/p>\n

      5. Dann klicken Sie ganz oben auf der Seite neben „Alle H5P-Inhalte“ auf „Erstellen“<\/strong>.<\/p>\n

      \"Screenshot<\/p>\n

      6. Anschlie\u00dfend erscheint folgende Ansicht mit einer H5P-Leiste mit der Option „Einf\u00fcgen“<\/strong>. Klicken Sie nun bitte auf „Einf\u00fcgen“<\/strong>. (Es dauert nur ein paar Sekunden, um die Inhalte der Vorlage einzuf\u00fcgen.)<\/p>\n

      \"\"<\/p>\n

      7. Dann erscheint der gleiche Titel der Vorlage in der Titelzeile. Benennen Sie deshalb bitte Ihr neues H5P-Element um<\/strong>. Benennen Sie das Branching Scenario \u2013 wie alle anderen H5P-Elemente auch \u2013 nach folgendem Schema nach der Struktur der Website „zfl-lernen.de“: \u201cZfL_Lernmodulname_Lektion_(Websitebereiche)_ Element\u201d<\/strong>
      \nHier ein Beispiel:\u00a0\u201cZfL_Ver\u00e4nderung in der Schule bewirken_Kommunikation_Fallbeispiel_Abstellen der Klingel\u201d<\/strong><\/p>\n

      \"\"<\/p>\n

      \"Icon<\/em><\/strong><\/p>\n

       <\/p>\n

      ZfL kann wahlweise auch durch digiLL oder Auftraggeber\/Projektpartner (Mercator, sdw, Hans-Riegel, …) ersetzt oder erg\u00e4nzt werden.<\/p>\n


      \n<\/p>\n

      <\/figure>\n

      <\/p>\n

      8. Klicken Sie anschlie\u00dfend rechts auf „Erstellen\u201c<\/strong>. Ihrem Branching Scenario wird nun automatisch eine H5P-ID zugewiesen.<\/p>\n

      <\/p>\n

      9. Sie haben nun erfolgreich eine Kopie der Vorlage erstellt und k\u00f6nnen diese anschlie\u00dfend bearbeiten. Wie Sie das Branching Scenario bearbeiten, wird Ihnen in den n\u00e4chsten Kapiteln erl\u00e4utert.<\/p>\n<\/div><\/div>

      Weitere Informationen zur Vorlage<\/h4><\/i><\/div>

      Die Vorlage enth\u00e4lt mehrere Darstellungsoptionen<\/strong>. Entscheiden Sie sich f\u00fcr eine der folgenden M\u00f6glichkeiten:<\/p>\n

        \n
      1. Zwei Einleitungsm\u00f6glichkeiten: 1a) ein Text-Element mit Begr\u00fc\u00dfungstext<\/strong>, 1b) eine Course Presentation<\/strong> mit Begr\u00fc\u00dfungstext auf mindestens zwei Pr\u00e4sentationsseiten und optional mit Bilder(n)<\/li>\n
      2. Zwei M\u00f6glichkeiten, um zusammengefassten Inhalt in Stichpunkten <\/strong>darzustellen: 2a) ein Text-Element<\/strong>, 2b) ein Bild-Element<\/strong> mit Alternativtext. Infografiken k\u00f6nnen mit der Website vectr.com<\/a><\/strong>\u00a0erstellt werden. Im Artikel „Bilder online erstellen mit Vectr“<\/a><\/strong> finden Sie eine Anleitung dazu.<\/li>\n<\/ol>\n

        \"Icon<\/p>\n

        Sobald innerhalb von Bildern Text verwendet wird, ist es f\u00fcr die Barrierefreiheit von enormer Bedeutung, Alternativtext anzugeben. Weitere Informationen finden Sie auch im Artikel „Hinweise zur Barrierefreiheit“<\/a><\/strong>.<\/p>\n<\/div><\/div>

        2. Option: Neues Branching Scenario erstellen<\/h4><\/i><\/div>

        1. Sie erstellen ein neues Branching Scenario<\/strong> \u00fcber \u201cErstellen\u201d<\/strong> am oberen Seitenrand auf der Seite aller H5P-Elemente. (Siehe Schritt 5 unter „1. Option (empfohlen): Kopieren der Vorlage“)<\/p>\n

        \"Screenshot
        \n2. Wenn Sie ein neues H5P-Element erstellt haben, m\u00fcssen Sie die Art des H5P-Elements ausw\u00e4hlen. In diesem Fall klicken Sie bitte auf „Branching Scenario“<\/strong>. Es erscheint eine alphabetisch geordnete Liste, in der Sie Ihr Element ausw\u00e4hlen oder sich die Suchfunktion nutzen k\u00f6nnen. Sie haben auch die M\u00f6glichkeit, sich die zuletzt verwendeten H5P-Elemente oder sich auch die neuesten H5P-Elemente zuerst anzeigen zu lassen.<\/p>\n

        \"\"<\/p>\n

        3. Wenn Sie ein neues H5P-Element erstellt haben, m\u00fcssen Sie diesem H5P-Element einen Namen <\/strong>geben und anschlie\u00dfend auf „Erstellen“<\/strong> klicken. (Siehe 7. und 8. unter Option 1.) Benennen Sie das Branching Scenario \u2013 wie alle anderen H5P-Elemente auch \u2013 nach folgendem Schema nach der Struktur der Website „zfl-lernen.de“: \u201cZfL_Lernmodulname_Lektion_(Websitebereiche)_ Element\u201d<\/strong><\/p>\n

        \"\"<\/p>\n

        4. Sie haben erfolgreich ein neues Branching Scenario erstellt und k\u00f6nnen dieses anschlie\u00dfend bearbeiten. Wie Sie das Branching Scenario bearbeiten, wird Ihnen in den n\u00e4chsten Kapiteln erl\u00e4utert.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>

        \n\t
        \n\t\t
        \n\t\t\t

        4. Allgemeine Einstellungen<\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
        \n\t
        \n\t\t
        \n\t\t\t

        Wenn Sie das Branching Scenario erstellt haben, erscheint folgendes Bearbeitungsfenster:<\/p>\n

        <\/h3>\n

        <\/p>\n

        \"\"<\/figure>\n

         <\/p>\n

        <\/h3>\n

        \"Icon<\/em><\/strong><\/p>\n

        Bei Verwendung der Vorlage sind bereits Elemente enthalten. Die Information „No content has been added yet“ erscheint nur, wenn ein leeres Branching Scenario erstellt wurde.<\/p>\n

         <\/p>\n

         <\/p>\n

        <\/h3>\n

        In der linken Taskleiste mit den f\u00fcnf Symbolen k\u00f6nnen Sie verschiedene Reiter w\u00e4hlen:<\/p>\n

          \n
        1. Der Stift – Info Content:<\/strong> Hier k\u00f6nnen Sie Ihr Branching Scenario mit den einzelnen Pfaden erstellen.<\/li>\n
        2. Das Zahnrad – Settings: <\/strong>Hier k\u00f6nnen Sie verschiedene Einstellungen zur allgemeinen Gestaltung des Branching Scenarios konfigurieren.<\/li>\n
        3. Die Buchstaben – \u00dcbersetzung:<\/strong> Hier k\u00f6nnen \u00dcbersetzungen f\u00fcr Ihr Branching Scenario ausgew\u00e4hlt werden.<\/li>\n
        4. Das Fragezeichen – Tutorial:<\/strong> Hier finden Sie ein englischsprachiges Tutorial zur Erstellung von Branching Scenarios.<\/li>\n
        5. Der Zettel – Metadaten:<\/strong> Hier geben Sie bitte die entsprechenden Metadaten ein.<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

          Weitere Informationen zu 2. Das Zahnrad - Settings<\/h4><\/i><\/div>
            \n
          1. Sie k\u00f6nnen den Anfang<\/strong> Ihres Branching Scenarios bearbeiten: einen Titel<\/strong> vergeben, ein Bild<\/strong> hinzuf\u00fcgen (Format PNG z. B.: 521 x 347px oder 1255 x 710px)<\/strong>,\u00a0evtl. eine kurze Kursbeschreibung hinzuf\u00fcgen<\/li>\n
          2. Sie k\u00f6nnen das Ende<\/strong> Ihres Branching Scenarios bearbeiten: ein Bild<\/strong> (Format PNG z. B.: 521 x 347px oder 1255 x 710px)<\/strong> hinzuf\u00fcgen, Text<\/strong> hinzuf\u00fcgen<\/li>\n
          3. Die Evaluation ist mit oder ohne Bepunktung m\u00f6glich. (Das ZfL hat bisher ohne Evaluation gearbeitet.)<\/li>\n
          4. Unter „Settings“ k\u00f6nnen Sie ein Kursbild hinzuf\u00fcgen.<\/li>\n<\/ol>\n
            \"\"<\/figure>\n

            <\/h3>\n

             <\/p>\n

            \"Icon<\/strong><\/em><\/p>\n

             <\/p>\n

            F\u00fcr alle extern genutzten Elemente (Bilder, Videos etc.) sollten auch die Metadaten bzw. die Urheberrechte hinzugef\u00fcgt werden, falls Sie von den allgemeinen Metadaten des Branching Scenarios abweichen.<\/p>\n

             <\/p>\n

            <\/h3>\n

            OER-Input:
            \n<\/strong>Hier finden Sie eine \u00dcbersicht zu den Creative Commons Lizenzen: https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/<\/a><\/p>\n

            Hier finden Sie weitere Informationen zu Open Educational Resources und deren Lizenzierung: https:\/\/digill.de\/course\/einfuehrung-in-die-open-educational-resources\/<\/a><\/p>\n<\/div><\/div>

            Weitere Informationen zu 5. Der Zettel - Metadaten<\/h4><\/i><\/div>

            \"Icon<\/strong><\/em><\/p>\n

            Bitte geben Sie die Metadaten direkt zu Beginn der Erstellung des Branching Scenarios an, damit Sie diesen wichtigen Schritt nicht vergessen.<\/p>\n

             <\/p>\n

             <\/p>\n

              \n
            1. Titel:<\/strong> Entspricht dem von Ihnen angegebenen Titel nach dem Schema (\u201cZfL_Lernmodul_Lektion_(Websitebereiche)_Element\u201d).<\/strong><\/li>\n
            2. Lizenz:<\/strong> Bitte w\u00e4hlen Sie CC BY-SA aus. Alle Inhalte der Lernmodule von unserer Website sollen unter dieser CC-Lizenz ver\u00f6ffentlicht werden. Achten Sie darauf, dass alle Inhalte Dritter in Ihrem Branching Scenario CC-lizensiert oder gemeinfrei sind.<\/li>\n
            3. Autor: <\/strong>Geben Sie Ihren Namen bzw. den Namen Ihrer Organisation ein. Zum Beispiel: „Zentrum f\u00fcr Lehrer*innenbildung K\u00f6ln – Digitale Lehre“<\/strong><\/li>\n
            4. Jahr:<\/strong> Geben Sie bitte das Erstellungsjahr an.<\/li>\n<\/ol>\n

              <\/h3>\n

              <\/p>\n

              \"\"<\/figure>\n<\/div><\/div><\/div><\/div><\/div><\/div>
              \n\t
              \n\t\t
              \n\t\t\t

              5. Aufbau mit Pfaden<\/strong><\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
              \n\t
              \n\t\t
              \n\t\t\t

              Das Branching Scenario kann sich in beliebig viele Pfade aufteilen lassen. Die einzelnen Pfade bestehen aus einzelnen Inhaltstypen (von oben nach unten). Neue Pfade entstehen nur, wenn es mindestens zwei verschiedene Antwortm\u00f6glichkeiten gibt und eine davon die richtige ist. (Die Antwortm\u00f6glichkeiten verlaufen von rechts nach links.)<\/p>\n

              \"Icon<\/p>\n

               <\/p>\n

              Die einzelnen Inhaltstypen werden im Kapitel „7. Die Inhaltstypen“ erl\u00e4utert.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

              1. Option: mit einer vorhandenen Vorlage<\/h4><\/i><\/div>

              Sie k\u00f6nnen nun die kopierte Vorlage bearbeiten, indem sie die vorhandenen Elemente bearbeiten, l\u00f6schen oder neue Elemente hinzuf\u00fcgen. Die Benutzung ist sehr intuitiv.<\/p>\n

              \"\"<\/p>\n

               <\/p>\n

              \"Icon<\/strong> <\/em><\/p>\n

              In dieser Ansicht kann nicht die komplette Pfadstruktur angezeigt werden. Sie k\u00f6nnen in Ihrem Browserfenster die Prozentzahl der Webansicht unter „Zoomen“ (z. B. in Chrome) von 100 % auf 75 % reduzieren. Dadurch k\u00f6nnen Sie mehrere Elemente sehen.<\/p>\n<\/div><\/div>

              2. Option: mit einem leeren Branching Scenario<\/h4><\/i><\/div>

              Um die Pfade zu erstellen, einfach die Elemente aus der zweiten linken Spalte in das Bearbeitungsfenster an die Stellen mit dem blauen „Plus-Symbol“ ziehen. Die sechs Elemente werden im Folgenden erl\u00e4utert.<\/p>\n

              \"\"<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>

              \n\t
              \n\t\t
              \n\t\t\t

              6. Preview-Modus und Benennung<\/strong><\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
              \n\t
              \n\t\t
              \n\t\t\t

              <\/p>\n

              \"\"<\/figure>\n


              \n<\/p>\n

              \"\"<\/figure>\n


              \n<\/p>\n

                \n
              1. Im Laufe der Erstellung Ihres Branching Scenario k\u00f6nnen Sie jederzeit in den Preview-Modus<\/strong> (oben rechts, neben dem Vollbildmodus) wechseln, um sich eine Vorschau anzusehen.<\/li>\n
              2. Das Autorentool kann im Vollbildmodus<\/strong> verwendet werden und erm\u00f6glicht es den Autoren, den Inhalt als Baum mit mehreren Zweigen und Endungen zu strukturieren. Der Vollbildmodus l\u00e4sst sich mit einem Klick auf dieses Symbol oben rechts \u00f6ffnen.<\/li>\n<\/ol>\n

                Zum Preview-Modus: <\/strong> Wenn Sie im Preview-Modus sind, k\u00f6nnen Sie auch direkt zum gew\u00fcnschten Element navigieren. Je nach L\u00e4nge lohnt es sich auch, die verschiedenen Elemente zu nummerieren<\/strong>, um diese schneller finden zu k\u00f6nnen. Die folgende Abbildung zeigt, wie Sie durch eine strukturierte Benennung alle H5P-Elemente schnell finden k\u00f6nnen.<\/p>\n

                \"\"<\/p>\n

                 <\/p>\n

                \u00a0Wir empfehlen folgende Benennungen:<\/p>\n

                <\/p>\n

                  \n
                1. Textelemente:<\/strong> Herzliche willkommen etc.<\/li>\n
                2. Videos: <\/strong> \u201c1. Szene: Abstellen der Klingel\u201d, \u201c2. Szene: \u2026\u201d etc.<\/li>\n
                3. Reaktionen: „<\/strong>Reaktion 1.1 – Komm schon“ „Reaktion 1.2 – Let’s try!“ etc.<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n
                  <\/span><\/div><\/div><\/div><\/div><\/div>
                  \n\t
                  \n\t\t
                  \n\t\t\t

                  7. Die Inhaltstypen<\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
                  \n\t
                  \n\t\t
                  \n\t\t\t

                  Das Branching Scenario besitzt sechs verschiedene Inhaltstypen. \u00dcber das Element „Branching Question“ k\u00f6nnen Sie beliebig viele Antwortm\u00f6glichkeiten hinzuf\u00fcgen und neue Pfade erstellen.<\/p>\n

                  \n
                  \"\"<\/figure>\n<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

                  1. Course Presentations<\/h4><\/i><\/div>

                  Besonders gut eignen sich die Pr\u00e4sentationsfolien, um kleinere zusammenh\u00e4ngende Einheiten (linear) vorzustellen. Praktisch ist die Pr\u00e4sentation besonders, um viel Inhalt (Bilder, Text etc.) platzsparend auf einer Seite darzustellen. Im Branching Scenario kann man die Course Presentations beispielsweise zu Beginn verwenden, um den Willkommenstext mit einem einleitenden Bild abzubilden.<\/p>\n

                  \"\"<\/p>\n

                  <\/p>\n


                  \nHier<\/a> <\/strong>finden Sie neben der Course Presentation au\u00dferdem eine \u00dcbersicht \u00fcber weitere H5P-Elemente.<\/p>\n<\/div><\/div>

                  2. Textelemente<\/h4><\/i><\/div>

                  Gestaltungsm\u00f6glichkeiten<\/strong><\/p>\n

                  \u00a0\"\"<\/p>\n

                  Im Textfenster finden Sie in den oberen zwei Zeilen g\u00e4ngige Symbole zur Bearbeitung (von links nach rechts):<\/p>\n

                  \u00a0In der 1. Zeile<\/strong>:<\/p>\n