Benutzer:Patrick Oberdoerfer/ZUM-Apps und H5P/Flashcards schneller erstellen/: Unterschied zwischen den Versionen

Aus ZUM Projektwiki
KKeine Bearbeitungszusammenfassung
K (Bilder eingefügt)
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 1: Zeile 1:
== H5P Python-Kopierer (hier für Flashcards) ==
'''Anwendungsfall:''' Sie haben eine Zeichnung oder ein Bild und stellen dazu unterschiedliche Fragen.  
'''Anwendungsfall:''' Sie haben eine Zeichnung oder ein Bild und stellen dazu unterschiedliche Fragen.  


Zeile 5: Zeile 6:
'''Idee und Lösung:''' Mit einem Python-Skript eine Kartenvorlage beliebig oft kopieren lassen. Wichtig für OER-Fans! Auch die Metadaten und Quellen werden dabei übernommen. So spart man sich viel Zeit bei der Erstellung von OER-Content.
'''Idee und Lösung:''' Mit einem Python-Skript eine Kartenvorlage beliebig oft kopieren lassen. Wichtig für OER-Fans! Auch die Metadaten und Quellen werden dabei übernommen. So spart man sich viel Zeit bei der Erstellung von OER-Content.


Wie gehe ich vor?
=== Wie gehe ich vor? ===
 
Damit das alles klappt werden unterschiedliche Programme und Vorbereitungen benötigt.
Damit das alles klappt werden unterschiedliche Programme und Vorbereitungen benötigt.


# Natürlich einen H5P-Editor (z. B. ZUM-Apps) für die Erstellung der H5P-Vorlage mit der ersten Flashcard
==== Natürlich einen H5P-Editor für die Erstellung der H5P-Vorlage mit der ersten Flashcard ====
# Python auf dem Rechner installieren
Wo finde ich überall H5P-Editoren?
# Einen Zielordner anlegen. In diesen kommt das Python-Skript und die H5P-Vorlage
# Im Zielordner das Skript mit einen Doppelklick links ausführen lassen!
 
[[Datei:Übersicht Zielordner.png|mini|Beschreibungen im Zielordner|rand|links]]


Natürlich bietet die ZUM e.V. einen unter https://apps.zum.de/ an.


Eine ganz tolle Desktop-Version gibt es unter https://lumi.education/de/lumi-h5p-desktop-editor/


Zum Testen und Spiel: https://einstiegh5p.de/


oder natürlich im LMS, wie Moodle


==== Python auf dem Rechner installieren ====
Hier gibt es immer die aktuellsten Versionen: https://www.python.org/downloads/


==== Einen Zielordner anlegen ====
Es gibt nichts digital persönlicheres als die Logik einer Ordnerstruktur. Kurz um, einen Ordner am passenden Ort anlegen.


==== Zielordner befüllen und Skript ausführen ====
Damit das Skript auch funktioniert, muss jetzt der Ordner passend befüllt werden.


Woher bekomme ich das Skript? Siehe weiter unten: Kopie des Skripts erstellen


'''Wichtig:''' Es müssen das Python-Skript und die H5P-Vorlage drin sein. Doppelklick auf das Skript und fertig![[Datei:Übersicht Zielordner.png|mini|Beschreibungen im Zielordner|rand|links]]


Vertiefung:


Wie wurde das erstellt?


Einen (beliebigen) Python-Chatbot zur Erstellung des Skripts. Oder die unten stehende Vorlage:-)


Oder hier der Dialog mit ChatGPT
[[Datei:Screenshot Python GPT.png|alternativtext=Dialog mit Python GPT|links|gerahmt|Dialog mit Python GPT]]




'''Welche Software wird gebraucht?'''


Python und H5P-Editor


'''Anleitung:'''


==== Kopie des Skripts erstellen ====
Kopie der Skript-Vorlage (siehe unten) in einen Texteditor '''einfügen'''. 


'''Hier das Skript:'''<syntaxhighlight lang="python3">
'''Speichern unter''' wählen und die Endung '''.py''' hinzufügen  <syntaxhighlight lang="python3" line="1">
import zipfile
import zipfile
import json
import json
Zeile 49: Zeile 51:


# Funktion zum Vervielfältigen der Flashcards
# Funktion zum Vervielfältigen der Flashcards
def duplicate_flashcards(content_data, num_duplicates=10):
def duplicate_flashcards(content_data, num_duplicates=15):
     original_card = content_data['dialogs'][0]  # Originale Karte
     original_card = content_data['dialogs'][0]  # Originale Karte
     for i in range(num_duplicates):
     for i in range(num_duplicates):
         # Dupliziere die Karte
         # Dupliziere die Karte
         new_card = original_card.copy()
         new_card = original_card.copy()
         new_card['text'] = f'<p style="text-align: center;"><strong>Bauteile {i+2}</strong></p>\n'
         new_card['text'] = f'<p style="text-align: center;"><strong>Vorderseite {i+2}</strong></p>\n'
         new_card['answer'] = f'<p style="text-align: center;">Vertikalrahmen {i+2}</p>\n'
         new_card['answer'] = f'<p style="text-align: center;">Rückseite {i+2}</p>\n'
         content_data['dialogs'].append(new_card)
         content_data['dialogs'].append(new_card)
     return content_data
     return content_data


