NO PRODUCT SETTINGS FOUND FOR:

legacy-half

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

📚 Complete Fragment Types Showcase

This document demonstrates all available fragment types in the Pedagogical Message (PM) system. Each fragment type is shown with its markdown syntax and rendered output.

📝 Text Fragments

Headings (h1_, h2_, h3_, h4_)

This is an H1 Heading

This is an H2 Heading

This is an H3 Heading

This is an H4 Heading

Paragraphs (p_)

This is a regular paragraph. It can contain bold text, italic text, and even inline code. Paragraphs are the most basic fragment type and are created automatically from regular text.

Here's another paragraph with a link to example.com and some mathematical notation like $x^2 + y^2 = z^2$.

Blockquotes (q_)

This is a blockquote fragment. It's perfect for highlighting important information or quotes.

Lead Paragraphs

This paragraph has a special lead class that makes it stand out as an introduction or summary.

Styled Paragraphs

This paragraph has a secondary background color.

This paragraph has a white background and no margin.

📋 List Fragments

Unordered Lists (ul_)

First item
Second item
Nested item 2.1
Nested item 2.2
Third item

Ordered Lists (ol_)

First step
Second step
Sub-step 2.1
Sub-step 2.2
Third step

Line-by-line (lbl_) — progressive reveal

A special list that reveals items one-by-one with buttons. You can pre-reveal the first N items using an attribute.

Example A (default: start hidden):

Première ligne
Deuxième ligne
Troisième ligne

Example B (reveal first 1):

Ligne A
Ligne B
Ligne C

Example C (reveal first 2 using reveal-first):

Étape 1
Étape 2
Étape 3

🎯 Interactive Fragments

Radio Buttons (radio_)

Which programming language are we learning?

Multiple Correct Answers

Which of these are prime numbers?

Math Input (maths_)

Interactive Graph (graph_)

📊 Data & Visual Fragments

Tables (table_)

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3
Value A	Value B	Value C
Item X	Item Y	Item Z

Complex Table

Student	Math	Physics	Chemistry	Average
Alice	95	88	92	91.7
Bob	87	91	85	87.7
Charlie	92	95	90	92.3

🖼️ Media Fragments

Images (image_)

Computer desk with old monitor

SVG Graphics (svg_)

Corsica Grid Map

Inline SVG with Custom Classes

Corsica No Grid

💻 Code Fragments

Code Blocks (code_)

python

# Python code example
def calculate_area(width, height):
    """Calculate the area of a rectangle."""
    return width * height

# Using the function
area = calculate_area(10, 5)
print(f"The area is: {area}")

javascript

// JavaScript example
const greet = (name) =&gt; {
    return `Hello, ${name}!`;
};

console.log(greet("World"));

Interactive Code (codex_)

Legacy syntax:

yaml

codexPCAVersion: 1
script_path: "pyly/premiers-pas-affichages-strings.py"

New syntax (preferred):

# _________________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_________________

📈 Mathematical Fragments

Table of Variations (tabvar_)

text

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

🎨 Special Fragments

Horizontal Rule / Divider (hr_)

Content before the divider.

Content after the divider.

Layout directive (columns)

This paragraph will appear next to the SVG on small screens and up.

Corsica Grid Map

Table of Contents (toc_)

The [TOC] marker at the beginning of this document generates an automatic table of contents based on all headings.

🔧 Fragment Attributes

Custom CSS Classes

You can add custom CSS classes to most fragments using the attribute syntax:

This paragraph has multiple custom classes applied.

Nested Content

This blockquote contains bold text, italic text, and even math: $e^{i\pi} + 1 = 0$

📋 Combining Fragments

Fragments can work together to create rich educational content:

Example Problem

Calculate the area of a rectangle with width 8 and height 5.

python

width = 8
height = 5
area = width * height
print(f"Area = {area}")

What is the result?

Solution: The area of a rectangle is width × height = 8 × 5 = 40

📝 Notes

All fragments are automatically validated when the PM is built
Fragment types are defined in the FType enum
Each fragment can have associated data and CSS classes
Interactive fragments track user responses and can provide feedback
The system supports both HTML and markdown input formats

This showcase demonstrates the flexibility and power of the PM fragment system for creating rich, interactive educational content.