Add parsons problems to exercise description

en/references/exercise-description/index.md

@@ -403,3 +403,52 @@ Note that by default, you can't use Markdown inside an HTML tag. If you want to
     Peek a **boo**!
 </details>
 ```
+
+## Parsons puzzles
+
+To add a Parsons puzzle to your exercise or reading activity description, you can use the `<dw-parsons-puzzle>` element. A [Parsons puzzle](https://en.wikipedia.org/wiki/Parsons_problem) presents code fragments that students must drag and drop into the correct order.
+
+![Parsons puzzle](parsons.png)
+
+Wrap your code in a `<dw-parsons-puzzle>` element containing a `<pre>` element. Separate the draggable code blocks with `---`. Each block (one or more lines) can be dragged and reordered by the student.
+
+```html
+<dw-parsons-puzzle>
+<pre>
+def output():
+---
+    print("Hello World")
+---
+    print("This is my first Python program.")
+---
+    output()
+</pre>
+</dw-parsons-puzzle>
+```
+
+Lines that are not separated by `---` are grouped together in a single draggable block. This allows you to create blocks that span multiple lines:
+
+```html
+<dw-parsons-puzzle>
+<pre>
+# Hello World program
+
+# -------------------------
+# Subprograms
+# -------------------------
+---
+def output():
+---
+    print("Hello World")
+---
+    print("This is my first Python program.")
+---
+
+# -------------------------
+# Main program
+# -------------------------
+---
+output()
+</pre>
+</dw-parsons-puzzle>
+```

nl/references/exercise-description/index.md

@@ -410,3 +410,52 @@ Merk op dat je standaard geen Markdown kan gebruiken binnenin html tags. Indien
     Peek a **boo**!
 </details>
 ```
+
+## Parsons puzzles
+
+Om een Parsons puzzel toe te voegen aan je oefening- of leesactiviteitbeschrijving, kan je het `<dw-parsons-puzzle>` element gebruiken. Een [Parsons puzzel](https://en.wikipedia.org/wiki/Parsons_problem) toont codefragmenten die studenten in de juiste volgorde moeten slepen.
+
+![Parsons puzzel](parsons.png)
+
+Plaats je code in een `<dw-parsons-puzzle>` element met daarin een `<pre>` element. Scheid de versleepbare codeblokken met `---`. Elk blok (een of meerdere regels) kan door de student versleept en herschikt worden.
+
+```html
+<dw-parsons-puzzle>
+<pre>
+def output():
+---
+    print("Hello World")
+---
+    print("This is my first Python program.")
+---
+    output()
+</pre>
+</dw-parsons-puzzle>
+```
+
+Regels die niet gescheiden zijn door `---` worden gegroepeerd in één versleepbaar blok. Zo kan je blokken maken die meerdere regels beslaan:
+
+```html
+<dw-parsons-puzzle>
+<pre>
+# Hello World program
+
+# -------------------------
+# Subprograms
+# -------------------------
+---
+def output():
+---
+    print("Hello World")
+---
+    print("This is my first Python program.")
+---
+
+# -------------------------
+# Main program
+# -------------------------
+---
+output()
+</pre>
+</dw-parsons-puzzle>
+```