Voice Coding: innovazione didattica per studenti con DSA

Il voice coding sta trasformando radicalmente il modo in cui programmiamo e lavoriamo nel settore tecnologico. Non è più solo un’innovazione futuristica, ma una realtà consolidata già utilizzata nelle principali aziende globali. Questa tecnologia permette di scrivere codice usando la voce, eliminando la necessità di una tastiera e aprendo nuove opportunità a chiunque, specialmente agli studenti con DSA e altre forme di neurodiversità.

Perché il voice coding è cruciale per gli studenti con neurodiversità?

Il sistema scolastico attuale, spesso ancorato a metodi tradizionali, può frenare il potenziale di studenti neurodiversi. Questi studenti hanno spesso capacità uniche e visioni originali che potrebbero portare innovazioni straordinarie nel mondo digitale, se messi nelle giuste condizioni per esprimersi. Purtroppo, l’approccio didattico tradizionale, focalizzato su strumenti e metodi uniformi, rischia di limitare il loro talento e la loro creatività.

Ragazza usa il voice coding durante una lezione di programmazione

Va sottolineato che il voice coding è una tecnica già ampiamente utilizzata anche da persone normodotate, ma gli studenti con DSA hanno spesso un potenziale ancora più significativo nell’utilizzare questo strumento, grazie alle loro modalità cognitive e al loro particolare approccio creativo e multidimensionale.

Esempio pratico di voice coding: Creare una Calcolatrice Scientifica per DSA

Ciao, sono un DSA. Fai una calcolatrice scientifica da utilizzare in una pagina HTML. Deve avere un display per mostrare l’operazione e il risultato. Metti i pulsanti per i numeri (0-9) e le operazioni base (+, -, *, /, parentesi, punto). Aggiungi anche i pulsanti per le funzioni scientifiche: sin, cos, tan, log, ln, √, potenza (^) e fattoriale (n!). Includi costanti tipo π ed e, un tasto ‘Ans’ per il risultato precedente e un pulsante per cambiare tra gradi e radianti (default in gradi). Deve avere un design semplice e pulito.

A seguito di questi comandi vocali, il sistema genera automaticamente in pochi secondi il codice necessario sotto riportato.

Calcolatrice e Codice (versione completa)