# Pfade zur Original-H5P-Datei und zum Extraktionsort
# Pfade zur Original-H5P-Datei und zum Extraktionsort
h5p_file_path = 'interactive-content-35394.h5p'
h5p_file_path = 'interactive-content-mehr.h5p'
extract_path = 'h5p_extract/'
extract_path = 'h5p_extract/'


Zeile 72: Zeile 74:
     content_data = json.load(json_file)
     content_data = json.load(json_file)


# Flashcards vervielfältigen (z.B. 10 mal)
# Flashcards vervielfältigen (z.B. 15 mal)
updated_content_data = duplicate_flashcards(content_data, num_duplicates=10)
updated_content_data = duplicate_flashcards(content_data, num_duplicates=15)


# Speichere die aktualisierte content.json
# Speichere die aktualisierte content.json
Zeile 95: Zeile 97:


# ZIP die erlaubten Dateien in eine neue H5P-Datei
# ZIP die erlaubten Dateien in eine neue H5P-Datei
output_h5p_file = 'duplicated_flashcards_fixed.h5p'
output_h5p_file = 'duplicated_flashcards_neu15.h5p'
with zipfile.ZipFile(output_h5p_file, 'w') as zipf:
with zipfile.ZipFile(output_h5p_file, 'w') as zipf:
     zipdir(extract_path, zipf)
     zipdir(extract_path, zipf)
Zeile 101: Zeile 103:
print(f'H5P-Datei erstellt: {output_h5p_file}')
print(f'H5P-Datei erstellt: {output_h5p_file}')


</syntaxhighlight>
</syntaxhighlight>
 
==== Wie geht das, auch wenn ich keine Ahnung von Programmieren habe? ====
Das Skript und den Ablauf habe ohne große Kenntnisse erstellt und habe mich von von Python GPT in der kostenfreien Chat GPT-Version beraten lassen.
 
Hier ein kleiner Einblick in meine Kommunikation mit dem GPT.
[[Datei:Python GPT Bild 001.png|links|mini|Prompt 0]]
 
 
 
 
 
[[Datei:Python GPT Bild 002.png|links|mini|Prompt 1]]
 
 
 
 
 
 
[[Datei:Python GPT Bild 003.png|links|mini|Prompt 2]]
 
 
 
 
 
[[Datei:Python GPT Bild 004.png|links|mini|Prompt 3 - H5P-Datei hochgeladen ]]
 
 
 
 
 
[[Datei:Python GPT Bild 005.png|links|mini|Prompt 5]]
 
 
 
 
 
 
 
Jetzt leitete mich der Chatbot über die manuelle Eingabe via PowerShell - war etwas umständlich... (das braucht niemand mehr).
[[Datei:Python GPT Bild 006.png|links|mini|Prompt 6 - Das erste Skript verursachte im LMS Fehler. Diese kopierte ich und ließ es verbessern. ]]
 
 
 
 
 
 
 
 
 
 
Und jetzt die Abschluss OER Frage:-)
[[Datei:Python GPT Bild 007.png|links|mini|Prompt 7 - Wie gehen ich vor, wenn ich meine neuen Erkenntnisse teilen möchte?]]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 




Zeile 110: Zeile 179:
Python 3.13 (64-bit)
Python 3.13 (64-bit)


H5P-Editor
H5P-Editor von ZUM-Apps

Aktuelle Version vom 19. Oktober 2024, 05:37 Uhr

H5P Python-Kopierer (hier für Flashcards)

Anwendungsfall: Sie haben eine Zeichnung oder ein Bild und stellen dazu unterschiedliche Fragen.

Problem: Eine angelegte Karte kann nicht einfach dupliziert werden. Diese Funktion ist leider in diesem Inhaltstypen nicht verfügbar.

Idee und Lösung: Mit einem Python-Skript eine Kartenvorlage beliebig oft kopieren lassen. Wichtig für OER-Fans! Auch die Metadaten und Quellen werden dabei übernommen. So spart man sich viel Zeit bei der Erstellung von OER-Content.

Wie gehe ich vor?

Damit das alles klappt werden unterschiedliche Programme und Vorbereitungen benötigt.

Natürlich einen H5P-Editor für die Erstellung der H5P-Vorlage mit der ersten Flashcard

Wo finde ich überall H5P-Editoren?

Natürlich bietet die ZUM e.V. einen unter https://apps.zum.de/ an.

Eine ganz tolle Desktop-Version gibt es unter https://lumi.education/de/lumi-h5p-desktop-editor/

