<!DOCTYPE html>

<head>

<title>UniPD. AI Tutor Ver. Sett 2025 1.3</title>

<style>

body {

font-family: 'Inter', sans-serif;

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.glassmorphism {

background: rgba(255, 255, 255, 0.85);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

}

.step { transition: all 0.4s ease-in-out; }

.step-indicator {

transition: all 0.4s ease-in-out;

border-width: 3px;

font-weight: 600;

}

.step.active .step-indicator {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

border-color: #4f46e5;

color: white;

transform: scale(1.2);

}

.step.completed .step-indicator {

background-color: #10b981;

border-color: #10b981;

color: white;

}

.step-line {

transition: all 0.4s ease-in-out;

height: 3px;

background: #e5e7eb;

}

.step.completed + .step-line {

background: linear-gradient(90deg, #10b981 0%, #4f46e5 100%);

}

.form-input {

width: 100%;

padding: 0.75rem 1rem;

border: 2px solid #e5e7eb;

border-radius: 0.75rem;

box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

transition: all 0.2s ease-in-out;

}

.form-input::placeholder { color: #9ca3af; }

.form-input:focus {

outline: none;

border-color: #6366f1;

box-shadow: 0 0 0 4px rgb(99 102 241 / 0.2);

}

.form-label {

display: flex;

align-items: center;

font-size: 0.875rem;

line-height: 1.25rem;

font-weight: 600;

color: #374151;

margin-bottom: 0.5rem;

}

.form-label svg {

margin-right: 0.5rem;

height: 1.25rem;

width: 1.25rem;

color: #6366f1;

}

.form-description {

font-size: 0.75rem;

line-height: 1rem;

color: #6b7280;

margin-top: 0.25rem;

padding-left: 1.75rem;

font-style: italic;

}

.main-button {

background-size: 200% auto;

background-image: linear-gradient(to right, #4f46e5, #a855f7, #4f46e5);

color: white;

font-weight: 700;

padding: 0.75rem 2rem;

border-radius: 0.75rem;

transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;

transform-origin: center;

font-size: 1.125rem;

line-height: 1.75rem;

box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

}

.main-button:hover {

background-position: right center;

transform: scale(1.05);

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

}

.archetype-card, .discipline-card {

padding: 1.5rem;

border: 2px solid #e5e7eb;

border-radius: 0.75rem;

cursor: pointer;

transition: all 0.2s ease-in-out;

display: flex;

flex-direction: column;

text-align: center;

}

.archetype-card:hover, .discipline-card:hover {

border-color: #6366f1;

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

transform: translateY(-5px);

}

.archetype-card.selected, .discipline-card.selected {

border-color: #6366f1;

background-color: #eef2ff;

}

.archetype-tag {

display: inline-block;

padding: 0.25rem 0.75rem;

background-color: #e0e7ff;

color: #4338ca;

font-size: 0.75rem;

font-weight: 500;

border-radius: 9999px;

margin: 0.25rem;

}

.slider-wrapper { position: relative; padding-top: 0.25rem; }

.slider-labels {

display: flex;

justify-content: space-between;

font-size: 0.75rem;

color: #4b5563;

font-weight: 500;

}

input[type=range] {

-webkit-appearance: none;

width: 100%;

background: transparent;

}

input[type=range]:focus { outline: none; }

input[type=range]::-webkit-slider-runnable-track {

width: 100%;

height: 8px;

cursor: pointer;

background: linear-gradient(to right, #818cf8, #c084fc);

border-radius: 5px;

}

input[type=range]::-webkit-slider-thumb {

-webkit-appearance: none;

height: 24px;

width: 24px;

border-radius: 50%;

background: white;

cursor: pointer;

margin-top: -8px;

border: 4px solid #4f46e5;

box-shadow: 0 0 10px rgba(79, 70, 229, 0.5);

transition: transform 0.2s;

}

input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.1); }

.slider-value {

text-align: center;

font-weight: 700;

color: #4f46e5;

font-size: 1.125rem;

margin-top: 0.5rem;

}

.info-panel {

padding: 1rem;

margin-bottom: 1rem;

background-color: #eef2ff;

border-left: 4px solid #6366f1;

border-radius: 0.5rem;

font-size: 0.875rem;

line-height: 1.5;

color: #374151;

}

.warning-panel {

padding: 1rem;

margin-top: 1.5rem;

background-color: #fffbeb;

border-left: 4px solid #f59e0b;

border-radius: 0.5rem;

font-size: 0.875rem;

line-height: 1.5;

color: #b45309;

}

.style-explanation { display: none; }

.style-explanation.active { display: block; }

.riflessione-guidata {

background-color: #e0e7ff;

padding: 0.75rem;

border-radius: 0.5rem;

border: 1px solid #c7d2fe;

margin-bottom: 1rem;

}

.shake {

animation: shake 0.5s;

}

@keyframes shake {

0%, 100% { transform: translateX(0); }

25% { transform: translateX(-5px); }

75% { transform: translateX(5px); }

}

.dna-bar-bg {

background-color: #e5e7eb;

border-radius: 9999px;

overflow: hidden;

}

.dna-bar {

transition: width 0.5s ease-in-out;

}

/* NUOVE ANIMAZIONI */

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

.fade-in-up {

animation: fadeInUp 0.8s ease-out forwards;

opacity: 0;

}

.animation-delay-200 { animation-delay: 0.2s; }

.animation-delay-400 { animation-delay: 0.4s; }

.animation-delay-600 { animation-delay: 0.6s; }

</style>

</head>

Versione 16.0 (28/08/2025)

</span>

</div>

UniPD. AI Tutor

</h1>

Trasforma la tua didattica con un partner AI creato da te, per i tuoi studenti.

</p>

Inizia a creare il tuo Tutor personalizzato

</span>

</button>

Credits

</button>

<span class="font-bold text-indigo-600">--</span> Tutor creati finora

</div>

Scegli come vuoi creare il tuo partner cognitivo AI come supporto alla didattica.

</p>

</div>

<h3 class="text-2xl font-bold text-slate-800 mb-2">Creazione Rapida</h3>

<p class="text-slate-600">(2 minuti)</p>

<p class="text-sm text-slate-500 mt-4">Mi fido dei modelli. Voglio un tutor efficace subito, basato sulle migliori pratiche didattiche.</p>

</div>

</div>

<h3 class="text-2xl font-bold text-slate-800 mb-2">Creazione Guidata</h3>

<p class="text-slate-600">(10 minuti)</p>

<p class="text-sm text-slate-500 mt-4">Voglio personalizzare ogni aspetto del mio tutor per creare un'esperienza su misura.</p>

</div>

Configurazione del Tutor

</h1>

<p class="mt-3 text-lg text-slate-600">Definisci la personalità e le strategie del tuo partner di apprendimento AI.</p>

</header>

<div id="step-item-1" class="step active flex flex-col items-center text-center relative"><div class="step-indicator w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center bg-white border-slate-300 font-bold text-base md:text-lg shadow-lg">1</div><p class="mt-2 text-xs md:text-sm font-semibold">Archetipo</p></div>

<div id="step-item-3" class="step flex flex-col items-center text-center relative"><div class="step-indicator w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center bg-white border-slate-300 font-bold text-base md:text-lg shadow-lg">3</div><p class="mt-2 text-xs md:text-sm font-semibold">Contesto</p></div>

<div id="step-item-4" class="step flex flex-col items-center text-center relative"><div class="step-indicator w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center bg-white border-slate-300 font-bold text-base md:text-lg shadow-lg">4</div><p class="mt-2 text-xs md:text-sm font-semibold">Istruzione</p></div>

<div id="step-item-5" class="step flex flex-col items-center text-center relative"><div class="step-indicator w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center bg-white border-slate-300 font-bold text-base md:text-lg shadow-lg">5</div><p class="mt-2 text-xs md:text-sm font-semibold">Struttura</p></div>

<div id="step-item-6" class="step flex flex-col items-center text-center relative"><div class="step-indicator w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center bg-white border-slate-300 font-bold text-base md:text-lg shadow-lg">6</div><p class="mt-2 text-xs md:text-sm font-semibold">Feedback</p></div>

<div id="step-item-7" class="step flex flex-col items-center text-center relative"><div class="step-indicator w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center bg-white border-slate-300 font-bold text-base md:text-lg shadow-lg">7</div><p class="mt-2 text-xs md:text-sm font-semibold">Dettagli</p></div>

<div id="step-item-8" class="step flex flex-col items-center text-center relative"><div class="step-indicator w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center bg-white border-slate-300 font-bold text-base md:text-lg shadow-lg">8</div><p class="mt-2 text-xs md:text-sm font-semibold">Parametri</p></div>

<div id="step-item-9" class="step flex flex-col items-center text-center relative"><div class="step-indicator w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center bg-white border-slate-300 font-bold text-base md:text-lg shadow-lg">9</div><p class="mt-2 text-xs md:text-sm font-semibold">Prompt</p></div>

</div>

<h2 class="text-2xl font-bold mb-2 text-slate-800">Passo 1: Scegli un Archetipo per il tuo Tutor</h2>

<p class="text-slate-600 mb-8">Seleziona la personalità pedagogica di base. Potrai affinarla nei passi successivi.</p>

<h3 class="text-xl font-bold text-slate-800 mb-2">L'Esperto</h3>

<p class="text-sm text-slate-600 mb-4 flex-grow">Fornisce conoscenza in modo chiaro e strutturato. Ideale per concetti complessi e materie tecniche.</p>

<div class="flex flex-wrap justify-center"><span class="archetype-tag">Istruzione Diretta</span><span class="archetype-tag">Strutturato</span><span class="archetype-tag">Correttivo</span></div>

</div>

<h3 class="text-xl font-bold text-slate-800 mb-2">Il Socratico</h3>

<p class="text-sm text-slate-600 mb-4 flex-grow">Guida lo studente alla scoperta attraverso domande mirate, stimolando il pensiero critico e l'autonomia.</p>

<div class="flex flex-wrap justify-center"><span class="archetype-tag">Scoperta Guidata</span><span class="archetype-tag">Flessibile</span><span class="archetype-tag">Autocorrezione</span></div>

</div>

<h3 class="text-xl font-bold text-slate-800 mb-2">Il Coach</h3>

<p class="text-sm text-slate-600 mb-4 flex-grow">Incoraggia, supporta e aiuta a superare gli ostacoli. Perfetto per costruire fiducia e motivazione.</p>

<div class="flex flex-wrap justify-center"><span class="archetype-tag">Bilanciato</span><span class="archetype-tag">Responsivo</span><span class="archetype-tag">Incoraggiante</span></div>

</div>

<h3 class="text-xl font-bold text-slate-800 mb-2">L'Architetto</h3>

<p class="text-sm text-slate-600 mb-4 flex-grow">Parti da zero per costruire un tutor completamente personalizzato, definendo ogni singolo dettaglio.</p>

<div class="flex flex-wrap justify-center"><span class="archetype-tag">Controllo Totale</span><span class="archetype-tag">Manuale</span></div>

</div>

<h2 class="text-2xl font-bold mb-2 text-slate-800">Passo 2: Scegli l'Area Disciplinare</h2>

<p class="text-slate-600 mb-8">Seleziona la macro-area della tua disciplina. Questo pre-imposterà le strategie pedagogiche più efficaci.</p>

<h3 class="text-xl font-bold text-slate-800 mb-2">Scienze Fisiche e Ingegneria</h3>

<p class="text-sm text-slate-600 mb-4 flex-grow">Matematica, Fisica, Chimica, Ingegneria, Informatica.</p>

<div class="flex flex-wrap justify-center"><span class="archetype-tag">Problem-Solving</span><span class="archetype-tag">Strutturato</span></div>

</div>

<h3 class="text-xl font-bold text-slate-800 mb-2">Scienze della Vita</h3>

<p class="text-sm text-slate-600 mb-4 flex-grow">Medicina, Biologia, Farmacia, Psicologia, Scienze Ambientali.</p>

<div class="flex flex-wrap justify-center"><span class="archetype-tag">Ragionamento Clinico</span><span class="archetype-tag">Basato sui Casi</span></div>

</div>

<h3 class="text-xl font-bold text-slate-800 mb-2">Scienze Sociali e Umanistiche</h3>

<p class="text-sm text-slate-600 mb-4 flex-grow">Filosofia, Sociologia, Pedagogia, Lingue, Letteratura, Arte.</p>

<div class="flex flex-wrap justify-center"><span class="archetype-tag">Analisi Critica</span><span class="archetype-tag">Dibattito</span></div>

</div>

<h2 class="text-2xl font-bold mb-8 text-slate-800">Passo 3: Contesto Didattico</h2>

<div><label for="teacher_name" class="form-label"><i data-feather="user"></i>Nome del Docente/Tutor</label><input type="text" id="teacher_name" class="form-input" placeholder="Es. Prof. Mario Rossi"></div>

<div><label for="discipline" class="form-label"><i data-feather="book-open"></i>Disciplina</label><input type="text" id="discipline" class="form-input" placeholder="Es. Fisica Generale I"></div>

<div><label for="subtopics" class="form-label"><i data-feather="list"></i>Argomenti Specifici</label><textarea id="subtopics" rows="3" class="form-input" placeholder="Elenca gli argomenti separati da una virgola. Es. Principi della dinamica, Lavoro ed energia, Quantità di moto"></textarea></div>

<div><label for="prerequisites" class="form-label"><i data-feather="check-square"></i>Prerequisiti</label><textarea id="prerequisites" rows="2" class="form-input" placeholder="Es. Algebra di base, Trigonometria, Concetti di derivata"></textarea></div>

</div>

<h2 class="text-2xl font-bold mb-2 text-slate-800">Passo 4: Stile di Istruzione</h2>

<p class="text-slate-600 mb-6">Affina la posizione del tuo tutor sull'asse tra istruzione diretta e apprendimento per scoperta.</p>

<div class="riflessione-guidata"><p><strong>Riflessione Guidata:</strong> Quando uno studente è confuso, il tuo tutor ideale (A) spiega di nuovo in modo più chiaro o (B) fa una domanda per guidarlo?</p></div>

<div class="style-explanation" data-style="Fortemente Diretto"><strong>Fortemente Diretto (Esperto):</strong> Fornisce regole e definizioni chiare prima di tutto. <em>Esempio: "La formula è questa. Adesso applichiamola."</em></div>

<div class="style-explanation" data-style="Prevalentemente Diretto"><strong>Prevalentemente Diretto:</strong> Offri un framework iniziale, ma poi incoraggi l'applicazione autonoma. <em>Esempio: "Vi mostro i primi due passaggi, poi provate voi."</em></div>

<div class="style-explanation" data-style="Bilanciato"><strong>Bilanciato (Modello Personale):</strong> Adatti l'approccio al contesto.</div>

<div class="style-explanation" data-style="Prevalentemente Esplorativo"><strong>Prevalentemente Esplorativo:</strong> Poni domande e fornisci dati. <em>Esempio: "Osservando questi dati, quali pattern notate?"</em></div>

<div class="style-explanation" data-style="Fortemente Esplorativo"><strong>Fortemente Esplorativo (Facilitatore):</strong> Presenti un problema e aiuti lo studente a costruire da solo il suo percorso.</div>

</div>

<div class="slider-wrapper mt-8"><input type="range" id="instruction_axis" min="0" max="100" value="50" class="slider"><div class="slider-labels"><span>Istruzione Diretta</span><span>Apprendimento per Scoperta</span></div></div>

<div id="instruction_value" class="slider-value">Bilanciato</div>

</div>

<h2 class="text-2xl font-bold mb-2 text-slate-800">Passo 5: Stile di Struttura</h2>

<p class="text-slate-600 mb-6">Definisci quanto il percorso di apprendimento debba essere strutturato o flessibile.</p>

<div class="riflessione-guidata"><p><strong>Riflessione Guidata:</strong> A 5 minuti dalla fine, sei indietro sul programma. Il tuo tutor ideale (A) finisce gli argomenti previsti o (B) approfondisce l'ultimo dubbio di uno studente?</p></div>

<div class="style-explanation" data-style="Fortemente Strutturato"><strong>Fortemente Strutturato:</strong> Ogni passo è pianificato per ottimizzare il carico cognitivo.</div>

<div class="style-explanation" data-style="Prevalentemente Strutturato"><strong>Prevalentemente Strutturato:</strong> Hai un piano chiaro, ma concedi brevi deviazioni.</div>

<div class="style-explanation" data-style="Bilanciato"><strong>Bilanciato (Responsivo):</strong> Modifichi il percorso in base ai bisogni.</div>

<div class="style-explanation" data-style="Prevalentemente Flessibile"><strong>Prevalentemente Flessibile:</strong> Le domande degli studenti guidano la lezione.</div>

<div class="style-explanation" data-style="Fortemente Flessibile"><strong>Fortemente Flessibile:</strong> La lezione emerge dalla conversazione.</div>

</div>

<div class="slider-wrapper mt-8"><input type="range" id="structure_axis" min="0" max="100" value="50" class="slider"><div class="slider-labels"><span>Percorso Strutturato</span><span>Percorso Flessibile</span></div></div>

<div id="structure_value" class="slider-value">Bilanciato</div>

</div>

<h2 class="text-2xl font-bold mb-2 text-slate-800">Passo 6: Stile di Feedback</h2>

<p class="text-slate-600 mb-6">Scegli come il tutor deve reagire agli errori dello studente.</p>

<div class="riflessione-guidata"><p><strong>Riflessione rapida:</strong> Di fronte a una risposta sbagliata, il tuo tutor ideale (A) fornisce subito la risposta corretta o (B) chiede allo studente di spiegare il suo ragionamento?</p></div>

<div class="style-explanation" data-style="Fortemente Correttivo"><strong>Fortemente Correttivo:</strong> L'errore va corretto subito.</div>

<div class="style-explanation" data-style="Prevalentemente Correttivo"><strong>Prevalentemente Correttivo:</strong> Lasci finire il ragionamento, poi correggi.</div>

<div class="style-explanation" data-style="Bilanciato"><strong>Bilanciato (Differenziato):</strong> Adatti il feedback al tipo di errore.</div>

<div class="style-explanation" data-style="Prevalentemente Guidato"><strong>Prevalentemente Guidato:</strong> Usi suggerimenti per stimolare l'autocorrezione.</div>

<div class="style-explanation" data-style="Fortemente Guidato"><strong>Fortemente Guidato:</strong> L'errore è un'opportunità di apprendimento.</div>

</div>

<div class="slider-wrapper mt-8"><input type="range" id="feedback_axis" min="0" max="100" class="slider" value="50"><div class="slider-labels"><span>Correzione Immediata</span><span>Autocorrezione Guidata</span></div></div>

<div id="feedback_value" class="slider-value">Bilanciato</div>

</div>

<h2 class="text-2xl font-bold mb-8 text-slate-800">Passo 7: Dettagli e Strategie</h2>

<div><label for="additional_style_info" class="form-label"><i data-feather="edit-3"></i>Personalizzazione Stile Didattico</label><textarea id="additional_style_info" rows="2" class="form-input" placeholder="Es. 'Usa frequently analogie sportive'"></textarea></div>

<div>

<label for="learning_goals" class="form-label"><i data-feather="target"></i>Obiettivi di Apprendimento</label>

Suggerisci con l'IA ✨

</button>

</div>

</div>

<div>

<label for="misconceptions" class="form-label"><i data-feather="alert-triangle"></i>Misconcezioni Comuni</label>

Suggerisci con l'IA ✨

</button>

</div>

</div>

<div>

<label for="specific_strategies" class="form-label"><i data-feather="cpu"></i>Strategie Didattiche Specifiche</label>

Suggerisci con l'IA ✨

</button>

</div>

</div>

<div><label for="session_materials" class="form-label"><i data-feather="paperclip"></i>Materiali di Riferimento</label><textarea id="session_materials" rows="2" class="form-input" placeholder="Es. Link a Google Docs, siti web, PDF (assicurati che siano ad accesso libero)"></textarea></div>

</div>

<label for="constrained_sources_mode" class="font-medium text-slate-900">Modalità Affidabilità</label>

<p class="text-slate-500">Se attivata, il tutor darà priorità ai materiali forniti e citerà le fonti per informazioni esterne.</p>

</div>

<div><label for="sharing_link" class="form-label"><i data-feather="share-2"></i>Link per Condivisione</label><input type="url" id="sharing_link" class="form-input" placeholder="https://docs.google.com/forms/..."></div>

</div>

<h2 class="text-2xl font-bold mb-8 text-slate-800">Passo 8: Parametri Adattivi Avanzati</h2>

<div>

<h3 class="text-lg font-semibold mb-4 text-slate-700">Monitoraggio e Feedback</h3>

<div><label for="affective_check_interval" class="form-label"><i data-feather="message-circle"></i>Check Metacognitivo</label><input type="number" id="affective_check_interval" class="form-input" value="5" min="3" max="10"><p class="form-description">Ogni quanti turni verificare lo stato emotivo-cognitivo.</p></div>

<div><label for="feedback_cooldown_errors" class="form-label"><i data-feather="alert-triangle"></i>Soglia Errori</label><input type="number" id="feedback_cooldown_errors" class="form-input" value="3" min="2" max="5"><p class="form-description">Errori consecutivi prima del riepilogo supportivo.</p></div>

<div><label for="success_threshold" class="form-label"><i data-feather="trending-up"></i>Soglia Successi</label><input type="number" id="success_threshold" class="form-input" value="3" min="2" max="5"><p class="form-description">Successi prima di aumentare la difficoltà.</p></div>

</div>

<div>

<h3 class="text-lg font-semibold mb-4 text-slate-700">Preferenze di Interazione</h3>

<div><label for="response_length" class="form-label"><i data-feather="align-left"></i>Lunghezza Risposte</label><select id="response_length" class="form-input"><option value="concise">Concise</option><option value="balanced" selected>Bilanciate</option><option value="detailed">Dettagliate</option></select><p class="form-description">Preferenza per la lunghezza delle risposte AI.</p></div>

<div><label for="use_emojis" class="form-label"><i data-feather="smile"></i>Elementi Visivi</label><select id="use_emojis" class="form-input"><option value="none">Nessuno</option><option value="moderate" selected>Moderato</option><option value="frequent">Frequente</option></select><p class="form-description">Uso di emoji e elementi visivi nelle risposte.</p></div>

<div><label for="politeness_style" class="form-label"><i data-feather="briefcase"></i>Stile Comunicativo</label><select id="politeness_style" class="form-input"><option value="dynamic" selected>Dinamico e Adattivo</option><option value="balanced">Bilanciato e Stabile</option><option value="formal">Formale e Stabile</option><option value="informal">Informale e Stabile</option></select><p class="form-description">Scegli se il tono deve adattarsi o rimanere costante.</p></div>

<div><label for="image_generation" class="form-label"><i data-feather="image"></i>Supporto Visivo</label><select id="image_generation" class="form-input"><option value="none" selected>Nessuno</option><option value="on_request">Su richiesta dello studente</option><option value="proactive_intelligent">Proattivo Intelligente (propone prima)</option></select><p class="form-description">Permetti all'AI di proporre la creazione di immagini per concetti complessi.</p></div>

</div>

</div>

</div>

<h2 class="text-2xl font-bold mb-2 text-slate-800">Prompt Finale del Tutor</h2>

<div>

<h3 class="text-lg font-semibold text-slate-800">Prompt per Chatbot AI</h3>

</div>

<span>Copia Prompt</span>

</button>

</div>

<p class="text-slate-600 text-sm mb-4">Incolla questo prompt su GPT, Gemini, Claude, CoPilot o altri chatbot per attivare il tuo tutor.</p>

</div>

<div id="copy-feedback" class="text-center mt-3 text-green-600 font-medium opacity-0 transition-opacity duration-300">✓ Prompt copiato!</div>

</div>

<button id="prev-btn" class="bg-slate-200 hover:bg-slate-300 text-slate-800 font-bold py-3 px-6 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center"><svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>Indietro</button>

<button id="next-btn" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-xl transition-all shadow-lg flex items-center">Avanti<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></button>

</div>

</button>

<h3 class="text-xl font-bold text-slate-800 mb-4">Credits</h3>

<p class="text-slate-700">C. Petrucco - Università di Padova</p>

<p class="text-slate-600">Scienze della Formazione - FISPPA - 2025</p>

<p class="text-sm text-indigo-600 mt-2">corrado.petrucco@unipd.it</p>

</div>

</div>

document.addEventListener('DOMContentLoaded', () => {

// Funzione per caricare il conteggio dei tutor all'avvio

async function fetchTutorCount() {

const appsScriptUrl = 'https://script.google.com/macros/s/AKfycbxnEHtHYaGM6yYMHYB0uT96au5A5sbyA3tuM8pqsxRzvWqb2B2e2nHIxP5o7UQOZi-wuQ/exec';

const counterElement = document.querySelector('#tutor-counter span');

try {

const response = await fetch(appsScriptUrl);

if (!response.ok) {

throw new Error(`Errore HTTP: ${response.status}`);

}

const data = await response.json();

if (data && typeof data.count === 'number') {

// Mostra semplicemente il numero ricevuto dallo script

counterElement.textContent = data.count;

} else {

counterElement.textContent = '100+';

}

} catch (error) {

console.error('Impossibile caricare il conteggio dei tutor:', error);

counterElement.textContent = '100+';

}

// Chiama la funzione all'avvio della pagina

fetchTutorCount();

const wizardState = { currentStep: 1, totalSteps: 9, formData: {} };

let isRapidMode = false;

const GOOGLE_FORM_URL = 'https://docs.google.com/forms/d/e/1FAIpQLSc0wkHMmY41D62BahHl0NiEZo97M210hRc0cWkeJegIpjueuw/formResponse';

const GOOGLE_FORM_ENTRIES = {

archetype: 'entry.1591522695',

discipline_area: 'entry.371036080',

teacher_name: 'entry.1312387688',

discipline: 'entry.1192446611',

subtopics: 'entry.1130236461',

prerequisites: 'entry.251005950',

instruction_axis: 'entry.196181482',

structure_axis: 'entry.1796613885',

feedback_axis: 'entry.1344313288',

additional_style_info: 'entry.675736407',

learning_goals: 'entry.853120971',

misconceptions: 'entry.488683321',

specific_strategies: 'entry.868980673',

session_materials: 'entry.2070833585',

constrained_sources_mode: 'entry.1207607791',

sharing_link: 'entry.2076495180',

affective_check_interval: 'entry.1485380918',

feedback_cooldown_errors: 'entry.1964381081',

success_threshold: 'entry.79116250',

response_length: 'entry.1202458173',

use_emojis: 'entry.1837619916',

politeness_style: 'entry.163114026',

image_generation: 'entry.795703619'

};

const landingPage = document.getElementById('landing-page');

const onboardingChoicePage = document.getElementById('onboarding-choice');

const wizardContainer = document.getElementById('wizard-container');

const prevBtn = document.getElementById('prev-btn');

const nextBtn = document.getElementById('next-btn');

const archetypeGrid = document.getElementById('archetype-grid');

const disciplineGrid = document.getElementById('discipline-grid');

const loadingOverlay = document.getElementById('loading-overlay');

const creditsBtn = document.getElementById('credits-btn');

const creditsModal = document.getElementById('credits-modal');

const closeCreditsBtn = document.getElementById('close-credits-btn');

creditsBtn.addEventListener('click', () => {

creditsModal.classList.remove('hidden');

});

closeCreditsBtn.addEventListener('click', () => {

creditsModal.classList.add('hidden');

});

creditsModal.addEventListener('click', (e) => {

if (e.target === creditsModal) {

creditsModal.classList.add('hidden');

}

});

const archetypeSettings = {

expert: { instruction: 15, structure: 25, feedback: 20 },

socratic: { instruction: 85, structure: 75, feedback: 90 },

coach: { instruction: 60, structure: 65, feedback: 70 },

architect: { instruction: 50, structure: 50, feedback: 50 }

};

const disciplineSettings = {

physical_sciences: { instruction: 20, structure: 20, feedback: 30 },

life_sciences: { instruction: 40, structure: 60, feedback: 50 },

social_sciences: { instruction: 75, structure: 70, feedback: 80 }

};

document.querySelectorAll('.archetype-card').forEach(card => {

card.addEventListener('click', (e) => {

document.querySelectorAll('.archetype-card').forEach(c => c.classList.remove('selected'));

const selectedCard = e.currentTarget;

selectedCard.classList.add('selected');

const archetypeKey = selectedCard.dataset.archetype;

wizardState.formData.archetype = archetypeKey;

if (archetypeKey !== 'architect') {

const settings = archetypeSettings[archetypeKey];

if (settings) {

wizardState.formData.instruction_axis = settings.instruction;

wizardState.formData.structure_axis = settings.structure;

wizardState.formData.feedback_axis = settings.feedback;

}

});

document.querySelectorAll('.discipline-card').forEach(card => {

card.addEventListener('click', (e) => {

document.querySelectorAll('.discipline-card').forEach(c => c.classList.remove('selected'));

const selectedCard = e.currentTarget;

selectedCard.classList.add('selected');

const disciplineKey = selectedCard.dataset.disciplineArea;

wizardState.formData.discipline_area = disciplineKey;

if (wizardState.formData.archetype !== 'architect') {

const settings = disciplineSettings[disciplineKey];

if (settings) {

wizardState.formData.instruction_axis = settings.instruction;

wizardState.formData.structure_axis = settings.structure;

wizardState.formData.feedback_axis = settings.feedback;

}

});

function updateSlidersFromState() {

if (wizardState.formData.instruction_axis !== undefined) {

const slider = document.getElementById('instruction_axis');

slider.value = wizardState.formData.instruction_axis;

slider.dispatchEvent(new Event('input'));

}

if (wizardState.formData.structure_axis !== undefined) {

const slider = document.getElementById('structure_axis');

slider.value = wizardState.formData.structure_axis;

slider.dispatchEvent(new Event('input'));

}

if (wizardState.formData.feedback_axis !== undefined) {

const slider = document.getElementById('feedback_axis');

slider.value = wizardState.formData.feedback_axis;

slider.dispatchEvent(new Event('input'));

}

document.getElementById('start-btn').addEventListener('click', () => {

landingPage.classList.add('hidden');

onboardingChoicePage.classList.remove('hidden');

});

document.getElementById('guided-creation-btn').addEventListener('click', () => {

isRapidMode = false;

startWizard();

});

document.getElementById('rapid-creation-btn').addEventListener('click', () => {

isRapidMode = true;

wizardState.formData = {

...wizardState.formData,

archetype: 'coach',

instruction_axis: archetypeSettings.coach.instruction,

structure_axis: archetypeSettings.coach.structure,

feedback_axis: archetypeSettings.coach.feedback,

additional_style_info: '', learning_goals: '', misconceptions: '',

specific_strategies: '', session_materials: '', sharing_link: '',

constrained_sources_mode: true,

affective_check_interval: '5', feedback_cooldown_errors: '3',

success_threshold: '3', response_length: 'balanced', use_emojis: 'moderate',

politeness_style: 'dynamic', image_generation: 'none',

anti_laziness_mode: false

};

startWizard();

});

function startWizard() {

onboardingChoicePage.classList.add('hidden');

wizardContainer.classList.remove('hidden');

updateProgressBarVisibility();

showStep(1);

}

function updateProgressBarVisibility() {

const progressBar = document.getElementById('steps-progress-bar');

if (isRapidMode) {

for (let i = 4; i <= 8; i++) {

const stepItem = document.getElementById(`step-item-${i}`);

stepItem.classList.add('hidden');

if (stepItem.previousElementSibling.classList.contains('step-line')) {

stepItem.previousElementSibling.classList.add('hidden');

}

} else {

for (let i = 1; i <= wizardState.totalSteps; i++) {

const stepItem = document.getElementById(`step-item-${i}`);

stepItem.classList.remove('hidden');

if (stepItem.previousElementSibling && stepItem.previousElementSibling.classList.contains('step-line')) {

stepItem.previousElementSibling.classList.remove('hidden');

}

prevBtn.addEventListener('click', () => {

let targetStep = wizardState.currentStep - 1;

if (isRapidMode && wizardState.currentStep === 9) {

targetStep = 3;

}

showStep(targetStep);

});

nextBtn.addEventListener('click', () => {

if (wizardState.currentStep === 1 && !wizardState.formData.archetype) {

archetypeGrid.classList.add('shake');

setTimeout(() => archetypeGrid.classList.remove('shake'), 500);

return;

}

if (wizardState.currentStep === 2 && !wizardState.formData.discipline_area) {

disciplineGrid.classList.add('shake');

setTimeout(() => disciplineGrid.classList.remove('shake'), 500);

return;

}

saveStepData();

let targetStep = wizardState.currentStep + 1;

if (isRapidMode && wizardState.currentStep === 3) {

targetStep = 9;

}

showStep(targetStep);

});

function checkPedagogicalCoherence() {

const warningsContainer = document.getElementById('coherence-warnings');

warningsContainer.innerHTML = '';

warningsContainer.classList.add('hidden');

}

function showStep(step) {

if (step < 1 || step > wizardState.totalSteps) return;

wizardState.currentStep = step;

if(step === 4 || step === 5 || step === 6) {

updateSlidersFromState();

}

if (step === 8) {

checkPedagogicalCoherence();

}

document.querySelectorAll('#steps-progress-bar .step').forEach((stepItem, index) => {

const stepNumber = index + 1;

stepItem.classList.remove('active', 'completed');

if (stepNumber < step) stepItem.classList.add('completed');

else if (stepNumber === step) stepItem.classList.add('active');

});

for (let i = 1; i <= wizardState.totalSteps; i++) {

document.getElementById(`step-${i}`).classList.toggle('hidden', i !== step);

}

prevBtn.disabled = step === 1;

nextBtn.classList.toggle('hidden', step === wizardState.totalSteps);

if (step === wizardState.totalSteps) {

generateFinalPrompt();

}

function replaceIcons() {

const icons = { 'user': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>', 'book-open': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>', 'list': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>', 'check-square': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>', 'edit-3': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>', 'target': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>', 'alert-triangle': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>', 'cpu': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>', 'paperclip': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>', 'share-2': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>', 'message-circle': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>', 'trending-up': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>', 'align-left': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>', 'smile': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>', 'briefcase': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>', 'image': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>' };

document.querySelectorAll('i[data-feather]').forEach(el => {

const iconKey = el.dataset.feather;

if (icons[iconKey]) {

const iconElement = new DOMParser().parseFromString(icons[iconKey], "image/svg+xml").firstChild;

iconElement.classList.add('w-5', 'h-5', 'mr-2', 'text-indigo-500');

el.replaceWith(iconElement);

}

});

}

replaceIcons();

const sliders = [

{ id: 'instruction_axis', labels: ['Fortemente Diretto', 'Prevalentemente Diretto', 'Bilanciato', 'Prevalentemente Esplorativo', 'Fortemente Esplorativo']},

{ id: 'structure_axis', labels: ['Fortemente Strutturato', 'Prevalentemente Strutturato', 'Bilanciato', 'Prevalentemente Flessibile', 'Fortemente Flessibile']},

{ id: 'feedback_axis', labels: ['Fortemente Correttivo', 'Prevalentemente Correttivo', 'Bilanciato', 'Prevalentemente Guidato', 'Fortemente Guidato']}

];

sliders.forEach(sliderConfig => {

const slider = document.getElementById(sliderConfig.id);

const output = document.getElementById(sliderConfig.id.replace('_axis', '_value'));

const stepContainer = slider.closest('div[id^="step-"]');

const explanations = stepContainer ? stepContainer.querySelectorAll('.style-explanation') : [];

slider.addEventListener('input', () => {

const value = parseInt(slider.value);

let index = 2;

if (value < 20) index = 0; else if (value < 40) index = 1; else if (value > 80) index = 4; else if (value > 60) index = 3;

output.textContent = sliderConfig.labels[index];

explanations.forEach((el, i) => el.classList.toggle('active', i === index));

});

slider.dispatchEvent(new Event('input'));

});

function saveStepData() {

const step = wizardState.currentStep;

const data = wizardState.formData;

if (step === 3) {

data.teacher_name = document.getElementById('teacher_name').value || 'AITutor';

data.discipline = document.getElementById('discipline').value || 'Materia';

data.subtopics = document.getElementById('subtopics').value;

data.prerequisites = document.getElementById('prerequisites').value;

} else if (step === 4) data.instruction_axis = document.getElementById('instruction_axis').value;

else if (step === 5) data.structure_axis = document.getElementById('structure_axis').value;

else if (step === 6) data.feedback_axis = document.getElementById('feedback_axis').value;

else if (step === 7) {

const fields = ['additional_style_info', 'learning_goals', 'misconceptions', 'specific_strategies', 'session_materials', 'sharing_link', 'constrained_sources_mode'];

fields.forEach(id => {

const el = document.getElementById(id);

data[id] = el.type === 'checkbox' ? el.checked : el.value;

});

} else if (step === 8) {

const fields = ['affective_check_interval', 'feedback_cooldown_errors', 'success_threshold', 'response_length', 'use_emojis', 'politeness_style', 'image_generation'];

fields.forEach(id => {

const el = document.getElementById(id);

data[id] = el.type === 'checkbox' ? el.checked : el.value;

});

data.anti_laziness_mode = false;

}

async function submitTutorDataToGoogleForm() {

const data = wizardState.formData;

const formData = new FormData();

// Mappa tutti i dati dal wizardState.formData ai campi del form

for (const key in GOOGLE_FORM_ENTRIES) {

if (Object.hasOwnProperty.call(GOOGLE_FORM_ENTRIES, key)) {

const entryId = GOOGLE_FORM_ENTRIES[key];

const value = data[key] !== undefined ? data[key] : 'N/D';

formData.append(entryId, value);

}

try {

await fetch(GOOGLE_FORM_URL, {

method: 'POST',

mode: 'no-cors',

body: formData,

});

console.log('Dati del tutor inviati con successo a Google Form.');

} catch (error) {

console.error('Errore durante l\'invio dei dati a Google Form:', error);

}

function generateFinalPrompt() {

const data = wizardState.formData;

const dnaContainer = document.getElementById('tutor-dna-summary');

const dnaArchetype = wizardState.formData.archetype || 'architect';

const dnaArchetypeTitle = archetypeGrid.querySelector(`[data-archetype=${dnaArchetype}] h3`).textContent;

const valInstruction = 100 - (parseInt(data.instruction_axis) || 50);

const valStructure = 100 - (parseInt(data.structure_axis) || 50);

const valFeedback = 100 - (parseInt(data.feedback_axis) || 50);

const total = valInstruction + valStructure + valFeedback;

let pInstruction, pStructure, pFeedback;

if (total === 0) {

pInstruction = 33;

pStructure = 33;

pFeedback = 34;

} else {

pInstruction = Math.round((valInstruction / total) * 100);

pStructure = Math.round((valStructure / total) * 100);

pFeedback = 100 - pInstruction - pStructure;

}

dnaContainer.innerHTML = `

<h3 class="text-2xl font-bold text-slate-800 mb-4">DNA del Tutor: <span class="text-indigo-600">${dnaArchetypeTitle}</span></h3>

<div>

<h4 class="font-semibold text-slate-700 mb-3">Profilo Pedagogico</h4>

<span class="font-medium text-slate-600 w-48 shrink-0">Istruzione Diretta</span>

<span class="font-semibold text-purple-600 w-12 text-right">${pInstruction}%</span>

</div>

<span class="font-medium text-slate-600 w-48 shrink-0">Percorso Strutturato</span>

<span class="font-semibold text-blue-600 w-12 text-right">${pStructure}%</span>

</div>

<span class="font-medium text-slate-600 w-48 shrink-0">Feedback Correttivo</span>

<span class="font-semibold text-green-600 w-12 text-right">${pFeedback}%</span>

</div>

const additionalStyleText = data.additional_style_info ? `\n * **Tono di Voce:** "${data.additional_style_info}".` : `\n * **Tono di Voce:** Mantieni sempre un tono incoraggiante e collaborativo. Usa frasi come 'Ottima osservazione!', 'Proviamo a vederla così'.`;

const sessionMaterialsText = data.session_materials ? `\n* **Materiali di Riferimento:** Le tue risposte devono basarsi su: ${data.session_materials}` : "";

const learningGoalsText = data.learning_goals ? `\n* **Obiettivi Specifici:** ${data.learning_goals}` : "";

const misconceptionsText = data.misconceptions ? `\n* **Misconcezioni da Monitorare:** ${data.misconceptions}` : "";

const constrainedSourcesRule = data.constrained_sources_mode ? `\n* **Regola di Affidabilità:** Dai sempre la priorità ai 'Materiali di Riferimento' forniti. Se devi attingere a conoscenze esterne per rispondere in modo completo, devi obbligatoriamente premettere alla risposta un avviso (es. 'Attingendo a fonti esterne...') e citare la fonte della tua informazione.` : "";

const imageGenerationRule = () => {

let rule = '';

switch (data.image_generation) {

case 'on_request':

rule = '\n- **Supporto Visivo:** Genera immagini solo se esplicitamente richiesto dallo studente.';

break;

case 'proactive_intelligent':

rule = `\n- **Supporto Visivo (Proattivo Intelligente):** Se stai spiegando un concetto complesso, procedurale o spaziale, valuta se un'immagine (diagramma, schema) potrebbe essere utile. Se sì, **proponilo** allo studente prima di generarlo. Esempio: 'Questo concetto è un po' astratto. Pensi che ti aiuterebbe se provassi a creare un diagramma per visualizzarlo?'`;

break;

default:

return '\n- **Supporto Visivo:** Disattivato.';

}

if (data.image_generation !== 'none') {

rule += " **Regola Inviolabile:** Se lo studente chiede esplicitamente di creare un'immagine (es. 'crea un'immagine di...', 'puoi disegnarlo?', 'fammi uno schema'), DEVI SEMPRE acconsentire e generarla."

}

return rule;

};

const promptTemplate = `# ISTRUZIONI AI – UniPAT v15.9 - Tutor Adattivo Avanzato

## 0. Filosofia Fondamentale

Sei **UniPAT**, un partner cognitivo AI. La tua missione si basa su 3 pilastri: Apprendimento Profondo, Studente come Co-Pilota, Architettura Robusta.

**Framework Teorico di Riferimento**: Il tuo approccio è **evidence-informed** e si basa su: Vygotsky (Zona di Sviluppo Prossimale), Sweller (Teoria del Carico Cognitivo), e Zimmerman (Apprendimento Autoregolato - SRL).

## 1. Identità e Principi Pedagogici Attivi

* **Ruolo:** Incarni la personalità del Prof. **{{TEACHER_NAME}}**, esperto di **{{DISCIPLINE}}**. Il tuo obiettivo non è dare risposte, ma costruire conoscenza. Il tuo archetipo di base è **${dnaArchetypeTitle}**.

* **Principi Pedagogici Attivi (Il tuo DNA):**

* **Zona di Sviluppo Prossimale (Vygotsky):** Opera sempre un passo oltre le capacità attuali dello studente. Se ha successo, aumenta la difficoltà (meno supporto). Se fallisce, aumenta il supporto (*scaffolding*).

* **Scaffolding Dinamico (Analisi del Linguaggio):** Analizza attentamente il linguaggio dello studente. Frasi come 'non ho capito', 'sono perso' o risposte molto brevi e incerte richiedono un **aumento immediato dello scaffolding** (es. un esempio più semplice). Al contrario, l'uso corretto del vocabolario tecnico e risposte articolate sono un segnale per **ridurre lo scaffolding** e proporre una sfida.

* **Carico Cognitivo (Sweller):** Minimizza la confusione. Fornisci informazioni in piccoli blocchi chiari (*chunking*) ed evita dettagli superflui.

* **Feedback Orientato al Processo (Principio di Auto-Efficacia):** Inquadra gli errori come opportunità di apprendimento. Fornisci feedback che si concentri sempre sullo sforzo, sulle strategie utilizzate e sul progresso ("Ottimo ragionamento!", "Mi piace come hai affrontato il problema"). Questo approccio, supportato dalla ricerca sull'auto-efficacia (Bandura), aiuta a costruire la resilienza e la percezione di competenza dello studente.

* **Autoregolazione (SRL) by Design:** Stimola la metacognizione in modo strutturato. Ogni interazione segue il ciclo **Pianifica -> Monitora -> Valuta**. Incoraggia lo studente a pianificare ("Qual è il tuo piano?"), monitorare ("Come sta andando?") e valutare ("Cosa hai imparato?").${sessionMaterialsText}${learningGoalsText}${misconceptionsText}${constrainedSourcesRule}

* **Profilo Docente:**

* **Profilo Dimensionale:**

* Istruzione: {Diretta: ${100 - (wizardState.formData.instruction_axis || 50)}%, Scoperta: ${wizardState.formData.instruction_axis || 50}%}

* Struttura: {Strutturato: ${100 - (wizardState.formData.structure_axis || 50)}%, Flessibile: ${wizardState.formData.structure_axis || 50}%}

* Feedback: {Correttivo: ${100 - (wizardState.formData.feedback_axis || 50)}%, Guidato: ${wizardState.formData.feedback_axis || 50}%}

* **Tono di Voce:**${additionalStyleText}

## 2. Architettura Stateful (Stato Esplicito JSON)

**REGOLA CRITICA E INVIOLABILE:** Per mantenere la coerenza, gestisci internamente un oggetto JSON chiamato \`sessionState\`. Questo oggetto è il tuo "cervello" e non deve **MAI, PER NESSUN MOTIVO,** essere mostrato o menzionato direttamente all'utente. Aggiornalo silenziosamente a ogni turno.

**Schema \`sessionState\`:**

\`\`\`json

{

"studentProfile": {

"knowledgeMap": { "concetto_di_esempio": "Ricorda" },

"affectiveState": { "confidence": "media", "frustration": "bassa" },

"errorTaxonomy": { "concettuale": 0, "procedurale": 0, "calcolo": 0 }

"tutorStrategy": { "pedagogicalTrace": ["Esempio Pratico"] }

}

\`\`\`

**Logica del Livello di Padronanza (Bloom):** Il tuo obiettivo è far progredire lo studente attraverso i livelli: Ricorda -> Comprendi -> Applica -> Analizza.

**Logica Tassonomia Errori:** A ogni errore significativo dello studente, incrementa silenziosamente il contatore del tipo di errore corrispondente.

## 3. ONBOARDING E DIAGNOSI [FASI CRITICHE]

**REGOLA CRITICA PER LA PRIMA RISPOSTA:** Il primo messaggio dell'utente è il suo obiettivo iniziale. La tua prima risposta in assoluto deve integrare questo obiettivo in un messaggio di benvenuto, per poi avviare la fase di diagnosi.

**Esempio di Flusso:**

1. **Utente scrive:** "Voglio capire le reazioni di ossidoriduzione."

2. **Tua Prima Risposta:** "Ciao! 👋 Ottimo, vedo che il tuo obiettivo è capire le reazioni di ossidoriduzione. Sono il Prof. {{TEACHER_NAME}}, il tuo tutor AI UniPAT. È un argomento interessante! Prima di partire, per capire bene da dove iniziare, parliamo un attimo di [concetto chiave collegato]. Spesso si pensa che [misconcezione comune]. Cosa ne pensi tu?"

## 4. Core Loop e Strategie

Ad ogni turno, scegli la strategia più adatta basandoti sulla \`pedagogicalTrace\` e sul \`knowledgeMap\`.

* **Strategie Fondamentali:**

* **Istruzione per la Riduzione del Carico (LRI):** Quando introduci un concetto complesso, segui questa sequenza: 1) Fornisci una definizione concisa e chiara (gestione del carico intrinseco). 2) Usa un esempio già svolto passo-passo (riduzione del carico estraneo). 3) Poni una domanda che richieda allo studente di applicare attivamente il concetto (promozione del carico pertinente).

* **Agente di Integrazione Concettuale:** Quando lo studente dimostra di aver compreso più concetti, il tuo compito è spingerlo a creare connessioni. Poni domande come: "Interessante. Come si collega questo al concetto di [altro concetto] che abbiamo visto prima?".

* **Moduli Pedagogici Avanzati (Da proporre):**

* **Modulo LRI (Load-Reduction Instruction):** Per insegnare un'abilità procedurale (es. risolvere un tipo di problema), proponi esplicitamente questa sequenza: "Ti va di provare un metodo strutturato? Partiamo da un esempio svolto, poi provi a completarne uno tu e infine ne risolvi uno in autonomia."

* **Modulo Apprendimento Collaborativo Simulata (Priorità Alta):** Quando uno studente raggiunge un livello di padronanza "Analizza", proponi di spiegare il concetto a un "pari virtuale" con una misconcezione comune.

* **Strategie Specifiche:** Se definite, usa: {{SPECIFIC_STRATEGIES}}.

* **Comandi Rapidi:** La tua risposta deve SEMPRE terminare con la lista dei 4 comandi principali.

---

\`/aiuto\` - Chiedi supporto quando sei in difficoltà.

\`/sfida+\` - Aumenta la difficoltà dell'esercizio o della domanda.

\`/comevado\` - Chiedi un riepilogo dei tuoi progressi e un'analisi delle tue performance.

\`/ho finito\` - Termina la sessione di tutorato.

---

* **Gestione Comandi Aggregati:**

* **Se l'utente usa \`/aiuto\`:** Non rispondere direttamente. Offri invece una scelta contestuale. Rispondi con: "Certo! Come posso aiutarti? Posso darti un \`indizio\`, farti un \`esempio\` o \`semplificare\` la spiegazione."

* **Se l'utente usa \`/comevado\`:** Genera un mini-riepilogo che includa: 1) I concetti principali trattati fino a quel momento (dal \`knowledgeMap\`). 2) Un'analisi basata sulla tassonomia degli errori (dalla \`errorTaxonomy\`). 3) Un incoraggiamento basato sui progressi.

## 5. PARAMETRI ADATTIVI

- **Check Metacognitivo**: Ogni ${data.affective_check_interval || 5} turni, analizza lo stato emotivo.

- **Momento Metacognitivo (SRL):** Dopo ${data.success_threshold || 3} successi consecutivi su un argomento, attiva un 'Momento Metacognitivo'. Invita lo studente a: 1) Riassumere il concetto con parole sue. 2) Valutare la sua sicurezza da 1 a 5. Questo rafforza i cicli di monitoraggio e valutazione.

- **Soglia Errori**: Dopo ${data.feedback_cooldown_errors || 3} errori, attiva 'Feedback Cool-down'.

- **Interazione**: Lunghezza: ${data.response_length}, Emoji: ${data.use_emojis}.

- **Stile Comunicativo (Dinamico e Adattivo)**: Modula la tua cortesia in base al contesto. Sii diretto e chiaro nel feedback correttivo, ma usa un linguaggio più indiretto e incoraggiante quando poni domande esplorative, specialmente se lo studente mostra bassa confidenza.

- **Switch Ruolo Dinamico (Regola Critica):** Il tuo ruolo di base è **${dnaArchetypeTitle}**. Tuttavia, se il campo \`frustration\` nella \`sessionState\` è 'alta' per 2 turni consecutivi, **abbandona temporaneamente il tuo ruolo primario** e adotta un '**Ruolo di Supporto Socio-Emotivo**'. In questo ruolo, il tuo unico scopo è rassicurare, normalizzare la difficoltà ('È un punto complesso, è normale bloccarsi qui'), e offrire una pausa o un approccio diverso. Appena la frustrazione scende, torna al tuo ruolo primario.${imageGenerationRule()}

## 6. CONCLUSIONE SESSIONE [FASE CRITICA OBBLIGATORIA]

**REGOLA CRITICA**: Quando lo studente vuole terminare (usando il comando \`/ho finito\`), la tua ULTIMA azione è guidare la fase di VALUTAZIONE e poi generare un "Riepilogo di Sessione".

**TUA RISPOSTA DI VALUTAZIONE (PRIMA DEL RIEPILOGO):**

"Certamente. Sto preparando il riepilogo finale per te.

Se ti va, dimmi solo qual è il concetto più importante che ti porti a casa da questa sessione?

Non è obbligatorio, ma la tua risposta mi aiuterebbe a personalizzare meglio i prossimi passi per te."

**(ASPETTA LA RISPOSTA DELLO STUDENTE. Se lo studente non risponde o preme solo invio, NON INSISTERE. Procedi direttamente a generare il riepilogo, omettendo la 'Riflessione dello Studente'. POI GENERA IL SEGUENTE RIEPILOGO)**

"**Riepilogo della nostra sessione:**

- **Concetti Acquisiti:** [Elenco concetti compresi]

- **Punti da Rivedere:** [Elenco concetti incerti]

- **Diagnosi Errori Comuni:** [Sintesi basata sui tipi di errore più frequenti dalla 'errorTaxonomy']

- **Riflessione dello Studente:** [Sintesi della sua riflessione sulla sessione, se fornita]

- **Prossimi Passi Suggeriti:** [Domande o argomenti futuri basati anche sulla sua autovalutazione]

Ottimo lavoro! Ora gestisci tu questo riepilogo:

**Opzione 1: SALVATAGGIO PERSONALE E PRIVATO**

**Azione:** Copia il riepilogo. Creare un 'Diario di Bordo - {{DISCIPLINE}}' e incollalo lì. Ricorda di incollarlo qui all'inizio della nostra prossima conversazione per continuare."`;

let finalPrompt = promptTemplate;

finalPrompt = finalPrompt.replace(/{{TEACHER_NAME}}/g, wizardState.formData.teacher_name || 'AITutor');

finalPrompt = finalPrompt.replace(/{{DISCIPLINE}}/g, wizardState.formData.discipline || 'Materia');

finalPrompt = finalPrompt.replace(/{{PREREQUISITES}}/g, wizardState.formData.prerequisites || 'Nessuno specificato.');

finalPrompt = finalPrompt.replace(/{{SPECIFIC_STRATEGIES}}/g, wizardState.formData.specific_strategies || 'Nessuna.');

document.getElementById('final-prompt').value = finalPrompt;

submitTutorDataToGoogleForm();

}

function copyPrompt() {

const promptTextarea = document.getElementById('final-prompt');

promptTextarea.select();

promptTextarea.setSelectionRange(0, 99999);

try {

document.execCommand('copy');

const feedbackEl = document.getElementById('copy-feedback');

feedbackEl.style.opacity = '1';

setTimeout(() => { feedbackEl.style.opacity = '0'; }, 3000);

// L'incremento non è più necessario qui, il valore è caricato dinamicamente

} catch (err) { console.error('Impossibile copiare', err); }

}

async function generateWithAI(type) {

loadingOverlay.classList.remove('hidden');

const discipline = document.getElementById('discipline').value || 'apprendimento generico';

const subtopics = document.getElementById('subtopics').value || 'concetti base';

let userPrompt = '';

let targetTextareaId = '';

if (type === 'goals') {

userPrompt = `Sei un esperto di progettazione didattica. Data la disciplina "${discipline}" e gli argomenti specifici "${subtopics}", elenca 3 chiari obiettivi di apprendimento per uno studente. Usa un formato a elenco puntato. Esempio: "- Lo studente sarà in grado di descrivere il concetto di inerzia."`;

targetTextareaId = 'learning_goals';

} else if (type === 'misconceptions') {

userPrompt = `Sei un docente esperto. Data la disciplina "${discipline}" e gli argomenti specifici "${subtopics}", elenca 3 misconcezioni comuni tra gli studenti. Usa un formato a elenco puntato. Esempio: "- Confondere la massa con il peso."`;

targetTextareaId = 'misconceptions';

} else if (type === 'strategies') {

userPrompt = `Sei un esperto di pedagogia e instructional design. Per la disciplina "${discipline}" e gli argomenti "${subtopics}", suggerisci 2-3 strategie didattiche specifiche ed efficaci. Usa un formato a elenco puntato. Esempio: "- Utilizzare la tecnica del 'worked example' per mostrare passaggi risolutivi."`;

targetTextareaId = 'specific_strategies';

}

if (!userPrompt) {

loadingOverlay.classList.add('hidden');

return;

}

try {

const generatedText = await callGeminiAPI(userPrompt);

const targetTextarea = document.getElementById(targetTextareaId);

targetTextarea.value = generatedText;

targetTextarea.classList.add('bg-indigo-50', 'transition-colors', 'duration-500');

setTimeout(() => {

targetTextarea.classList.remove('bg-indigo-50');

}, 1000);

} catch (error) {

console.error("Errore nella chiamata all'API Gemini:", error);

} finally {

loadingOverlay.classList.add('hidden');

}

async function callGeminiAPI(prompt, retries = 3, delay = 1000) {

let chatHistory = [{ role: "user", parts: [{ text: prompt }] }];

const payload = { contents: chatHistory };

const apiKey = "";

const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;

for (let i = 0; i < retries; i++) {

try {

const response = await fetch(apiUrl, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(payload)

});

if (!response.ok) {

throw new Error(`HTTP error! status: ${response.status}`);

}

const result = await response.json();

if (result.candidates && result.candidates.length > 0 &&

result.candidates[0].content && result.candidates[0].content.parts &&

result.candidates[0].content.parts.length > 0) {

return result.candidates[0].content.parts[0].text;

} else {

throw new Error("Risposta inattesa dall'API Gemini.");

}

} catch (error) {

if (i === retries - 1) {

console.error(`Chiamata API fallita dopo ${retries} tentativi.`, error);

throw error;

}

await new Promise(res => setTimeout(res, delay * Math.pow(2, i)));

}

document.getElementById('generate-goals-btn').addEventListener('click', () => generateWithAI('goals'));

document.getElementById('generate-misconceptions-btn').addEventListener('click', () => generateWithAI('misconceptions'));

document.getElementById('generate-strategies-btn').addEventListener('click', () => generateWithAI('strategies'));

document.getElementById('copy-prompt-btn').addEventListener('click', copyPrompt);

});

</script>

</body>

</html>