Fai i tuoi Calcoli!

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calcolatrice Scientifica</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            margin: 0;
        }
        .calculator {
            background-color: #eaeaea;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 320px;
        }
        .display {
            background-color: #fff;
            border-radius: 5px;
            margin-bottom: 15px;
            padding: 10px;
            text-align: right;
            font-size: 18px;
            min-height: 60px;
            word-wrap: break-word;
        }
        .operation {
            min-height: 24px;
            font-size: 16px;
            color: #666;
            margin-bottom: 5px;
        }
        .result {
            min-height: 32px;
            font-size: 24px;
            font-weight: bold;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 8px;
        }
        button {
            border: none;
            border-radius: 5px;
            background-color: #fff;
            color: #333;
            font-size: 16px;
            padding: 12px 0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #e0e0e0;
        }
        button:active {
            background-color: #d0d0d0;
        }
        .function {
            background-color: #f0f0f0;
        }
        .operator {
            background-color: #ffd580;
        }
        .clear {
            background-color: #ff9e9e;
        }
        .equals {
            background-color: #9ec3ff;
        }
        .mode-toggle {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
            padding: 0 5px;
        }
        .mode-label {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="mode-toggle">
            <span class="mode-label">Modalità:</span>
            <span id="angle-mode">Gradi</span>
        </div>
        <div class="display">
            <div class="operation" id="operation"></div>
            <div class="result" id="result">0</div>
        </div>
        <div class="buttons">
            <!-- Funzioni scientifiche - Riga 1 -->
            <button class="function" onclick="addToOperation('sin(')">sin</button>
            <button class="function" onclick="addToOperation('cos(')">cos</button>
            <button class="function" onclick="addToOperation('tan(')">tan</button>
            <button class="function" onclick="addToOperation('log(')">log</button>
            <button class="function" onclick="addToOperation('ln(')">ln</button>

            <!-- Funzioni scientifiche - Riga 2 -->
            <button class="function" onclick="addToOperation('√(')">√</button>
            <button class="function" onclick="addToOperation('^')">^</button>
            <button class="function" onclick="addToOperation('!')">n!</button>
            <button class="function" onclick="addToOperation('π')">π</button>
            <button class="function" onclick="addToOperation('e')">e</button>

            <!-- Riga 3 -->
            <button class="function" onclick="addToOperation('(')">(</button>
            <button class="function" onclick="addToOperation(')')">)</button>
            <button class="function" onclick="toggleAngleMode()">DEG/RAD</button>
            <button class="function" onclick="useAnswer()">Ans</button>
            <button class="clear" onclick="clearDisplay()">C</button>

            <!-- Riga 4 -->
            <button onclick="addToOperation('7')">7</button>
            <button onclick="addToOperation('8')">8</button>
            <button onclick="addToOperation('9')">9</button>
            <button class="operator" onclick="addToOperation('/')">/</button>
            <button class="function" onclick="backspace()">⌫</button>

            <!-- Riga 5 -->
            <button onclick="addToOperation('4')">4</button>
            <button onclick="addToOperation('5')">5</button>
            <button onclick="addToOperation('6')">6</button>
            <button class="operator" onclick="addToOperation('*')">×</button>
            <button class="function" onclick="calculatePercentage()">%</button>

            <!-- Riga 6 -->
            <button onclick="addToOperation('1')">1</button>
            <button onclick="addToOperation('2')">2</button>
            <button onclick="addToOperation('3')">3</button>
            <button class="operator" onclick="addToOperation('-')">-</button>
            <button class="operator" onclick="addToOperation('+')">+</button>

            <!-- Riga 7 -->
            <button onclick="addToOperation('0')">0</button>
            <button onclick="addToOperation('.')">.</button>
            <button onclick="changeSign()">+/-</button>
            <button class="equals" onclick="calculate()" style="grid-column: span 2;">=</button>
        </div>
    </div>

    <script>
        let operation = "";
        let result = "0";
        let lastAnswer = "0";
        let inRadianMode = false;

        const operationElement = document.getElementById('operation');
        const resultElement = document.getElementById('result');
        const angleModeElement = document.getElementById('angle-mode');

        function updateDisplay() {
            operationElement.textContent = operation;
            resultElement.textContent = result;
        }

        function addToOperation(value) {
            operation += value;
            updateDisplay();
        }

        function clearDisplay() {
            operation = "";
            result = "0";
            updateDisplay();
        }

        function backspace() {
            operation = operation.slice(0, -1);
            updateDisplay();
        }

        function changeSign() {
            if (operation.length > 0) {
                if (operation.startsWith('-')) {
                    operation = operation.substring(1);
                } else {
                    operation = '-' + operation;
                }
                updateDisplay();
            }
        }

        function calculatePercentage() {
            try {
                const currentExpression = operation;
                const lastNumberRegex = /[\d.]+$/;
                const match = currentExpression.match(lastNumberRegex);
                if (match) {
                    const lastNumber = match[0];
                    const lastNumberIndex = currentExpression.lastIndexOf(lastNumber);
                    const percentValue = parseFloat(lastNumber) / 100;
                    operation = currentExpression.substring(0, lastNumberIndex) + percentValue;
                    updateDisplay();
                }
            } catch (error) {
                result = "Errore";
                updateDisplay();
            }
        }

        function useAnswer() {
            operation += lastAnswer;
            updateDisplay();
        }

        function toggleAngleMode() {
            inRadianMode = !inRadianMode;
            angleModeElement.textContent = inRadianMode ? "Radianti" : "Gradi";
        }

        function factorial(n) {
            if (n < 0) return NaN;
            if (n === 0 || n === 1) return 1;
            let result = 1;
            for (let i = 2; i <= n; i++) {
                result *= i;
            }
            return result;
        }

        function calculate() {
            try {
                let expr = operation.replace(/π/g, Math.PI).replace(/e/g, Math.E);
                expr = expr.replace(/sin\(/g, inRadianMode ? "Math.sin(" : "Math.sin((Math.PI/180)*");
                expr = expr.replace(/cos\(/g, inRadianMode ? "Math.cos(" : "Math.cos((Math.PI/180)*");
                expr = expr.replace(/tan\(/g, inRadianMode ? "Math.tan(" : "Math.tan((Math.PI/180)*");
                expr = expr.replace(/log\(/g, "Math.log10(");
                expr = expr.replace(/ln\(/g, "Math.log(");
                expr = expr.replace(/√\(/g, "Math.sqrt(");
                expr = expr.replace(/(\d+|\))\^(\d+|\()/g, 'Math.pow($1, $2)');
                while (expr.includes('!')) {
                    const factRegex = /(-?\d+)!/;
                    const match = expr.match(factRegex);
                    if (match) {
                        const num = parseInt(match[1]);
                        const factResult = factorial(num);
                        expr = expr.replace(match[0], factResult);
                    } else {
                        break;
                    }
                }
                result = eval(expr).toString();
                lastAnswer = result;
                operation = expr;
                updateDisplay();
            } catch (error) {
                result = "Errore";
                updateDisplay();
            }
        }

        updateDisplay();
    </script>
</body>
</html>

Voice coding e scuola: un cambiamento necessario

Il voice coding rappresenta quindi non solo una soluzione tecnologica, ma anche un importante segnale che l’approccio scolastico deve cambiare. Integrando questa tecnologia nelle classi, è possibile creare un ambiente di apprendimento inclusivo, dove tutti gli studenti possono esprimere al massimo il proprio potenziale. Questa integrazione può favorire non solo una maggiore inclusività, ma anche un incremento della produttività e della creatività degli studenti.

Benefici del voice coding per la neurodiversità:

Accessibilità aumentata
Potenziamento della creatività
Maggiore coinvolgimento e motivazione degli studenti
Inclusione effettiva nel settore tecnologico

Conclusioni

Il futuro dell’istruzione e dell’informatica deve passare attraverso un cambiamento radicale degli strumenti didattici. Il voice coding non è solo un’opportunità tecnologica, ma una vera e propria necessità educativa per valorizzare la neurodiversità e garantire che ogni studente abbia le stesse opportunità di emergere e contribuire all’innovazione.

Voice Coding e Neurodiversità: Come Rinnovare l’Approccio Scolastico