i

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"):

Beispielquelltext für die Einbindung des Moduls über das Meta-Tag features

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.

filenameCSS - Übergabe eines Styles

  • Hier kann eine Datei übergeben werden, aus der ein CSS-Stil mit eingeschränkten Möglichkeiten 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

Ein Element mit der Klasse seitenumbruch erzeugt einen Seitenumbruch vor dem auf der Seite sichtbaren Element. Dies geht entsprechend nicht mit leeren oder nicht auf der Seite gedruckten Elementen!

Die hinterlegte CSS-Datei enthält den Code "span{color: red;}"

Es gibt einen Satz an vordefinierten Stilanpassungen, die durch inline-CSS oder die Angabe einer CSS-Datei angepasst werden können.

Das hier verwendete CSS ist nur in begrenzten Umfang verfügbar. Möglich sind nur Basisselektoren der Form "{tag} {...}". Klassen, IDs oder geschachtelte Selektoren sind nicht möglich.

Mögliche CSS-Tags
  • font-family
  • font-size
  • font-weight
  • font-style
  • text-align
  • letter-spacing
  • color
  • margin
  • margin-top
  • margin-left
  • margin-bottom
  • margin-right
  • padding
  • padding-top
  • padding-left
  • padding-bottom
  • padding-right
  • background-color
  • fit
  • text-decoration

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 Attribut 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:

Suche

v
17.6.3.9
inf-schule.de/infschule/dokumentation/kapitel-erstellen/arbeitsblaetter
inf-schule.de/17.6.3.9
inf-schule.de/@/page/S86XCTvkvvHYMWOg

Rückmeldung geben