NO PRODUCT SETTINGS FOUND FOR:

documentation

Gentle remainder that the product name comes from the `origin` first subfolder (after `/pms` ).

💻 Code & Media Fragments Guide

This guide covers fragments for displaying code, images, and other visual content in pedagogical messages.

Code Fragments

1. Static Code Blocks (code_)

Display syntax-highlighted code without execution.

Basic Syntax

```python
def hello_world():
    print("Hello, World!")
```

Supported Languages

```javascript
const sum = (a, b) =&gt; a + b;
```

```java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello");
    }
}
```

```html
&lt;div class="container"&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
&lt;/div&gt;
```

```css
.container {
    display: flex;
    justify-content: center;
}
```

```sql
SELECT * FROM users 
WHERE age &gt; 18
ORDER BY name;
```

Features

Syntax highlighting
Line numbers (optional)
Copy button
Language detection

2. Interactive Code (codex_)

Executable code environments with validation.

External Script Reference

# _________________foreground_script_________________


# _________________corrector_________________
from io import StringIO
from pprint import pprint
import sys
import typing
import unittest
class PythonCorrector:
    def __init__(self, background_script):
        self.background_script = background_script
        self.last_error: str | None = None
        self.testcase = unittest.TestCase()
        self.check_counter = 0
        self.correction = {}
        # TODO: move this in the teacher class
        # Create a StringIO object to capture output
        self.original_stdout = sys.stdout
        # self.stdout = StringIO()
        # sys.stdout = self.stdout
        self.stdout = sys.stdout

        # if pyodide
        # todo : write surcouche pour data get

        print(sys.platform)

        #     print(codex_id)
        #     # load the data-background-script with js
        #     self.background_script = ''
        #     # js.globals.data_background_script

        #     self.background_script = document.activeElement.id

    def __del__(self):
        sys.stdout = sys.__stdout__

    @staticmethod
    def gracefully_check(check_method):
        def wrapper(self, *args, **kwargs):
            try:
                check_method(self, *args, **kwargs)
                success, msg = 1, ''
            except AssertionError as e:
                success, msg = 0, str(e)

            self.check_counter += 1
            self.correction[self.check_counter] = (success, msg)
            return success, msg

        return wrapper

    def check_coincide(self, x: typing.Any) -> None:
        namespace = {}
        exec(self.background_script, namespace)
        # TODO : SAME SETUP FOR ALL BECAUSE OF AUTOFORMAT
        x_name = f'{x=}'.split('=')[0]
        self.check_equal(x, namespace[x_name])

    @gracefully_check
    def check_equal(self, x: typing.Any, y: typing.Any) -> None:
        # First check if types match
        self.testcase.assertIsInstance(x, type(y))
        # Booleans
        if isinstance(x, bool):
            self.testcase.assertEqual(x, y)
        # Strings
        if isinstance(x, str):
            self.testcase.assertEqual(x, y)
        # Numbers
        elif isinstance(x, int):
            self.testcase.assertEqual(x, y)
        elif isinstance(x, float):
            self.testcase.assertAlmostEqual(x, y)
        # Sequences
        elif isinstance(x, list):
            self.testcase.assertListEqual(x, y)
        elif isinstance(x, tuple):
            self.testcase.assertTupleEqual(x, y)
        elif isinstance(x, set):
            self.testcase.assertSetEqual(x, y)
        # Dictionaries
        elif isinstance(x, dict):
            self.testcase.assertDictEqual(x, y)
        # Handle None
        elif x is None:
            self.testcase.assertIsNone(y)
        # Default case
        else:
            # raise NotImplementedError(f'PythonCorrector cannot compare {type(x)=}')
            self.testcase.assertEqual(x, y)

    @gracefully_check
    def check_equals_on_grid(self, f, args, values):
        for x, y in zip(args, values, strict=False):
            self.testcase.assertEqual(f(x), y)

    @gracefully_check
    def check_module_is_imported(self, module_name, teacher):
        # TODO mad: handle from_imports
        self.testcase.assertIn(module_name, teacher.story['user_input']['imports']['imports'])

    def check_stdout_equals(self, x):
        # NOTE mad: no need for the `gracefully_check` decorator as the `check_equal` method is used
        stdout = self.stdout.getvalue()
        stdout = stdout.strip().replace('\n', '')
        x = x.strip().replace('\n', '')
        self.check_equal(stdout, x)

    def check_nb_lines(self): ...

    # TODO: mad
    # check if nb lines consistent with sections
    # check if nb lines ==

    def correct(self) -> bool:
        ...
        # TODO: ideally the checks would be performed there
        # answer_nature = answer['nature'].split('_')
        # return self.correction

_pc = PythonCorrector('')

# _________________public_checks_________________


# _________________private_checks_________________

Inline Code Definition

codexPCAVersion: 1
language: python
starter_code: |
  # Calculate factorial
  def factorial(n):
      # Your code here
      pass

  print(factorial(5))
solution: |
  def factorial(n):
      if n &lt;= 1:
          return 1
      return n * factorial(n-1)

  print(factorial(5))
tests:
  - input: "5"
    expected: "120"
  - input: "0"
    expected: "1"

Advanced Features

codexPCAVersion: 1
language: python
title: "List Comprehension Exercise"
instructions: |
  Create a list of squares of even numbers from 0 to 10
starter_code: |
  # Create list of squares of even numbers
  squares = 
  print(squares)
solution: |
  squares = [x**2 for x in range(11) if x % 2 == 0]
  print(squares)
hidden_tests: |
  assert squares == [0, 4, 16, 36, 64, 100]
  assert type(squares) == list
