inf-schule | Arbeitsblätter » Typst-Arbeitsblätter

Typst-Arbeitsblätter

Mit dem Modul "Typst-Editor" können Arbeitsblätter auf Basis von Typst 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='typsteditor' 
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:

filenameTypst - Ü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.

Grundfunktionalität von Typst

Inf-Schule Template

Beim Typst-Editor hier auf inf-schule wird ein Template mitgeladen, in dem einige der häufigsten Funktionen enthalten sind.

title – Überschrift

Erzeugt eine zentrierte Überschrift im inf-schule-Stil.
Parameter: string (Text), optional textsize (Standard: 30pt).

#title("Das World Wide Web")
#title("Kleinere Überschrift", textsize: 18pt)

infsbox – Standardisierte Textbox

Mit dem ersten Parameter title wird die Überschrift festgelegt (weiße Schrift auf dunkelblauem Balken).
Jedes weitere Argument bildet eine eigene Spalte innerhalb der Box.

#infsbox("Aufgaben",
  [1) Erkläre den Begriff „Website“.],
  [2) Nenne zwei Browser.]
)

schreiblinie – Schreiblinie

Der Klammer-Inhalt wird als Text auf der Linie gesetzt.
Mit dem Parameter length wird die Linienlänge festgelegt (Standard: 100%).

#schreiblinie[Name:]
#schreiblinie(length: 60%)[Datum:]

karos – Schreibkästchen

Erzeugt ein 0,5 cm-Raster mit 0,25 cm Überstand rundum.
Parameter: width, height; optional ausrichtung (left | center | right, Standard: center).

#karos(10cm, 6cm)
#karos(8cm, 4cm, ausrichtung: left)

sprechblase – Sprechblase mit Öffnung und Spitze

Parameter:
- seite: "oben" | "unten" | "links" | "rechts" (Standard: "oben")
- offenBeginn: Position der Öffnung entlang der Seite (relativ, Standard: 50%)
- offenBreite: Breite der Öffnung (Standard: 2cm)
- breite, hoehe: Außenmaße der Blase (ohne Spitze)
- spitzeX, spitzeY: relative Offsets der Spitze ab Öffnungsmittelpunkt
  - Links: positives spitzeX zieht nach links
  - Rechts: positives spitzeX zieht nach rechts
  - Oben: positives spitzeY zeigt nach oben
- stroke (Linienstil), pad (Innenabstand, Standard: 6pt)
Die Blase wird relativ zur aktuellen Position platziert.

#sprechblase(seite: "oben", offenBreite: 6pt,
             breite: 12cm, hoehe: 3cm, spitzeX: 2cm, spitzeY: 1.5cm)[
  Tipp: Eine URL identifiziert eine Ressource.
]

#sprechblase(seite: "links", offenBeginn: 30%,
             breite: 8cm, hoehe: 4cm, spitzeX: 1.5cm, spitzeY: 0.5cm)[
  Merke: URL ≠ Website!
]

fachbegriff – Fachbegriff hervorheben

Setzt den Begriff fett und in der Template-Akzentfarbe rot.

Der Begriff #fachbegriff("URL") wird oft mit Adresse gleichgesetzt.

infsinfobox – Infobox

Erzeugt links einen schmalen dunkelblauen Steg mit i-Symbol und rechts den Inhalt.

#infsinfobox[
  Dieses Arbeitsblatt lässt sich digital ausfüllen oder ausdrucken.
]

infsheader / infsfooter – Kopf- und Fußzeile

Sind im Template bereits über #set page(header: ..., footer: ...) aktiviert.
Kopf: QR-Code (Doku-Link), Logo, Felder für Name/Datum, Trennlinie.
Fuß: Logo und Trennlinie.

Vollständiges Beispiel

Typst-Code:


#let fig1 = context{
  set text(size: 11pt)

let pred = "maennlich"
let cons = "poseidon"

// Gesamtausdruck als Content
let expr = [#text(pred)#text[(]#text(cons)#text[).]]

// Maße ermitteln
let mexpr = measure(expr)
let w_pred = measure(text(pred)).width
let w_before_cons = measure([#text(pred)#text[(]]).width
let w_cons = measure(text(cons)).width

// x-Positionen der Markierungen (Mitte der Segmente)
let x_pred = w_pred / 2 - 50pt
let x_cons = w_before_cons + w_cons / 2 - 40pt

// vertikale Abstände
let y_start = mexpr.height + 2pt      // Start der Linie knapp unter dem Ausdruck
let line_len = 10pt                    // Länge der senkrechten Linien
let y_label = y_start + line_len + 2pt // Baseline der Label

// Box reserviert gesamten Raum
box(width: mexpr.width, height: y_label + measure(text("Konstante")).height)[
  // Ausdruck
  #place(top + left, dx: 0pt, dy: 0pt)[#expr]

  // Linien
  #place(top + center, dx: x_pred, dy: y_start)[
    #line(start: (0pt, 0pt), end: (0pt, line_len), stroke: (paint: black, thickness: 0.75pt))
  ]
  #place(top + center, dx: x_cons, dy: y_start)[
    #line(start: (0pt, 0pt), end: (0pt, line_len), stroke: (paint: black, thickness: 0.75pt))
  ]

  // Labels (zentriert auf den Linien)
  #place(top + center, dx: x_pred, dy: y_label)[
    #text(weight: "bold", fill: rgb("#0b4f8a"))[Prädikat]
  ]
  #place(top + center, dx: x_cons, dy: y_label)[
    #text(weight: "bold", fill: rgb("#16a34a"))[Konstante]
  ]
]
}

