3. Ordering Directive Documentation
The ordering directive creates an interactive code-reordering exercise. Users can drag and drop code lines into their correct sequence and adjust indentation levels.
3.1. Syntax
.. ordering::
code lines to be arranged in the correct order
3.2. Options for the ordering directive
Option |
Type |
Description |
|---|---|---|
|
string |
Set the visual theme. Options are |
|
flag |
If present, hides the “Show Solution” button from the user. |
|
flag |
If present, keeps answer order without indenting. |
|
flag |
If present, removes vertical padding from the lines to drag. |
Indentation: The directive automatically calculates the indentation level based on groups of 4 spaces. Ensure your input text uses consistent 4-space indentation for nested code blocks.
Shuffling: Items are automatically shuffled on page render and on Reset button click to eliminate pattern memorization giveaways.
Visual Badges: When validated, inline symbols provide quick feedback right alongside choices.
Empty Lines: You may include empty lines within the block; the directive will render them as placeholders that users can drag to maintain formatting structure.
Structure: The directive creates an interactive <div> block with handle controls (☰) for reordering and buttons («, ») for adjusting indentation.
3.3. Example 1: light theme
The default theme is light. The following example demonstrates the ordering directive with the light theme. :theme: light is optional since it is the default.
.. ordering::
:theme: light
def hello_world():
print("Hello World")
Drag and drop lines into the correct order and click to adjust indentation:
☰
print("Hello World")
☰
def hello_world():
3.4. Example 2: dark theme
.. ordering::
:theme: dark
def hello_world():
print("Hello World")
Drag and drop lines into the correct order and click to adjust indentation:
☰
print("Hello World")
☰
def hello_world():
3.6. Example 4: no padding
The following example demonstrates the ordering directive with padding removed from the lines to drag.
:no-padding: is used to remove vertical padding.
.. ordering::
:no-padding:
def add(num1, num2):
return num1 + num2
print(add(5, 3))
Drag and drop lines into the correct order and click to adjust indentation:
☰
☰
print(add(5, 3))
☰
def add(num1, num2):
☰
return num1 + num2
3.7. Example 5: no reorder
The following example demonstrates the ordering directive with multiple indentation levels. The directive automatically calculates the indentation level based on groups of 4 spaces.
:no-reorder: is used to keep answer order wihtout indenting.
.. ordering::
:no-reorder:
def find_max(numbers):
max_val = numbers[0]
for num in numbers:
if num > max_val:
max_val = num
return max_val
Reorder the following code snippets to create a function that finds the maximum value in a list of numbers.
Click to adjust indentation into the correct structural hierarchy:
☰
def find_max(numbers):
☰
max_val = numbers[0]
☰
for num in numbers:
☰
if num > max_val:
☰
max_val = num
☰
return max_val
3.8. Example 6: blanks lines
The following example demonstrates the ordering directive with blank lines included. The directive will render them as placeholders that users can drag to maintain formatting structure.
.. ordering::
def rect_perimeter(width, height):
return 2 * (width + height)
def rect_area(width, height):
area = width * height
return area
print(f'Perimeter: {rect_perimeter(5, 3)}')
print(f'Area: {rect_area(5, 3)}')
Write functions that returns the total perimeter and area of a rectangle in that order.
Print the perimeter and area of a rectangle with width 5 and height 3.
Drag and drop lines into the correct order and click to adjust indentation:
☰
return 2 * (width + height)
☰
def rect_perimeter(width, height):
☰
print(f'Perimeter: {rect_perimeter(5, 3)}')
☰
def rect_area(width, height):
☰
print(f'Area: {rect_area(5, 3)}')
☰
☰
return area
☰
☰
area = width * height