Arbeitsblätter

Mit dem Modul "PDF-Editor" können Arbeitsblätter auf Basis von HTML erstellt und auf einer inf-schule-Seite zum Download angeboten werden. Die Erstellung der PDF-Datei geschieht hierbei lokal auf Seite des Clients.

Das Modul einbinden

Um Editor oder die Herunterladen-Funktion nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features erfolgen (siehe auch Abschnitt "Javascript"):

Das Modul verwenden

Die Verwendung des Generators wird über einen HTML-Tag gesteuert, hier ein Beispiel:

<div class='pdfeditor' 
data-config='{
    "filenameHTML":"../wissensspeicher/codierung.html", 
    "showEditor" : false, 
    "buttonText" : "Codierungstabelle herunterladen", 
    "relativeContentPath" : "../wissensspeicher/"
}'></div>

Konfigurationsmöglichkeiten

Innerhalb des Attributs data-config können einige Spezifikationen vorgenommen werden, wobei die Reiehnfolge beliebig ist:

filenameHTML - Übergabe einer Datei

• Hier kann eine Datei übergeben werden, aus der der Code des Materials geladen wird.

showEditor - Verwendung als Editor oder Herunterladen-Funktion

• Wird true übergeben, wird der vollständige Editor angezeigt. Sollte nur zum Entwickeln des Materials verwendet werden und im Anschluss vorm Commit auf false gesetzt werden
• Wird false übergeben wird nur ein Button angezeigt, bei dessen Anklicken das Material heruntergeladen wird.

showEditor - Text des Herunterladen-Buttons

relativeContentPath - Ort verwendeter Dateien

• Alle Dateien innerhalb des Materials werden relativ zu diesem Pfad gesucht.
• .. bedeutet hierbei, eine Hierarchiestufe aufwärts zu gehen.

wissensspeicherInfo - Informationstext über Wissensspeicher einblenden

• Wird true übergeben, wird eine aufklappbare Box unter dem Downloadbutton erzeugt, in dem das Konzept der Wissensspeicher erläutert wird.

Normales HTML

Eigene Tags

infsheader - Standardisierte Kopfzeile

• Erzeugt einen QR-Code, das inf-schule-Logo, den Kapitelnamen, das Datum und eine Überschrift.
• Bei Angabe des Attributs uuid werden die Informationen des entsprechenden Kapitels geladen.
• Bei Angabe des Attributs title kann die Überschrift manuel festgelegt werden
• Bei Angabe des Attributs chapter kann der Kapitel-Text manuel festgelegt werden
• Bei Angabe des Attributs number kann die Kapitel-Nummer manuel festgelegt werden
• Bei Angabe des Attributs qrlink kann der Link des QR-Codes manuel festgelegt werden

infsfooter - Standardisierte Fußzeile

• Erzeugt eine Fußzeile mit dem inf-schule Logo

dateiname - Festlegung des Dateinamens beim Herunterladen

page - Festlegung der Seiten des PDFs

• Optional - Als Standard ist "A4" und "portrait" festgelegt.
• Bei Angabe des Attributs size kann die Seitengröße festgelegt werden. Möglich sind:
  • '4A0', '2A0', 'A0', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9', 'A10',
  • 'B0', 'B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8', 'B9', 'B10',
  • 'C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7', 'C8', 'C9', 'C10',
  • 'RA0', 'RA1', 'RA2', 'RA3', 'RA4',
  • 'SRA0', 'SRA1', 'SRA2', 'SRA3', 'SRA4',
  • 'EXECUTIVE', 'FOLIO', 'LEGAL', 'LETTER', 'TABLOID'
• Bei Angabe des Attributs orientation kann die Seitenausrichtung festgelegt werden. Möglich sind:
  • portrait
  • landscape

seitenzahlen - Anzeige von Seitenzahlen

• Beim Inhalt an werden die Seitenzahlen immer angezeigt
• Beim Inhalt aus werden nie Seitenzahlen angezeigt
• Beim Weglassen oder bei sonstigem Inhalt werden bei mehr als einer Seite die Seitenzahlen angezeigt.

box - Standardisierte Textbox

• Mit dem Attribut title wird die Überschrift festgelegt
• Mit dem Attirbut backgroundColor wird die Hintergrundfarbe festgelegt. Möglich sind CSS-Standardwerte oder Angaben der Art rgb(255,255,255).
• Der Inhalt des Tags wird als Inhalt der Box festgelegt

information - Infobox

• Mit dem Attirbut backgroundColor wird die Hintergrundfarbe festgelegt. Möglich sind CSS-Standardwerte oder Angaben der Art rgb(255,255,255).
• Der Inhalt des Tags wird als Inhalt der Box festgelegt

karo - Schreibkästchen

• Der Inhalt wird als Zeilen in cm;Spalten in cm angegeben
• Ein Kästchen ist dabei 0,5cm x 0,5cm groß.
• Es werden an jeder Seite ein halbes Kästchen als Übergang generiert.

schreiblinie - Schreiblinien

• Der Inhalt wird als Text auf der Schreiblinie generiert
• Mit dem Attribut length wird die Länge der Schreiblinie festgelegt.

qr - QR-Code

• Erzeugt einen QR-Code mit dem Inhalt des Tags.

Vollständiges Beispiel

HTML-Code:

<infsheader uuid="GpEywYxzIs9jkBQN" title="Das World Wide Web" chapter="Informationsdarstellung im WWW" number = "1.1.1"></infsheader>
<dateiname>Das_World_Wide_Web</dateiname>
<table width="100%">
    <tr>
	   <th colspan = '2'>Websites und Bücher</th>
    </tr>
    <tr>
	   <td colspan = '2' class='text'> 
            Erkläre die Begriffe Website, Webseite, Hypertext und Hyperlink.
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
Vergleiche Websites und Bücher: Welche Gemeinsamkeiten und Unterschiede gibt es?
        </td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class='smallHeader'>Websites</td>
        <td class='smallHeader'>Bücher</td>
    </tr>
<tr>
<td height="200px"></td>
<td ></td>
</tr>
</table>
<box title="World Wide Web">
            Erkläre die Begriffe World Wide Web, Browser und URL
            <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
</box>

Einbindung:

<div class='pdfeditor' data-config='{"filenameHTML":"beispiele/www.html", "showEditor" : false, "buttonText" : "Wissensspeicher herunterladen", "relativeContentPath" : "beispiele/"}'></div>

Erzeugt: