BODIES IN MAKING

# BODIES IN MAKING

## Technik - Körperbilder - Selbstermächtigung

## Erstelle deinen eigenen Wrestling-Charakter!

Was ist Wrestling? Was ist KI? Und was hat das alles mit meiner eigenen Körperwahrnehmung zu tun?

Du kannst dich durch diese Seite scrollen. Du bekommst eine Anleitung, wie du mittels KI einen eigenen Wrestling-Charakter erstellen, und eine Sammelkarte mit dem Lasercutter herstellen kannst. Später gibt es noch mehr Hintergrundinfos: Was kann KI, und zu welchem Preis?

Immer wieder werden Fragen und Aufgaben gestellt, aber keine Angst, niemand schaut sich deine Antworten an - probier's einfach aus! 🙂

Melde dich jederzeit bei einer Explainer:in, wenn du Fragen hast.

Protipp: Manchmal hängt das Notebook, klicke einfach auf den nicht geladenen Teil der Seite, das hilft meistens 😁

Was du in diesem Tutorial machen wirst:

1. Eintauchen in die Welt des Wrestling
2. Herumspielen mit einem Open Source KI Generator
3. Verständnis entwickeln, wie generative künstliche Intelligenz funktioniert

## DIE WELT DES WRESTLING

## Und? Hast du?

Ja!
Nein!

In diesem Video wird dir Wrestling erklärt: (Video startet bei Minute 3:54, schaue es dir bis Minute 5:09 an 🙃)

🎧 Setzt jetzt deine Köpfhörer auf 🎧

Hier kannst du dir einen Showkampf anschauen:

🎧 Jetzt brauchst du die Kopfhörer nicht mehr 🎧

## Was sind deine Gedanken/Gefühle zu Wrestling?

Schreibe hier deine Gedanken auf:

Hier kannst du dich durch klicken und ein paar coole Wrestlerinnen entdecken:

### 👉 Klick hier! 👈

### 👉 Und hier! 👈

### 👉 Letzter Klick! 👈

## Was fällt dir hinsichtlich der Körper dieser Charaktere auf?

### Gibt es eine spezielle "Norm", wie alle ausschauen sollen? Wie unterscheiden sie sich?

Schreibe hier deine Gedanken auf:

# Jetzt bist du dran! Prompte deine eigene Wrestling-Figur:

Wir verwenden den KI-Generator perchance.org

perchance.org ist Open Source, das heißt er ist kostenlos verfügbar und alle können sehen, wie es programmiert wird.

So ist perchance.org aufgebaut:

## Überlege dir, was deine Wrestling-Figur für Eigenschaften haben soll.

Denk immer dran: Wrestling-Charaktere tragen ihre Persona (= ihre Eigenschaften) nach außen! 💪👀💖

## Wie soll meine Wrestling-Figur sein?

Beschreibe deinen Wrestling-Charakter (Aussehen und Eigenschaften):

Mit dieser Beschreibung erstellst du dann das Bild von deinem Wrestling-Charakter.

perchance.org funktioniert aber am besten auf Englisch. Übrigens wie jede andere KI auch! Wenn du die besten Ergebnisse von Gemini, ChatGPT, Mistral und Co. bekommen willst, prompte auf Englisch! Mit dem KI-Übersetzer DeepL kannst du deine Charakter-Beschreibung kopieren und übersetzen lassen: Beschreibung markieren - STRG C - Klick! - STRG V ⌨

## 💥 Jetzt erstellst du ein Bild deiner Wrestling-Figur!!! 💥

Lies dir das Folgende kurz durch und klicke dann auf den Link zum KI-Generator:

1. Spiele dich mit dem prompten (eingeben deiner Eigenschaften in den KI-Generator), bis du zufrieden bist mit dem Ergebnis (du kannst z.B. ausprobieren was passiert wenn du "female wrestler" dazu gibst oder weglässt!) 💪

2. Pro Durchgang kannst du dir das beste Bild ins inkscape file vorlage_sammelkarte.svg speichern (Rechtsklick: Grafik kopieren, inkscape in der Leiste öffnen und Rechtsklick: Einfügen, die Datei ist unten in der Leiste) 📍

3. Entscheide dich für deine Lieblingsfigur und lösche alle anderen raus, folge der Anleitung in der .svg Datei um deine Sammelkarte fertig zu stellen!

4. Wie immer gilt: Melde dich jederzeit bei einer Explainer:in 😃

Und hier kommst du zu dem KI Generator:

## 👉 Klick! 👈

## Hast du dein Bild erstellt?

Ja
Nein

Name deines Wrestling-Charakters:
Catch Phrase deines Wrestling Charakters:
Special Move/Spezialkraft deines Wrestling Charakters:

## Wenn du willst, können wir bei deinem nächsten technischen Museum Wien Besuch deine Sammelkarte im techLAB 🎇lasercutten🎇!

Öffnungszeiten techLAB: Do-So 14-18 Uhr. Bringe deine .svg Datei auf einem USB-Stick mit und erzähle, dass du von Bodies in Making kommst 😀

### So oder so ähnlich könnte deine Sammelkarte aussehen 😍

### 👉 Klick! 👈

## Welche Ähnlichkeiten hatten alle KI‑generierten Bilder? Was ist immer wieder vorgekommen?

Schreibe hier auf, was dir aufgefallen ist:

Folgende Eigenschaften kommen immer wieder vor, auch wenn wir sie nicht eingeben:

### 👉 Klick! 👈

- weiße/helle Hautfarbe
- große Augen
- volle Lippen
- kleine Nase
- volles, glattes Haar
- keine Körperbehaarung (bei Frauen)
- makellose Haut
- zusätzliche Körperteile/Hände waren nicht realitätsnah → das nennt man: KI Halluzinationen
- ...

Deckt sich das mit dem, was dir aufgefallen ist?

# Aber wie funktioniert das Ganze jetzt?

Du hast eben eine generative künstliche Intelligenz genutzt, gratuliere! 🌟 🌟 🌟

Vielleicht hast du ja schon einmal ChatGPT, Gemini und co um Hilfe bei deiner Hausaufgabe gefragt - auch das sind generative KIs.

Aber... KI Generator... generative KI... generieren... wtf?!

## Was bedeutet generieren?

erstellen
kopieren
verwalten
erdenken

Klicke dich durch um herauszufinden, wie eine künstliche Intelligenz aufgebaut ist:

Was haben Ebenen mit KI zu tun???

### 👉 Klick! 👈

Keine Angst, wenn dus nicht gleich verstehst - scrolle weiter und es wird bestimmt klarer! 👁 👄 👁

## Wie viele Ebenen gibt es bei jeder KI?

1
2
3
4

Layer heißt Ebene. Wir haben also...

Hier ist die Auflösung:

### 👉 Klick! 👈

3 Ebenen:

1. Eingabe Ebene (input layer)
2. Versteckte Ebene (hidden layer)
3. Ausgabe Ebene (output layer)

## Was könnte die Eingabe Ebene sein?

Die Homepage
Der Code
Der Prompt
Die Parameter

## Was könnte die Ausgabe Ebene sein?

Das generierte Bild
Die Zeit die es braucht
Unsere Interpretation
Der gesamte Prozess

## Aber was ist jetzt die versteckte Ebene???

Solche Systeme werden NEURONALE NETZWERKE genannt. Kommt dir das bekannt vor? Wo gibt es noch NEURONEN?

## Wo kommen neuronale Netzwerke noch vor?

in der Fischerei
im Gehirn
im Werkzeugkasten
in der Schule

KI-Systeme sind lose von unserem Gehirn inspiriert. Wenn wir etwas sehen, könnte das in unserem Gehirn so ausschauen:

### 👉 Klick! 👈

Die versteckte Ebene spiegelt also die Verarbeitung von unserem Gehirn wider.