#let fig2 = context {
  set text(size: 11pt)

  // --- Teile des Ausdrucks
  let head = text("vater ( PERSON, KIND )")
  let gap  = text("    ") // Lücke vor ':-' (4 Spaces; bei Bedarf anpassen)
  let op   = text(":-")

  let expr = [#head#gap#op]

  // --- Maße
  let mexpr   = measure(expr)
  let w_head  = measure(head).width
  let w_gap   = measure(gap).width
  let w_label = measure(text("Regelkopf")).width

  // --- x-Positionen
  let x_head = w_head / 2  - 60pt                    // Mitte des Regelkopfs
  let body_start = w_head + w_gap          // Startbereich rechts vom Kopf

  // zwei „Body-Slots“ als Platzhalter
  let slot = 2.3cm                            // horizontaler Abstand zwischen Slots
  let x_body1 = body_start + slot - 125pt
  let x_body2 = body_start + 2 * slot - 100pt

  // --- Vertikale
  let y_start = mexpr.height + 2pt            // Start der Ticks
  let line_len = 10pt
  let y_label = y_start + line_len + 2pt

  // --- Zeichnen
  box(width: mexpr.width, height: y_label + measure(text("Regelkopf")).height)[
    // Ausdruck
    #place(top + left, dx: 0pt, dy: 0pt)[#expr]

    // Helper für Tick
    #let tick(x) = place(center + horizon, dx: x, dy: y_start)[
      #line(start: (0pt, 0pt), end: (0pt, line_len),
           stroke: (paint: infsblueDark, thickness: 0.75pt))
    ]

    // Ticks
    #tick(x_head)
    #tick(x_body1)
    #tick(x_body2)

    // Label unter dem Kopf-Tick
    #place(center + horizon, dx: x_head, dy: y_label)[
      #text(weight: "bold", fill: infsblueDark)[Regelkopf]
    ]
  ]
}

#set page(margin: (bottom: 1cm),footer: none)
#title("Logische Programmierung mit Prolog - Modellierung von Wissen",textsize: 15pt)
Ein Logikprogramm besteht aus einer #fachbegriff("Wissensbasis"), in der ein Ausschnitt aus der Wirklichkeit modelliert wird, und einer #fachbegriff("Anfrage") an die Wissensbasis.
#grid(columns: (1fr, 1fr),inset: 5pt,
image("beispiele/wissensbasis.png"),
block[
#schreiblinie[Ein #fachbegriff("Faktum") beschreibt]
#schreiblinie[]
#schreiblinie[]
#schreiblinie[Es besteht aus]
#schreiblinie[]
]
)

Beispiele für Fakten:
 #table(
  columns: (1fr, 1fr),
  align: horizon,
  table.header(
    [*Faktum in Umgangssprache*], [*Faktum in Prolog*],
  ),
  block[
    #text("Poseidon ist männlich"),
    #v(5%)
  ],
  fig1,
  block[
    #text("Athene ist Hera's Kind"),
    #v(5%)
  ],
  block[
    #v(5%)
  ]
)

#schreiblinie[Mit #fachbegriff("Regeln") kann man]
#infsbox("Aufbau (vgl. 8.3.1.9)")[
#fig2

Dies entspricht einer Wenn-Dann-Aussage:
#schreiblinie("Eine PERSON ist")
#schreiblinie("wenn")
]

#let anfrageBeispiel(input) = [
  #align(center)[  
    #block[
      #underline[
        #text(input, weight: "bold")
      ]
      #v(70pt)
    ]
  ]
]
#set text(weight: "bold", )
#infsbox("Beispiele für eine Anfrage an die Wissensbasis",
anfrageBeispiel("Ja-Nein-Anfrage"),
anfrageBeispiel("Ergänzungsanfrage"),
anfrageBeispiel("Zusammengesetzte Anfrage")
)

#place(dx: 0cm,dy: -0.7cm)[
#sprechblase(breite: 10cm,hoehe: 1.5cm,offenBeginn: 70%,spitzeX: 0.5cm)[
  #fachbegriff("Variablen") schreibt man in Großbuchstaben, #fachbegriff("konstanten") und #fachbegriff("prädikate") klein.
]
]
#place(dx: 11cm,dy: -0.7cm)[
#sprechblase(breite: 6cm,hoehe: 1.5cm,offenBeginn: 40%,spitzeX: -0.5cm)[
  #block(", steht für")
  #block("; steht für")
]
]

Einbindung:

<div class='typsteditor' data-config='{"filenameTypst":"Logische_Programmierung.typ", "showEditor" : false, "buttonText" : "Wissensspeicher herunterladen", "relativeContentPath" : "beispiele/"}'></div>

Erzeugt: