chore: update example

Author: mikebarkmin

packages/scratch-gui/src/components/cards/cards.jsx

@@ -192,14 +192,22 @@ const renderSimpleMarkdown = text => {
     });
 };
 
-const TextStep = ({title, text, image}) => (<Fragment>
+const TextStep = ({title, text, image, video}) => (<Fragment>
     <div className={styles.stepTitle}>
         {title}
     </div>
     <div className={styles.stepText}>
         {renderSimpleMarkdown(text)}
     </div>
-    {image ? (
+    {video ? (
+        <div className={styles.stepVideo}>
+            <video
+                controls
+                style={{width: '466px', maxHeight: '257px'}}
+                src={video}
+            />
+        </div>
+    ) : image ? (
         <div className={styles.stepImageContainer}>
             <img
                 className={styles.stepImage}
@@ -214,7 +222,8 @@ const TextStep = ({title, text, image}) => (<Fragment>
 TextStep.propTypes = {
     image: PropTypes.string,
     text: PropTypes.string.isRequired,
-    title: PropTypes.node.isRequired
+    title: PropTypes.node.isRequired,
+    video: PropTypes.string
 };
 
 const VideoUrlStep = ({title, video}) => (<Fragment>
@@ -495,6 +504,7 @@ const Cards = props => {
                                             image={steps[step].image}
                                             text={steps[step].text}
                                             title={steps[step].title}
+                                            video={steps[step].video}
                                         />
                                     ) :
                                         steps[step].video ? (

packages/scratch-gui/static/kenny-fish/fish.sb3

@@ -1,6 +1,26 @@
 {
-  "title": "Kenny Fish",
+  "title": "Skript kopieren",
   "sb3": "fish.sb3",
+  "steps": [
+    {
+      "title": "Grüne Flagge drücken",
+      "text": "Drücke die grüne Flagge, um das Projekt zu starten. Fällt dir etwas auf? Der braune und der blaue Fisch schwimmen hin und her, aber der grüne Fisch bewegt sich nicht!",
+      "video": "steps/green_flag.mp4"
+    },
+    {
+      "title": "Skript kopieren",
+      "text": "Klicke auf den braunen Fisch (Fish Brown), um seine Figur auszuwählen. Du siehst sein Skript im Skriptbereich. Ziehe das gesamte Skript mit der rechten Maustaste und wähle \"Kopieren nach Fish Green\", um es zum grünen Fisch zu kopieren.",
+      "video": "steps/copy.mp4"
+    },
+    {
+      "title": "Skript anpassen",
+      "text": "Klicke nun auf den grünen Fisch (Fish Green), um seine Figur auszuwählen. Du siehst jetzt das kopierte Skript. Ändere die Zahl im Block \"gehe () er Schritt\", zum Beispiel auf 2, damit der grüne Fisch sich schneller bewegt als die anderen."
+    },
+    {
+      "title": "Ergebnis testen",
+      "text": "Drücke die grüne Flagge erneut. Jetzt sollten alle drei Fische schwimmen – der grüne Fisch bewegt sich mit einer anderen Geschwindigkeit!"
+    }
+  ],
   "backdrops": {
     "showBuiltin": false,
     "library": [