Weißt du was dein Gehirn genau macht, wenn du einen Frosch siehst?

# Wie kommt die versteckte Ebene zustande?

Dazu braucht es Daten. Mithilfe dieser Daten wird eine KI trainiert. Daten können alles mögliche sein. Für den Bildgenerator wurden andere Bilder verwendet.

Das geschieht in 3 Phasen:

### 👉 Klick! für Phase 1 👈

Training:

Unbearbeitete Daten - das heißt Bilder ohne Beschreibungen, was darauf zu sehen ist - werden gefüttert, um ein Grundgerüst für den Generator zu bauen. (Aber woher kommen die Daten eigentlich?! 🤔 dazu später mehr 🙃)

### 👉 Klick! für Phase 2 👈

Tuning:

- Ziel: Die KI auf gewissen Anwendungen zu schärfen - die Inhalte, die die KI generiert, soll Sinn ergeben (z.B. Bilder die Sinn machen, Musik statt nur Töne, medizinische Diagnosen etc.)
- Dazu wird benötigt: speziell zugeordnete und bearbeitete Daten - z.B. ein Bild, bei dem dabei steht, was darauf zu sehen ist
- Das wird gemacht von: ~300-400 Mio. ECHTEN Menschen ("Datenarbeitende") unter meistens sehr schlechten Arbeitsbedingungen (Hast du eine Idee, wo auf der Welt diese Datenarbeitenden diese Arbeit machen könnten? 🌏)

### 👉 Klick! für Phase 3 👈

Verfeinern:

- Ziel: Verbesserte Performance - die Anfragen bekommen schnellere und bessere Ergebnisse
- Dazu wird benötigt: Performance Überprüfung nach Veröffentlichung der KI - durch Nutzung von Menschen wird im Betrieb getestet, ohne dass man es mitkriegt
- Das wird gemacht von: meist den Betreiber:innen von KI-Generatoren, mit den Erfahrungen, die die Nutzer:innen gemacht haben

### 👉 Klick! Für Zusammenfassung 👈

## Was wird gebraucht, um eine KI zu trainieren?

medizinische Befunde
gelabelte Daten
Videos
unbearbeitete Daten

## Eine KI soll auf Grundlage von Fotos Hautkrebs früherkennen. Womit müssen wir sie tunen?

Fotos, auf denen Haut zu sehen ist
Fotos, auf denen markiert ist, ob es sich um Hautkrebs handelt
Transkripte von medizinischen Gesprächen
verschiedene Fotos mit vielen Motiven

# Aber woher kommen jetzt die Daten für das Training???

### Oder:

## Wo gibt es überall Bilder im Internet?

Schreibe hier deine Überlegungen auf:

Auf diese Ergebnisse sind wir gekommen:

### 👉 Klick! 👈

## Hier werden die Daten verarbeitet:

Die KI braucht Daten, damit sie Inhalte generieren kann. Sie kann also nur auf Vergangenes zurück greifen, um (vermeintlich?) Neues zu generieren.

# Abschlussfrage:

## Wenn ich der KI nur Bilder von Tasteninstrumente füttere, kann sie dann ein Bild von einem Blasinstrument erzeugen?

## Was sagt uns das generell darüber, was KI kann und was KI nicht kann?

Mach dir selber Gedanken dazu! Wenn du magst besprich es mit einer Bezugsperson 🌟

Schreibe hier deine Gedanken auf:

# Danke fürs Mitmachen!!!

