Widget:Autorenbox und Hilfe:ZUM-Apps in ZUM-Unterrichten einbinden: Unterschied zwischen den Seiten

Aus ZUM-Unterrichten
(Unterschied zwischen Seiten)
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
Markierung: 2017-Quelltext-Bearbeitung
 
Zeile 1: Zeile 1:
<includeonly>
[https://h5p.org/ '''H5P'''] ist eine freie  Software zum Erstellen von interaktiven Inhalten für das Web. Beliebte Übungen sind z.B. Videos oder Präsentationen mit eingebetteten Quiz-Aufgaben, Zeitstrahlen, Memory-Spiel.
<div class="uk-panel uk-panel-box uk-panel-box-primary zum-hintergrund-links zum-farbe-xx-heller uk-hidden">
<strong>Autoren</strong>
<small class="uk-align-right" data-zum-hook="last-modified">aktualisiert am: </small>
<div class="uk-flex uk-flex-wrap uk-width-1-1" data-zum-hook="userlist">


'''[https://apps.zum.de ZUM-Apps]''' ist ein kostenloser Online-Speicher der Zentrale für Unterrichtsmedien im Internet für die Erprobung und Erstellung interaktiver ''' H5P'''-Apps. Wir laden Dich ein, diese Inhalte zu nutzen, selbst welche zu erstellen und in ZUM-Unterrichten einzufügen.
==Einführung==
<center>{{#ev:youtube|Cy_QAHUKAB8|600|center}}</center>
== So werden Inhalte von '''[https://apps.zum.de ZUM-Apps]''' eingebunden ==
<div class="grid">
<div class="width-1-2">
<pre>{{H5p-zum|id=6064|height=200}}</pre>
* Du findest die ID in der URL: https://apps.zum.de/apps/6064
</div>
<div class="width-1-2">
{{H5p-zum|id=6064|height=200}}
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
const paramArtikel = "<!--{$artikel|escape:'javascript'}-->"||null;
const kategorieArtikel = "<!--{$kategorie|escape:'javascript'}-->"||null;


const element = document.currentScript && document.currentScript.previousElementSibling;
Der Parameter ''height'' ist optional und kann verändert werden:
if(element){
<pre>{{H5p-zum|id=6064|height=50}}</pre>
window.RLQ.push(function(){
{{H5p-zum|id=6064|height=50}}
  mw.loader.enqueue(['mediawiki.api'], function(){
Wird kein Parameter "height" eingegeben, wird als Vorgabewert eine Breite von 100% und eine Höhe von 400px verwendet.
    const getCurrentTitle = () => mw.Title.makeTitle(
<pre>{{H5p-zum|id=6064}}</pre>
                                    mw.config.get('wgNamespaceNumber'),
{{H5p-zum|id=6064}}
                                    mw.config.get('wgTitle')
                                  ).getPrefixedText()
                            ;
    const userlistEl = $(element).find('[data-zum-hook="userlist"]');
    const lastModifiedEl = $(element).find('[data-zum-hook="last-modified"]');
    const api = new mw.Api();


==Beispiele==
<div class="grid">
<div class="width-1-2">
<pre>{{H5p-zum|id=63|height=200}}</pre>
</div>
<div class="width-1-2">
{{H5p-zum|id=63|height=200}}
</div>
</div>
<div class="grid">
<div class="width-1-2">
<pre>{{H5p-zum|id=11|height=232}}</pre>
</div>
<div class="width-1-2">
{{H5p-zum|id=11|height=232}}
</div>
</div>
<div class="grid">
<div class="width-1-2">
<pre>{{H5p-zum|id=
46|height=232}}</pre>
</div>
<div class="width-1-2">
{{H5p-zum|id=
46|height=232}}
</div>
</div>


.  const query = kategorieArtikel ? {
'''Wortschatz zum Thema Haus: Schaubild'''
      action:'query',
<div class="grid">
      indexpageids: 1,
<div class="width-1-2">
      prop:['revisions', 'contributors', 'info'],
<pre>{{H5p|id=298571|height=150}}</pre>
      generator: categorymembers,
</div>
      gcmtitle: `Kategorie:${category}`,
<div class="width-1-2">
      gcmnamespace:0,
{{H5p|id=298571|height=150}}
      gcmtype: 'page',
</div>
      gcmlimit: 500
</div>
      rvlimit:1000
 
    } : {
'''Präsentation: Thema WebQuest'''
      action:'query',
<div class="grid">
      indexpageids: 1,
<div class="width-1-2">
      prop:['revisions', 'contributors', 'info'],
<pre>{{H5p|id=294763|height=232}}</pre>
      titles: paramArtikel || getCurrentTitle();
</div>
      rvlimit:1000
<div class="width-1-2">
};
{{H5p|id=294763|height=232}}
</div>
</div>
 
'''Dialog üben A1 Beispiel 2'''
<div class="grid">
<div class="width-1-2">
<pre>{{H5p|id=291743|height=232}}</pre>
</div>
<div class="width-1-2">
{{H5p|id=291743|height=232}}
</div>
</div>
 
 
'''Chemie'''
<div class="grid">
<div class="width-1-2">
<pre>{{H5p|id=249758|height=232}}</pre>
</div>
<div class="width-1-2">
{{H5p|id=249758|height=232}}
</div>
</div>


==Beispielseiten im ZUM-Unterrichten==


    const response = api.get(query);
*[[Chemie-Lexikon/Energie_bei_chemischen_Reaktionen|Energie bei chemischen Reaktionen]]
    response.then((data) => {
    //TODO continuation handling


      if (data.query.pageids[0] === "-1") {
== H5P-Inhaltstypen - eine Übersicht ==
        return;
      }


      const userCounts = data.query.pageids.reduce((acc, pageid) => {
Siehe:
        const pageData = data
* [[:deutsch-lernen:H5P-Inhaltstypen|H5P-Inhaltstypen]] in ''ZUM Deutsch Lernen''
              .query
              .pages[pageid];


        acc.lastmodified = Math.max(acc.lastmodified, Date.parse(pageData.touched));
        acc = pageData
          .contributors
          .reduce((acc, c)=> {acc.userChanges[c.name] = acc.userChanges[c.name]||{count:0, last:0, id:c.id}; return acc;}, acc);
        acc = pageData.revisions.reduce((acc, r) => {
          acc.userChanges[r.user] = acc.userChanges[r.user] || {count:0, last:0};
          acc.userChanges[r.user].count += r.minor === '' ? 0.1 : 1;
          acc.userChanges[r.user].last = Math.max(acc.userChanges[r.user].last, r.revid);
          return acc;
        }, acc);
        return acc;
      }, {lastmodified: -1, userChanges:{}});
      const usernames = Object.keys(userCounts.userChanges).sort((a,b) => {
        let diff = userCounts.userChanges[b].count - userCounts.userChanges[a].count;
        if(diff !== 0){
          return diff;
        }
        return userCounts.userChanges[b].last - userCounts.userChanges[a].last;
      })


      $(lastModifiedEl).append(new Date(userCounts.lastmodified).toLocaleDateString());
      const userdatas = usernames.map((user) => api
                          .parse(`{{#avatar:${user}|l}}`)
                          .then((imgTag) => $(imgTag))
                          .then((img$) => img$.find('img').andSelf().filter('img').attr('src'))
                          .then((imgSrc) => {return {user, imgSrc};})
                          .fail((ignored)=> null)
                        );
      $.when(...userdatas)
        .then((...userdatas) => userdatas.filter((ud) => ud !== null))
        .then((userdatas) => {
          userdatas.forEach(({user, imgSrc}) => {
            $('<img>')
              .attr('src', imgSrc)
              .wrap('<a>')
              .parent()
              .attr('href', mw.Title.makeTitle(mw.config.get('wgNamespaceIds')['benutzer'], user).getUrl())
              .wrap('<div class="uk-border-circle uk-text-center" style="overflow:hidden;width:60%;margin:auto;">')
              .parent()
              .wrap('<div class="uk-panel uk-panel-border uk-text-small" style="max-width:12ch">')


              .parent()
[[Kategorie:H5P|!]]
.append($('<a>').append(user).attr('href',  mw.Title.makeTitle(mw.config.get('wgNamespaceIds')['benutzer'], user).getUrl()).wrap('<div class="uk-text-center uk-text-truncate">').parent())              .appendTo($(userlistEl));
          });
        })
        .then((ignored) => $(element).removeClass('uk-hidden'));
    });//end response.then
  });//end loader.enqueue
});//end RLQ.push
}//end if
})();
</script>
</includeonly>

Version vom 10. Januar 2022, 16:21 Uhr

H5P ist eine freie Software zum Erstellen von interaktiven Inhalten für das Web. Beliebte Übungen sind z.B. Videos oder Präsentationen mit eingebetteten Quiz-Aufgaben, Zeitstrahlen, Memory-Spiel.

ZUM-Apps ist ein kostenloser Online-Speicher der Zentrale für Unterrichtsmedien im Internet für die Erprobung und Erstellung interaktiver H5P-Apps. Wir laden Dich ein, diese Inhalte zu nutzen, selbst welche zu erstellen und in ZUM-Unterrichten einzufügen.


Einführung

Video laden
YouTube


So werden Inhalte von ZUM-Apps eingebunden

{{H5p-zum|id=6064|height=200}}

Der Parameter height ist optional und kann verändert werden: 

{{H5p-zum|id=6064|height=50}}

Wird kein Parameter "height" eingegeben, wird als Vorgabewert eine Breite von 100% und eine Höhe von 400px verwendet. 

{{H5p-zum|id=6064}}


Beispiele

{{H5p-zum|id=63|height=200}}

{{H5p-zum|id=11|height=232}}

{{H5p-zum|id=
46|height=232}}

Wortschatz zum Thema Haus: Schaubild 

{{H5p|id=298571|height=150}}

Präsentation: Thema WebQuest 

{{H5p|id=294763|height=232}}

Dialog üben A1 Beispiel 2 

{{H5p|id=291743|height=232}}


Chemie 

{{H5p|id=249758|height=232}}

Beispielseiten im ZUM-Unterrichten

H5P-Inhaltstypen - eine Übersicht

Siehe:

Abgerufen von „https://unterrichten.zum.de/index.php?title=Widget:Autorenbox&oldid=122742“