Zum Testen und Spiel: https://einstiegh5p.de/

oder natürlich im LMS, wie Moodle

Python auf dem Rechner installieren

Hier gibt es immer die aktuellsten Versionen: https://www.python.org/downloads/

Einen Zielordner anlegen

Es gibt nichts digital persönlicheres als die Logik einer Ordnerstruktur. Kurz um, einen Ordner am passenden Ort anlegen.

Zielordner befüllen und Skript ausführen

Damit das Skript auch funktioniert, muss jetzt der Ordner passend befüllt werden.

Woher bekomme ich das Skript? Siehe weiter unten: Kopie des Skripts erstellen

Wichtig: Es müssen das Python-Skript und die H5P-Vorlage drin sein. Doppelklick auf das Skript und fertig!

Beschreibungen im Zielordner





Kopie des Skripts erstellen

Kopie der Skript-Vorlage (siehe unten) in einen Texteditor einfügen.

Speichern unter wählen und die Endung .py hinzufügen

import zipfile
import json
import os
import shutil

# Funktion zum Vervielfältigen der Flashcards
def duplicate_flashcards(content_data, num_duplicates=15):
    original_card = content_data['dialogs'][0]  # Originale Karte
    for i in range(num_duplicates):
        # Dupliziere die Karte
        new_card = original_card.copy()
        new_card['text'] = f'<p style="text-align: center;"><strong>Vorderseite {i+2}</strong></p>\n'
        new_card['answer'] = f'<p style="text-align: center;">Rückseite {i+2}</p>\n'
        content_data['dialogs'].append(new_card)
    return content_data

# Pfade zur Original-H5P-Datei und zum Extraktionsort
h5p_file_path = 'interactive-content-mehr.h5p'
extract_path = 'h5p_extract/'

# Extrahiere die H5P-Datei
with zipfile.ZipFile(h5p_file_path, 'r') as zip_ref:
    zip_ref.extractall(extract_path)

# Pfad zur content.json und Bilderordner
content_json_path = os.path.join(extract_path, 'content', 'content.json')
with open(content_json_path, 'r', encoding='utf-8') as json_file:
    content_data = json.load(json_file)

# Flashcards vervielfältigen (z.B. 15 mal)
updated_content_data = duplicate_flashcards(content_data, num_duplicates=15)

# Speichere die aktualisierte content.json
with open(content_json_path, 'w', encoding='utf-8') as json_file:
    json.dump(updated_content_data, json_file, ensure_ascii=False, indent=4)

# Nur die erlaubten Dateien (JSON, Bilder) in die neue H5P-Datei packen
def zipdir(path, ziph):
    # Gehe durch alle Dateien und füge nur zulässige Dateitypen hinzu
    allowed_extensions = ['.json', '.png', '.jpg', '.jpeg', '.gif', '.bmp', '.tif', '.tiff', '.svg', 
                          '.eot', '.ttf', '.woff', '.woff2', '.otf', '.webm', '.mp4', '.ogg', '.mp3', 
                          '.m4a', '.txt', '.pdf', '.rtf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', 
                          '.pptx', '.odt', '.ods', '.odp', '.xml', '.csv', '.diff', '.patch', '.swf', 
                          '.md', '.textile', '.wav', '.gltf', '.glb']
    
    for root, dirs, files in os.walk(path):
        for file in files:
            if any(file.endswith(ext) for ext in allowed_extensions):
                file_path = os.path.join(root, file)
                ziph.write(file_path, os.path.relpath(file_path, path))

# ZIP die erlaubten Dateien in eine neue H5P-Datei
output_h5p_file = 'duplicated_flashcards_neu15.h5p'
with zipfile.ZipFile(output_h5p_file, 'w') as zipf:
    zipdir(extract_path, zipf)

print(f'H5P-Datei erstellt: {output_h5p_file}')

Wie geht das, auch wenn ich keine Ahnung von Programmieren habe?

Das Skript und den Ablauf habe ohne große Kenntnisse erstellt und habe mich von von Python GPT in der kostenfreien Chat GPT-Version beraten lassen.

Hier ein kleiner Einblick in meine Kommunikation mit dem GPT.

Prompt 0



Prompt 1




Prompt 2



Prompt 3 - H5P-Datei hochgeladen



Prompt 5




Jetzt leitete mich der Chatbot über die manuelle Eingabe via PowerShell - war etwas umständlich... (das braucht niemand mehr).

Prompt 6 - Das erste Skript verursachte im LMS Fehler. Diese kopierte ich und ließ es verbessern.






Und jetzt die Abschluss OER Frage:-)

Prompt 7 - Wie gehen ich vor, wenn ich meine neuen Erkenntnisse teilen möchte?









Bei der Erstellung kamen zum Einsatz:

Python GPT via ChatGPT

Python 3.13 (64-bit)

H5P-Editor von ZUM-Apps