📜 WIP Debugger explained

content/adventures/en.yaml

@@ -734,13 +734,27 @@ adventures:
         description: debugging adventure
         levels:
             1:
-                story_text: |-
-                    Welcome to a debugging adventure. Debugging a code means getting rid of mistakes in the code.
-                    That means that in these debugging adventures, we will show you code that does not work yet.
-                    You will have to figure out what's wrong and correct the mistakes.
-
+                story_text: |
                     ### Exercise
                     Debug this code. Good luck!
+
+
+                    **How to debug a code**
+
+                    Watch this <a href="https://www.youtube.com/watch?v=jwitgommeRY;t=2s" target="_blank">video</a> to see how the debugger works, or read the instructions.
+
+                    Of course you could just look at the code and find the mistakes yourself, but we also have some tools to help you.
+                    Click on the ladybug 🐞 button beneath your input field. This starts the **debugger**. With the debugger you can run a program line-by-line.
+                    If there is a big mistake in your code (like in the debugging adventures) the debugger will tell you to fix the big mistakes first. Read the error messages to find out how to fix the mistakes.
+                    If the major mistakes are gone, the debugger will run your program line by line.
+                    To run the next line, click on the ⏭️button on the right. Is the line doing what it's supposed to do? Great! Click the button again to run the next line until your program is working perfectly.
+                    To stop the debugger, click on the 🛑 button in the middle.
+                    To start running your code from the top, click the 🔁 button on the left.
+
+
+                    Did you get stuck on a line of code and do you want to try your program without that line?
+                    You can disable a line of code by clicking in front of the line number. A sleeping emoji 😴 will appear and the line will be crossed out.
+                    The line will now be skipped when running the code. To reactivate the line, simply click the sleeping emoji and the line won't be skipped anymore.
                 example_code: |
                     **Warning! This code needs to be debugged!**
                     ```