open:vibe-coding [herr-zimmerer.de]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== Vibe Coding ======
Sie müssen keine einzige Zeile Programmiercode lesen können, um eigene Programme verwirklichen zu können! Lassen Sie es uns ausprobieren! 

==== Programmiermarionette ====
Sie brauchen ein KI-System, das eine HTML-Seite erstellen kann (z. B. [[https://ki.alp.dillingen.de|BYLKI]]). Suchen Sie sich ein System aus und fragen Sie das System, ob es eine HTML-Datei als Download-Datei generieren kann. Ziemlich sicher wird es ja sagen. Und schon können wir mit Projekt 1 beginnen: dem Zufallsgenerator. 



==== Projekt 1: Zufallszahl ====

<WRAP center round tip 60%>
"Sie" erstellen eine kleines Tool, das eine zufällige Zahl anzeigt. Nach einem ersten Prototyp passen Sie das Tool weiter an.
</WRAP>


Kopieren Sie folgenden Prompt in ein KI-System Ihrer Wahl: 
  
  
  Erstelle eine einfache Webseite mit einem Zufallsgenerator.
  Die Seite soll:
   - eine große Zahl anzeigen,
   - einen gut sichtbaren Button mit der Aufschrift „Neue Zahl“ haben,
  Die Gestaltung soll übersichtlich und modern sein und auch auf einem Tablet gut funktionieren.
  Erstelle alles in einer einzigen HTML-Datei, sodass ich die Datei direkt im Browser öffnen kann.

=== Anpassungen: ===
  * Sagen Sie der KI, aus welchem Zahlenraum die Zahlen stammen sollen.
  * Wollen Sie womöglich die Farbe ändern? 
  * Oder soll die Zahl gegen Ende immer langsamer wechseln, sodass die Spannung steigt? 


==== Projekt 2: Flashback ====
<WRAP center round tip 60%>
Zu Beginn der Unterrichtsstunde soll an den Inhalt der letzten Stunde angeknüpft werden: eine Frage, drei Antwortmöglichkeiten.
</WRAP>

Kopieren Sie folgenden Prompt in ein KI-System Ihrer Wahl: 

  Erstelle eine einfache Webseite für einen kurzen Rückblick zu Beginn einer Unterrichtsstunde.
  Die Seite soll:
    - eine Frage anzeigen,
    - darunter drei große Antwortmöglichkeiten zeigen,
    - nach dem Antippen sofort anzeigen, ob die Antwort richtig oder falsch war,
    - die richtige Antwort deutlich hervorheben.
  
  Die Gestaltung soll übersichtlich, modern und auf einem Tablet gut bedienbar sein.
  Verwende zunächst diese Frage:
  
  „Welche Funktion hat Dopamin im Gehirn?“
    
  Antwortmöglichkeiten:
  * A: Es macht uns automatisch glücklich.
  * B: Es beeinflusst Motivation, Lernen und die Erwartung von Belohnungen.
  * C: Es sorgt ausschließlich für Entspannung.
  
  Richtig ist Antwort B.
  Erstelle alles in einer einzigen HTML-Datei, die direkt im Browser geöffnet werden kann.

=== Anpassungen: ===
  * Momentan kann dies Tool nur diese eine Frage anzeigen. Wäre es nicht praktisch, wenn man im Tool selbst eine neue Frage eingeben könnte? Treten Sie mit der KI in den Dialog und formuliert Sie Ihre Wünsche! Ein Lösungsvorschlag verbirgt sich hinter der Fußnote ((Ergänze eine Bearbeitungsfunktion, mit der ich die Frage, die drei Antwortmöglichkeiten und die richtige Lösung direkt auf der Webseite ändern))

==== Projekt 3: eigene Ideen ====

<WRAP center round tip 60%>
Sie sind dran! Suchen sie nach einer kleinen Idee, die sie verwirklichen könnten.
</WRAP>

Tipps: 
  * Beschreiben Sie erst ihrer Kollegin / ihrem Kollegen, was ihnen vorschwebt - das hilft oft, die Gedanken in klare Worte zu fassen. 
  * Beschreiben Sie der KI möglichst genau, was sie wollen. 
  * Fragen Sie die KI, ob sie noch weitere Informationen benötigt. 

==== Projekte hochladen & ausprobieren ====

Auf de nachfolgenden Seite können Sie Ihr Projekt((als html-Datei)) hochladen und testen:

  * Link: https://vibe-coding.herr-zimmerer.de 
  * Passwort: Name der Schule in Kleinbuchstaben