Notebook-Code
Code-Zelle 6

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Und? Hast du?</h2>

    <form onsubmit="event.preventDefault();
      (function(form) {
        const answers = form.querySelectorAll('input[name=answer]');
        const result = form.querySelector('.result');
        let selected = false;

        answers.forEach(answer => {
          if (answer.checked) {
            selected = true;
            if (answer.value === 'correct') {
              result.textContent = 'Top! Scrolle weiter, um dein Wissen zu vertiefen &#x1F601;';
              result.style.color = 'blue';
            } else {
              result.textContent = 'Auch gut! Hier kannst du in die Welt des Wrestlings eintauchen 🙃';
              result.style.color = 'blue';
            }
          }
        });

        if (!selected) {
          result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
          result.style.color = 'orange';
        }
      })(this);
    ">

      <label>
        <input type="radio" name="answer" value="correct">
        Ja!
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        Nein!
      </label><br>

      <button type="submit">einloggen</button>

      <p class="result" style="font-weight: bold;"></p>
    </form>
    """

    display(HTML(html_code))

Code-Zelle 8

    from IPython.display import YouTubeVideo

Code-Zelle 9

    YouTubeVideo("7FRIuCSTlNs?si=XiWDXHWJTjIypimg&amp;start=234", width=600)

Code-Zelle 11

    YouTubeVideo("B6cclM7I6U8", width=600)

Code-Zelle 14

    import ipywidgets as widgets

    widgets.Textarea(
        value='Schreibe hier deine Gedanken auf:',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )

Code-Zelle 20

    import ipywidgets as widgets

    widgets.Textarea(
        value='Schreibe hier deine Gedanken auf:',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )

Code-Zelle 28

    import ipywidgets as widgets

    widgets.Textarea(
        value='Beschreibe deinen Wrestling-Charakter (Aussehen und Eigenschaften):',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )

Code-Zelle 32

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Hast du dein Bild erstellt?</h2>

    <form onsubmit="event.preventDefault();
      (function(form) {
        const answers = form.querySelectorAll('input[name=answer]');
        const result = form.querySelector('.result');
        let selected = false;

        answers.forEach(answer => {
          if (answer.checked) {
            selected = true;
            if (answer.value === 'correct') {
              result.textContent = '&#x2B50; Super! Weiter gehts &#x2B50;';
              result.style.color = 'green';
            } else {
              result.textContent = 'Klick auf den obrigen Link, und los gehts! 🙃';
              result.style.color = 'red';
            }
          }
        });

        if (!selected) {
          result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
          result.style.color = 'orange';
        }
      })(this);
    ">

      <label>
        <input type="radio" name="answer" value="correct">
        Ja
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        Nein
      </label><br>

      <button type="submit">Antwort prüfen</button>

      <p class="result" style="font-weight: bold;"></p>
    </form>
    """

    display(HTML(html_code))

Code-Zelle 33

    import ipywidgets as widgets

    widgets.Textarea(
        value='Name deines Wrestling-Charakters:',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )

Code-Zelle 34

    import ipywidgets as widgets

    widgets.Textarea(
        value='Catch Phrase deines Wrestling Charakters:',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )

Code-Zelle 35

    import ipywidgets as widgets

    widgets.Textarea(
        value='Special Move/Spezialkraft deines Wrestling Charakters:',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )

Code-Zelle 41

    import ipywidgets as widgets

    widgets.Textarea(
        value='Schreibe hier auf, was dir aufgefallen ist:',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )

