cours1 min de lecture

Démo · 14 widgets de manipulation NSI

Tous les widgets MDC livrés au sprint mai 2026 (§5.5 de WIDGETS.md). Une seule page pour les voir vivre.

programme

Cette page expose dans l'ordre les 14 widgets MDC de manipulation NSI livrés au sprint. Sert de banc d'essai visuel pour vérifier que chaque widget répond correctement à ses props/slots, et de référence concrète pour les rédacteurs de chapitre.

Chaque section porte le nom du widget en titre. Toutes les fiches détaillées sont en apps/cours/WIDGETS.md §5.5.

`::bit-toggle`

Octet cliquable multi-base (décimal non signé, complément à 2, hex, octal). Cible : pb-types-valeurs (PB01, PB03).

bit-toggle · 8 bits

1286432168421

Non signé: 181
Signé (CA2): -75
Hexadécimal: 0xB5
Octal: 0o265

Version 4 bits :

bit-toggle · 4 bits

8421

Non signé: 13
Signé (CA2): -3
Hexadécimal: 0xD
Octal: 0o15

`::float-decomposer`

Décomposition IEEE 754. Signe, exposant biaisé, mantisse, écart à la valeur saisie. Bits cliquables. Cible : pb-types-valeurs/3.flottants.md (PB02).

float-decomposer · IEEE 754 64 bits

sexposant (11 bits)mantisse (52 bits)

Signe: 0 (+)
Exposant biaisé: 1019 (biais −1023 → -4)
Mantisse: 1001100110011001100110011001100110011001100110011010
Valeur réellement stockée: 0.10000000000000001

`::utf8-bytes`

Table caractère → octets en ASCII / Latin-1 / UTF-8. ? quand le caractère sort de la table. Cible : pb-types-valeurs/4.textes-encodages.md (PB04).

utf8-bytes

caractère	code-point	ASCII	Latin-1	UTF-8
c	U+0063	63	63	63
a	U+0061	61	61	61
f	U+0066	66	66	66
é	U+00E9	?	E9	C3 A9
␠	U+0020	20	20	20
🍫	U+1F36B	?	?	F0 9F 8D AB
Total octets	6 car.	4	5	10

`::bool-table`

Formule éditable + table de vérité 2-4 variables. Cible : pb-types-valeurs/5.booleens.md (PB05).

bool-table

a	b	c	résultat
0	0	0	0
0	0	1	0
0	1	0	0
0	1	1	0
1	0	0	1
1	0	1	0
1	1	0	1
1	1	1	1

`::url-decoder`

URL en segments colorisés + paramètres décodés. Cible : sb-web et pe-ihm-web (SB09, PE01).

url-decoder

httpsnsi.rocks:8080/cours/snt?q=URL&lang=fr#parse

scheme

https

host

nsi.rocks

port

:8080

path

/cours/snt

query

?q=URL&lang=fr

fragment

#parse

Paramètres décodés

clé	brut	décodé
q	URL	URL
lang	fr	fr

`::xor-bit`

XOR symétrique bit-à-bit avec vérification M = C ⊕ k. Note : la prop s'appelle k (pas key, mot réservé Vue). Cible : tc-archi-os-reseaux/6.chiffrement-symetrique.md (TC04).

xor-bit · 8 bits

C = M ⊕ k · clique sur les bits de M ou k pour modifier.

`::trace-table`

Déroulé pas-à-pas d'un programme Python (interpréteur déterministe maison, sous-ensemble int/bool/affect/if/while/for-range/print/arithm/booléens/comp). Cible : sh-prog-notions/*, pg-langages-prog/* (SH01-05, PG01).

trace-table

Doubler jusqu'à dépasser 100

programme


1n = 12while n < 100:3    n = n * 24print(n)

variables · étape 1 / 19départ

n
—

État initial

Avec une boucle for :

trace-table

Somme 1..n

programme


1total = 02for i in range(1, 6):3    total = total + i4print(total)

