Update README

RoyalFoxy · RoyalFoxy · commit eef53f8a1693 · 2023-12-05T12:57:47.000+01:00
diff --git a/TASKS.md b/TASKS.md
@@ -1,12 +1,18 @@
 # Schnuppertag bei der Liip
 
+Heute werden wir mit Hilfe von AI Bilder generieren. Du wirst lernen wie man Styling.
+
+Wenn du alles gestartet hast haben sich 3 neue Browser Tabs geöffnet. Im Tab mit dem Titel `Bilder Generierung` findest du die Bilder Webseite an der du aktiv arbeiten wirst. Im zweiten Tab mit dem Titel `Aufgaben` findest du die Aufgaben dazu. Im dritten Tab mit dem Titel `Svelte Chat` befindet sich ein Chatbot, welchen du verwenden kannst um Unterstützung für das Lösen der Aufgaben zu erhalten. Der Chatbot kennt alle Aufgaben sowie deren Lösungen. Verwende den Chatbot wenn du Hilfe zu einer Aufgabe benötigst oder frage uns direkt.
+
+Öffne nun den Tab mit dem Titel `Bilder Generierung` um mit den Aufgaben zu beginnen.
+
 ## Einfache Aufgaben
 
 ### 1. Titel
 
 #### Aufgabe
 
-Füge einen Titel in die Webseite ein.
+Füge einen Titel mit dem Text `Bild Generierung` in die Webseite ein.
 
 #### Hilfestellung
 
diff --git a/chat/src/App.svelte b/chat/src/App.svelte
@@ -8,6 +8,13 @@
   <div class="app">
     <h1 class="title">Svelte Chat</h1>
 
+    <p class="explanation">
+      Dieser Chat kannst du benutzen um Fragen über die Aufgaben und Svelte zu
+      stellen. Es kann sein, dass der Chatbot falsche antworten zurückgibt,
+      deswegen sollst du uns fragen falls eine Antwort von ihm nicht
+      funktioniert.
+    </p>
+
     <form
       class="input-wrapper"
       on:submit|preventDefault
@@ -41,4 +48,8 @@
     font-size: 4rem;
     margin: 2rem 0;
   }
+
+  .explanation {
+    padding-bottom: 2rem;
+  }
 </style>
diff --git a/chat/src/components/HistoryElement.svelte b/chat/src/components/HistoryElement.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <div>
-  <h2 class="role {role}">{role}</h2>
+  <h2 class="role {role}">{role === "user" ? "Frage" : "Antwort"}</h2>
   <div class="content">{@html parsedContent}</div>
 </div>
 
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Bilder generierung</title>
+    <title>Bilder Generierung</title>
 
     <script type="module" src="/src/main.ts" defer></script>
   </head>
diff --git a/presentations/Svelte&OpenAI.pptx b/presentations/Svelte&OpenAI.pptx
diff --git a/tasks/src/TASKS.ts b/tasks/src/TASKS.ts
@@ -1,8 +1,22 @@
 const TASKS = `<h1 id="schnuppertag-bei-der-liip">Schnuppertag bei der Liip</h1>
+<p>Heute werden wir mit Hilfe von AI Bilder generieren. Du wirst lernen
+wie man Styling.</p>
+<p>Wenn du alles gestartet hast haben sich 3 neue Browser Tabs geöffnet.
+Im Tab mit dem Titel <code>Bilder Generierung</code> findest du die
+Bilder Webseite an der du aktiv arbeiten wirst. Im zweiten Tab mit dem
+Titel <code>Aufgaben</code> findest du die Aufgaben dazu. Im dritten Tab
+mit dem Titel <code>Svelte Chat</code> befindet sich ein Chatbot,
+welchen du verwenden kannst um Unterstützung für das Lösen der Aufgaben
+zu erhalten. Der Chatbot kennt alle Aufgaben sowie deren Lösungen.
+Verwende den Chatbot wenn du Hilfe zu einer Aufgabe benötigst oder frage
+uns direkt.</p>
+<p>Öffne nun den Tab mit dem Titel <code>Bilder Generierung</code> um
+mit den Aufgaben zu beginnen.</p>
 <h2 id="einfache-aufgaben">Einfache Aufgaben</h2>
 <h3 id="titel">1. Titel</h3>
 <h4 id="aufgabe">Aufgabe</h4>
-<p>Füge einen Titel in die Webseite ein.</p>
+<p>Füge einen Titel mit dem Text <code>Bild Generierung</code> in die
+Webseite ein.</p>
 <h4 id="hilfestellung">Hilfestellung</h4>
 <p>Ein Titel, oder heading, gibt es in 6 grössen in HTML.</p>
 <pre class="svelte"><code>&lt;h1&gt;H1&lt;/h1&gt;