Code-Zelle 45

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Was bedeutet generieren?</h2>

    <form onsubmit="event.preventDefault();
      (function(form) {
        const answers = form.querySelectorAll('input[name=answer]');
        const result = form.querySelector('.result');
        let selected = false;

        answers.forEach(answer => {
          if (answer.checked) {
            selected = true;
            if (answer.value === 'correct') {
              result.textContent = '✅ Richtig! „Generieren“ bedeutet erstellen. Die generative KI erstellt Inhalte.';
              result.style.color = 'green';
            } else {
              result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
              result.style.color = 'red';
            }
          }
        });

        if (!selected) {
          result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
          result.style.color = 'orange';
        }
      })(this);
    ">

      <label>
        <input type="radio" name="answer" value="correct">
        erstellen
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        kopieren
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        verwalten
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        erdenken
      </label><br><br>

      <button type="submit">Antwort prüfen</button>

      <p class="result" style="font-weight: bold;"></p>
    </form>
    """

    display(HTML(html_code))

Code-Zelle 48

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Wie viele Ebenen gibt es bei jeder KI?</h2>

    <form onsubmit="event.preventDefault();
      (function(form) {
        const answers = form.querySelectorAll('input[name=answer]');
        const result = form.querySelector('.result');
        let selected = false;

        answers.forEach(answer => {
          if (answer.checked) {
            selected = true;
            if (answer.value === 'correct') {
              result.textContent = '✅ Richtig! Es gibt 3 Ebenen.';
              result.style.color = 'green';
            } else {
              result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
              result.style.color = 'red';
            }
          }
        });

        if (!selected) {
          result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
          result.style.color = 'orange';
        }
      })(this);
    ">

      <label>
        <input type="radio" name="answer" value="wrong"> 1
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong"> 2
      </label><br>

      <label>
        <input type="radio" name="answer" value="correct"> 3
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong"> 4
      </label><br><br>

      <button type="submit">Antwort prüfen</button>

      <p class="result" style="font-weight: bold;"></p>
    </form>
    """

    display(HTML(html_code))

Code-Zelle 50

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Was könnte die Eingabe Ebene sein?</h2>

    <form onsubmit="event.preventDefault(); checkAnswer(this)">
      <label>
        <input type="radio" name="answer" value="wrong"> Die Homepage
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong"> Der Code
      </label><br>

      <label>
        <input type="radio" name="answer" value="correct"> Der Prompt
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong"> Die Parameter
      </label><br><br>

      <button type="submit">Antwort prüfen</button>

      <p class="result" style="font-weight: bold;"></p>
    </form>

    <script>
    function checkAnswer(form) {
      const answers = form.querySelectorAll('input[name="answer"]');
      const result = form.querySelector('.result');
      let selected = false;

      answers.forEach(answer => {
        if (answer.checked) {
          selected = true;
          if (answer.value === "correct") {
            result.textContent = "✅ Richtig! Prompten bedeutet eingeben!";
            result.style.color = "green";
          } else {
            result.textContent = "❌ Macht nix. Probiers gleich nochmal! 🙃";
            result.style.color = "red";
          }
        }
      });

      if (!selected) {
        result.textContent = "⚠️ Bitte wähle eine Antwort aus.";
        result.style.color = "orange";
      }
    }
    </script>
    """

    display(HTML(html_code))

Code-Zelle 51

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Was könnte die Ausgabe Ebene sein?</h2>

    <form onsubmit="event.preventDefault();
      (function(form) {
        const answers = form.querySelectorAll('input[name=answer]');
        const result = form.querySelector('.result');
        let selected = false;

        answers.forEach(answer => {
          if (answer.checked) {
            selected = true;
            if (answer.value === 'correct') {
              result.textContent = '✅ Richtig! Die Ausgabe ist das Bild, das generiert wird!';
              result.style.color = 'green';
            } else {
              result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
              result.style.color = 'red';
            }
          }
        });

        if (!selected) {
          result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
          result.style.color = 'orange';
        }
      })(this);
    ">

      <label>
        <input type="radio" name="answer" value="correct">
        Das generierte Bild
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        Die Zeit die es braucht
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        Unsere Interpretation
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        Der gesamte Prozess
      </label><br><br>

      <button type="submit">Antwort prüfen</button>

      <p class="result" style="font-weight: bold;"></p>
    </form>
    """

    display(HTML(html_code))

