Kontrolle Eingabe

Das Modul einbinden

Um die interaktiven Elemente nutzen zu können, muss die Einbindung über den Meta-Tag features erfolgen:

----
Features: kontrolle-eingabe
----

Funktion

Das interaktive Element erzeugt ein Input-Feld oder ein Select-Feld, welches z.B. in Aufgaben genutzt werden kann. Die möglichen Lösungen (und ggf. die Auswahlmöglichkeiten) werden in der Konfiguration übergeben. Wird eine falsche Eingabe getätigt, so wird das Feld rot (inf-schule Farbe) gefärbt. Wird eine der übergebenen Lösungen eingegeben/ausgewählt, so wird das Feld dunkelblau (inf-schule Farbe) gefärbt. Damit es farbunabhängig ist, wird auch ein ✓ bzw. x angezeigt.

Mathe-Modus

Im Mathe-Modus überprüft das Tool, ob die eingegebene Gleichung bzw. der eingegebene Term passend zum ersten Eintrag der Lösungen ist. Damit sind also Leerzeichen, Multiplikationszeichen oder auch umgestellte Terme richtig. Es ist aber keine mathematische Äquivalenz eher eine symbolische, denn ein verdoppelter Term wird nicht als äquivalent gekennzeichnet.

RegEx-Modus

Im RegEx-Modus überprüft das Tool, ob die Eingabe zum regulären Ausdruck passt, welcher als erster Eintrag der Lösungen übergeben worden ist.

Konfiguration vornehmen

dataconfig - Übergabe der Konfiguration im JSON Format.

• modus - Hier kann mit math bzw. regex einer der beiden Modi eingestellt werden (Standardwert: '')
• breite - Breite des Input-Feldes in Pixel, ohne den Zusatz px (Standardwert: 100)
• loesungen - Übergabe eines Arrays von Strings mit möglichen Lösungen (im Mathe und RegEx Modus wird nur der erste Eintrag beachtet). Alternativ kann im RegEx Modus auch ein Objekt mit pattern und flags übergeben werden, siehe Beispiel.
• ausrichtung - Übergabe der Textausrichtung im Input-Feld als String (left, center, right; Standardwert: center)
• typ - Übergabe des Eingabetyps (input, select; Standardwert: input)
• auswahl - Übergabe eines Arrays von Strings der Auswahlmöglichkeiten, falls als typ select gewählt wurde

Beispiele Input

<p>Die Wahrscheinlichkeit für Kopf bei einer Münze: <kontrolle-eingabe dataconfig='{
    "breite": 55,
    "loesungen": ["0,5","0.5","50/100","50%"],
    "ausrichtung": "left"
  }'></kontrolle-eingabe></p>
<p>Pi auf zwei Nachkommastellen gerundet: <kontrolle-eingabe dataconfig='{
    "breite": 80,
    "loesungen": ["3,14","3.14"]
  }'></kontrolle-eingabe></p>

Die Wahrscheinlichkeit für Kopf bei einer Münze:

Pi auf zwei Nachkommastellen gerundet:

Beispiel Select

<p>Die Wahrscheinlichkeit für Kopf bei einer Münze: <kontrolle-eingabe dataconfig='{
    "breite": 55,
    "loesungen": ["50%"],
    "typ": "select",
    "auswahl": ["40%","45%","50%","55%","60%","65%","70%"]
  }'></kontrolle-eingabe></p>

Die Wahrscheinlichkeit für Kopf bei einer Münze:

Beispiel Mathe-Modus

  <kontrolle-eingabe dataconfig='{
    "typ": "input",
    "modus": "math",
    "breite": 100,
    "loesungen": ["y=2x+7"]
  }'></kontrolle-eingabe>
  

Beispiel RegEx-Modus

  <kontrolle-eingabe dataconfig='{
    "typ": "input",
    "modus": "regex",
    "breite": 100,
    "loesungen": ["^[a-z][0-9][A-Z]$"]
  }'></kontrolle-eingabe>
  

Beispiel RegEx-Modus mit Pattern/Flags-Objekt

  <kontrolle-eingabe dataconfig='{
    "typ": "input",
    "modus": "regex",
    "breite": 150,
    "loesungen": { "pattern": "^hi$", "flags": "i" }
  }'></kontrolle-eingabe>