visible_tests:
  - input: ""
    expected: "[0, 4, 16, 36, 64, 100]"
hints:
  - "Use list comprehension syntax: [expression for item in iterable if condition]"
  - "Remember range(11) gives 0 to 10"

Media Fragments

1. Images (image_)

Display static images with optional styling.

Basic Syntax

![Alt text for accessibility](/path/to/image.jpg)

With Styling

![Computer setup](/images/computer-desk-old-169.jpg)
{: .mx-auto .max-w-lg}

Features

Automatic lazy loading
Responsive sizing
Alt text for accessibility
Click to zoom (optional)

2. SVG Graphics (svg_)

Vector graphics with inline or external sources.

External SVG

![Corsica Map](/static/pm/corsica/files/corsica_grid_with_labels.svg)
{: .mx-auto}

Inline SVG Benefits

CSS styling control
Interactive elements
No additional HTTP requests
Dynamic manipulation

Sized SVG

![Grid diagram](/static/pm/corsica/files/corsica_grid.svg)
{: .max-w-[340px] .mx-auto}

Tables & Data Visualization

1. Data Tables (table_)

Display structured data in tables.

Basic Table

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Value A  | Value B  | Value C  |

Aligned Columns

| Left | Center | Right |
|:-----|:------:|------:|
| L1   | C1     | R1    |
| L2   | C2     | R2    |

Complex Table with Math

| Function | Derivative | Integral |
|----------|------------|----------|
| $x^n$ | $nx^{n-1}$ | $\frac{x^{n+1}}{n+1}$ |
| $e^x$ | $e^x$ | $e^x$ |
| $\sin(x)$ | $\cos(x)$ | $-\cos(x)$ |
| $\cos(x)$ | $-\sin(x)$ | $\sin(x)$ |

2. Table of Variations (tabvar_)

Specialized tables for function analysis.

class: table-variations
function: "f(x) = x³ - 3x"
x_values: ["-∞", -1, 0, 1, "+∞"]
f_prime: ["+", 0, "-", 0, "+"]
f_variations: ["↗", "max", "↘", "min", "↗"]
f_values: ["-∞", 2, 0, -2, "+∞"]

Mathematical Visualizations

1. Function Graphs (graph_)

Interactive mathematical function plots.

2. Geometric Diagrams

Using SVG for precise geometric constructions:

&lt;svg width="400" height="400" class="mx-auto"&gt;
  &lt;!-- Triangle --&gt;
  &lt;polygon points="200,50 350,350 50,350" 
           fill="none" 
           stroke="blue" 
           stroke-width="2"/&gt;

  &lt;!-- Labels --&gt;
  &lt;text x="200" y="40" text-anchor="middle"&gt;A&lt;/text&gt;
  &lt;text x="360" y="355" text-anchor="middle"&gt;B&lt;/text&gt;
  &lt;text x="40" y="355" text-anchor="middle"&gt;C&lt;/text&gt;

  &lt;!-- Angle marking --&gt;
  &lt;path d="M 80,350 Q 50,350 65,320" 
        fill="none" 
        stroke="red" 
        stroke-width="1"/&gt;
&lt;/svg&gt;

Best Practices

For Code Blocks

Choose appropriate language for syntax highlighting
Include comments to explain complex parts
Keep examples concise and focused
Show both input and output when relevant
Use consistent formatting and style

For Images

Provide meaningful alt text for accessibility
Optimize file sizes for web delivery
Use appropriate formats (JPEG for photos, PNG for diagrams, SVG for vectors)
Consider responsive sizing with CSS classes
Place images near related text

For Tables

Keep headers clear and concise
Align numerical data appropriately
Use consistent formatting within columns
Don't overcrowd - split large tables
Consider mobile viewing - use responsive tables

For Mathematical Visualizations

Label axes clearly with units
Use contrasting colors for multiple plots
Include grid lines for reading values
Add interactive features thoughtfully
Provide context with titles and descriptions

Combining Code and Media

Create rich educational content by combining different fragment types:

## Physics Simulation

Here's how we model projectile motion:

```python
import numpy as np
import matplotlib.pyplot as plt

# Initial conditions
v0 = 20  # m/s
angle = 45  # degrees
g = 9.81  # m/s²

# Calculate trajectory
t = np.linspace(0, 3, 100)
x = v0 * np.cos(np.radians(angle)) * t
y = v0 * np.sin(np.radians(angle)) * t - 0.5 * g * t**2

plt.plot(x, y)
plt.xlabel('Distance (m)')
plt.ylabel('Height (m)')
plt.title('Projectile Trajectory')
plt.grid(True)
plt.show()

Visualization

Results Table

Time (s)	Distance (m)	Height (m)
0.0	0.0	0.0
0.5	7.1	8.3
1.0	14.1	11.8
1.5	21.2	10.4
2.0	28.3	4.1
```

Performance Optimization

Images

Use lazy loading for below-fold images
Provide multiple resolutions with srcset
Compress images appropriately
Use CDN for faster delivery

Code

Syntax highlighting on demand
Virtual scrolling for long code
Code splitting for large examples
Cache parsed results

SVG

Optimize SVG files (remove metadata)
Use CSS for styling when possible
Implement viewport culling for complex graphics
Consider canvas for many elements

Accessibility Features

Alt text for all images
ARIA labels for interactive elements
Keyboard navigation for code blocks
High contrast mode support
Screen reader compatibility

Code and media fragments bring content to life through visualization and interactivity. Use them strategically to enhance understanding and engagement.