Code-Zelle 54

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Wo kommen neuronale Netzwerke noch vor?</h2>

    <form id="quiz2">
      <label>
        <input type="radio" name="answer2" value="wrong">
        in der Fischerei
      </label><br>

      <label>
        <input type="radio" name="answer2" value="correct">
        im Gehirn
      </label><br>

      <label>
        <input type="radio" name="answer2" value="wrong">
        im Werkzeugkasten
      </label><br>

      <label>
        <input type="radio" name="answer2" value="wrong">
        in der Schule
      </label><br><br>

      <button type="button" onclick="checkAnswer2()">Antwort prüfen</button>
    </form>

    <p id="result2" style="font-weight: bold;"></p>

    <script>
    function checkAnswer2() {
      const answers = document.getElementsByName("answer2");
      let result = document.getElementById("result2");
      let selected = false;

      for (let i = 0; i < answers.length; i++) {
        if (answers[i].checked) {
          selected = true;
          if (answers[i].value === "correct") {
            result.innerHTML = "✅ Richtig! Neuronale Netzwerke kommen im Gehirn vor.";
            result.style.color = "green";
          } else {
            result.innerHTML = "❌ Macht nix. Noch ein Versuch! 🙃";
            result.style.color = "red";
          }
        }
      }

      if (!selected) {
        result.innerHTML = "⚠️ Bitte wähle eine Antwort aus.";
        result.style.color = "orange";
      }
    }
    </script>
    """

    display(HTML(html_code))

Code-Zelle 63

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Was wird gebraucht, um eine KI zu trainieren?</h2>

    <form onsubmit="event.preventDefault();
      (function(form) {
        const answers = form.querySelectorAll('input[name=answer]');
        const result = form.querySelector('.result');
        let selected = false;

        answers.forEach(answer => {
          if (answer.checked) {
            selected = true;
            if (answer.value === 'correct') {
              result.textContent = '✅ Richtig! Als 1. Schritt wird mit unbearbeitete Daten trainiert!';
              result.style.color = 'green';
            } else {
              result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
              result.style.color = 'red';
            }
          }
        });

        if (!selected) {
          result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
          result.style.color = 'orange';
        }
      })(this);
    ">

      <label>
        <input type="radio" name="answer" value="wrong">
        medizinische Befunde
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        gelabelte Daten
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        Videos
      </label><br>

      <label>
        <input type="radio" name="answer" value="correct">
        unbearbeitete Daten
      </label><br><br>

      <button type="submit">Antwort prüfen</button>

      <p class="result" style="font-weight: bold;"></p>
    </form>
    """

    display(HTML(html_code))

Code-Zelle 64

    from IPython.display import display, HTML

    html_code = """
    <h2 style="margin-bottom: 20px;">Eine KI soll auf Grundlage von Fotos Hautkrebs früherkennen. Womit müssen wir sie tunen?</h2>

    <form onsubmit="event.preventDefault();
      (function(form) {
        const answers = form.querySelectorAll('input[name=answer]');
        const result = form.querySelector('.result');
        let selected = false;

        answers.forEach(answer => {
          if (answer.checked) {
            selected = true;
            if (answer.value === 'correct') {
              result.textContent = '✅ Richtig! Die KI wird anhand vorbearbeiteter Daten trainiert, um spezifische Aufgaben zu lösen';
              result.style.color = 'green';
            } else {
              result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
              result.style.color = 'red';
            }
          }
        });

        if (!selected) {
          result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
          result.style.color = 'orange';
        }
      })(this);
    ">

      <label>
        <input type="radio" name="answer" value="wrong">
        Fotos, auf denen Haut zu sehen ist
      </label><br>

      <label>
        <input type="radio" name="answer" value="correct">
        Fotos, auf denen markiert ist, ob es sich um Hautkrebs handelt
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        Transkripte von medizinischen Gesprächen
      </label><br>

      <label>
        <input type="radio" name="answer" value="wrong">
        verschiedene Fotos mit vielen Motiven
      </label><br><br>

      <button type="submit">Antwort prüfen</button>

      <p class="result" style="font-weight: bold;"></p>
    </form>
    """

    display(HTML(html_code))

Code-Zelle 68

    import ipywidgets as widgets

    widgets.Textarea(
        value='Schreibe hier deine Überlegungen auf:',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )

Code-Zelle 76

    import ipywidgets as widgets

    widgets.Textarea(
        value='Schreibe hier deine Gedanken auf:',
        placeholder='Type something',
        layout=widgets.Layout(width='600px'),
        disabled=False
    )