Questa raccolta contiene tre widget HTML interattive per l'insegnamento della geometria analitica di base a livello di scuola secondaria di primo e secondo grado. Ogni file è autonomo (nessuna dipendenza esterna) e funziona aprendo direttamente nel browser, con pieno supporto della modalità scura di sistema.
Introduce il piano cartesiano con assi x e y, griglia intera da −5 a +5, e un sistema visivo per "accendere" le coordinate di un punto tramite barre luminose colorate.
- Clic su un numero nella lista Ascissa x → si accende una barra verticale blu
- Clic su un numero nella lista Ordinata y → si accende una barra orizzontale rosa
- Nel punto di intersezione appare un alone viola (somma percettiva dei due colori) con un punto evidenziato
- Clic direttamente sull'asse orizzontale → seleziona l'ascissa; clic sull'asse verticale → seleziona l'ordinata
- Clic su qualsiasi punto della griglia → imposta entrambe le coordinate in un colpo
- Ogni punto salvato riceve automaticamente un nome (A, B, C…) e viene visualizzato con la coppia di coordinate
- Pulsanti: Aggiungi punto, Elimina ultimo, Cancella tutto
- Lista cliccabile dei punti salvati per rievidenziarli sul piano
- Definizione di piano cartesiano, assi, origine
- Ascissa e ordinata come "indirizzo" di un punto
- Convenzione di scrittura della coppia ordinata (x, y)
- Visualizzazione dell'intersezione come posizione univoca
Mostra la distanza tra due punti A e B che condividono la stessa ascissa (allineati verticalmente) o la stessa ordinata (allineati orizzontalmente), con una rappresentazione visiva della sottrazione tramite segmenti colorati.
- Generazione casuale di coppie di punti allineati (orizzontali o verticali, 50/50)
- Il primo esempio è sempre stesso quadrante, poi alternanza casuale tra stesso quadrante e quadranti diversi
- Badge colorato che indica orientamento e tipo di quadrante
- Tre segmenti a confronto: blu (coordinata di A), rosa (coordinata di B), verde (differenza = distanza)
- Formula istanziata in tempo reale:
d = |x_B − x_A|od = |y_B − y_A| - Pannello dedicato al ruolo del modulo: spiega con esempi perché invertire l'ordine non cambia il risultato, e quando il modulo è strettamente necessario (segni opposti)
- Segmento giallo che unisce visivamente i due punti sul piano
- Distanza come differenza di coordinate tra punti allineati
- Valore assoluto / modulo: definizione e necessità
- Differenza tra "stessa coordinata → stesso lato dell'asse" e "segni opposti → lati diversi"
- Simmetria della distanza: d(A,B) = d(B,A)
Mostra la distanza tra due punti qualunque A e B tramite il teorema di Pitagora, costruendo visivamente il triangolo rettangolo e i tre quadrati sui suoi lati.
- Drag interattivo: i punti A e B si trascinano liberamente sul piano (mouse e touch); tutti i valori si aggiornano in tempo reale
- I punti si agganciano automaticamente alla griglia (coordinate intere)
- Tre quadrati colorati all'esterno del triangolo: arancio su Δx, viola su Δy, verde sull'ipotenusa
- Dentro ogni quadrato è scritto il valore dell'area (Δx², Δy², Δx²+Δy²)
- Etichette con pill di sfondo per garantire leggibilità su qualsiasi sfondo
- Angolo retto marcato con il simbolo grafico
- Formula della distanza con tutti i passi: formula generale → sostituzione → risultato numerico
- Pannello Pitagora: spiegazione dell'uguaglianza tra le aree e perché il quadrato elimina il segno (nessun modulo necessario)
- Pulsante Nuova coppia per generare automaticamente una nuova configurazione
- Teorema di Pitagora in forma visiva e algebrica
- Costruzione del triangolo rettangolo tra due punti generici
- Definizione di Δx e Δy come cateti
- Formula della distanza: d = √(Δx² + Δy²)
- Perché il quadrato rende il segno irrilevante (confronto con il caso allineato)
- Continuità didattica con la widget precedente (stesso problema, caso generale)
| Proprietà | Valore |
|---|---|
| Dipendenze esterne | Nessuna |
| Formato | HTML5 + Canvas 2D + CSS + JavaScript vanilla |
| Compatibilità | Chrome, Firefox, Safari, Edge (moderni) |
| Modalità scura | Automatica (segue le preferenze di sistema) |
| Touch | Supportato (widget Pitagora: drag touch nativo) |
| Accessibilità | <h2 class="sr-only"> per screen reader |
- Piano cartesiano — Prima lezione: cos'è un punto, come si legge una coppia (x, y), come si trova un punto sull'asse
- Distanza allineati — Seconda lezione: distanza come sottrazione, il modulo come garanzia di positività, casi stesso/diverso quadrante
- Distanza Pitagora — Terza lezione: caso generale, triangolo rettangolo, formula completa
Le widget sono progettate per essere usate in classe con LIM o proiettore, oppure date agli studenti da esplorare autonomamente.