variables · étape 1 / 14départ

i	total
—	—

État initial

`::graph-metrics`

Petit graphe non orienté + rayon / diamètre / centre + distance depuis un sommet sélectionné. Cible : sc-reseaux-sociaux/4.petit-monde-graphes.md (SC05).

graph-metrics

sommets

arêtes

Rayon: 2
Diamètre: 3
Centre: { C, D }

Clique un sommet pour voir son excentricité ; les sommets en vert font partie du centre.

`::metadata-reveal`

Métadonnées avec révélation à la demande (mode photo) ou présentation compacte (mode json). Lien OpenStreetMap externe si coordonnée GPS détectée. Cible : sg-photo-numerique/3.metadonnees-exif.md (SG01) et sd-donnees-structurees/3.metadonnees.md (SD04).

Mode photo (EXIF révélée) :

photo

metadata-reveal · photo

Les métadonnées sont là, mais cachées par défaut. Clique « Révéler EXIF » pour voir ce que ta photo dit d'elle-même.

Mode JSON :

metadata-reveal · json

Réponse de /api/me

id: 42
name: Alice
created_at: 2026-05-20T14:00:00Z
role: élève
preferences: { "theme": "dark", "lang": "fr" }

`::scatter-knn`

Nuage 2D + clic = point test, k voisins surlignés, vote majoritaire. Cible : ph-algorithmique/6.knn.md (PH01).

scatter-knn · k = 3

Clique dans le repère pour placer un point à classifier. Les 3 voisins les plus proches sont surlignés.

pomme

mandarine

`::slider-illustratif`

Curseur de n + barres en échelle log pour log₂/√/n/n·log/n²/n³. Cible : ph-algorithmique/* (PH02).

slider-illustratif · complexité

n100

Échelle logarithmique — chaque barre proportionnelle à log₁₀(valeur+1) pour rendre les ordres de grandeur lisibles côte à côte.

log₂(n)

6.64

√n

100

n · log₂(n)

664

n²

10 000

n³

1 000 000

`::timeline-interactive`

Frise chronologique cliquable. Cible : pa-histoire-info/* (PA01).

timeline-interactive1940 → 2025 · 8 événement(s)

1940

1950

1960

1970

1980

1990

2000

2010

2020

Clique sur un point pour voir le détail.

`::sensor-actuator-sim`

Boucle perception → décision → action. Cible : sf-info-embarquee/* (SF01-03).

sensor-actuator-sim

capteur · température25°C

10°C40°C

règle

si température°C

→ actionneur OFF

actionneur · ventilateur

OFF

Boucle perception → décision → action : bouge le capteur, change le seuil, observe l'actionneur.

`::anim-step-by-step`

Moteur d'animation pluggable. 4 algos en V1. Cible : te-algorithmique/*, ph-algorithmique/*, etc. (TE01, PH02-04).

Mode DFS sur graphe :

anim-step-by-step · DFS · parcours en profondeur

DFS depuis A

visualisation

étape 1 / 10

Départ depuis « A ». Pile : [A].

pile (LIFO)

visités0

Mode BFS sur le même graphe :

anim-step-by-step · BFS · parcours en largeur

BFS depuis A

visualisation

étape 1 / 10

Départ depuis « A ». File : [A].

file (FIFO)

visités1

Mode tri par sélection :

anim-step-by-step · tri par sélection

Tri sélection

visualisation

étape 1 / 35

Tableau initial : [5, 2, 8, 1, 9, 3].

comparaisons0

échanges0

Mode dichotomie :

anim-step-by-step · recherche dichotomique

Recherche dichotomique de 11

visualisation

étape 1 / 7

Recherche de 11 dans un tableau trié de 9 éléments. Plage : [0, 8].

comparaisons0

Pour les widgets disponibles depuis plus longtemps (::self-eval-qcm, ::python-snippet, ::illustration, ::bo-ref), voir la page voisine Démo interactive et la fiche de référence apps/cours/WIDGETS.md §2-5.