DeutschMeister — Agent Guide

L'integrazione del riconoscimento vocale (STT) e della sintesi vocale (TTS) in tedesco (de-DE) richiede l'applicazione rigorosa di questo standard HTML:

<!-- Coppia Standard Audio & Microfono con ID Univoco Isolato -->
<div class="voice-item-row">
  <div>
    <strong>Ich spreche Italienisch.</strong>
    <div class="vocab-italian">🇮🇹 <em>«Parlo italiano.»</em></div>
    <!-- Box di feedback isolato con ID UNIVOCO -->
    <div id="fb_rep_unique_01" class="row-voice-feedback"></div>
  </div>

  <div class="action-btn-group">
    <button class="audio-btn" data-speak="Ich spreche Italienisch." title="Ascolta">🔊</button>
    <button class="audio-btn mic-repeat-btn" 
            data-target="Ich spreche Italienisch." 
            data-feedback-id="fb_rep_unique_01" 
            title="Ripeti al microfono">🎤</button>
  </div>
</div>

Ogni lezione importa i 3 script cardine ed esegue il binding automatico:

const LEVEL = 'A1';
const DAY = 1; // Incrementare per ogni giorno (Day 2, Day 3, ecc.)

document.addEventListener('DOMContentLoaded', () => {
  // 1. Collega tutti i campi input[data-save], scelte multiple, note e stato completamento
  window.courseStorage.autoBindLesson(LEVEL, DAY);

  // 2. Inizializza e ripristina tutti i pulsanti vocali (.mic-repeat-btn)
  window.speechEngine.initAllMicRepeatButtons(LEVEL, DAY);
});

Tabella di Mapping: Classi Vietate vs Classi Autorizzate Day 1

Struttura DOM Canonica (Copia & Incolla per Nuove Lezioni)

<!-- HEADER APP -->
<header class="app-header">
  <div class="brand-container">
    <a href="../index.html" class="brand-badge">🇩🇪</a>
    <div><div class="brand-title">Deutsch<span>Meister</span></div></div>
  </div>
  <div class="save-indicator" id="saveIndicator">
    <div class="save-dot"></div><span class="save-text">Autosalvato in locale</span>
  </div>
  <div class="nav-actions">...</div>
</header>

<!-- MAIN WRAPPER OBBLIGATORIO -->
<main class="main-wrapper">
  <div class="lesson-nav-bar">
    <div class="lesson-breadcrumbs">...</div>
    <button id="completeLessonBtn" class="btn btn-primary">Segna come completato</button>
  </div>

  <section class="lesson-hero">
    <span class="lesson-badge">Giorno X • Livello A1</span>
    <h1 class="lesson-title">Titolo della Lezione</h1>
    <p class="lesson-goal"><strong>Obiettivo:</strong> Obiettivo operativo...</p>
  </section>

  <!-- CARD VOCABOLARIO CANONICA (SEZIONE 2: 2 CHILD DIRETTI, FLEX ROW) -->
<div class="vocab-card">
  <div style="flex: 1; min-width: 0;">
    <div class="vocab-german">
      <span class="gender-chip der">der</span> Morgen
    </div>
    <div class="vocab-phonetic">Espressione: <strong>am Morgen</strong></div>
    <div class="vocab-italian">il mattino / la mattina</div>
    <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem;">💡 Nota o esempio contestuale</div>
    <div id="fb_voc_1" class="row-voice-feedback"></div>
  </div>
  <div class="action-btn-group" style="margin-left: 1rem; align-self: flex-start;">
    <button class="audio-btn" data-speak="der Morgen, am Morgen" title="Ascolta">🔊</button>
    <button class="audio-btn mic-repeat-btn" data-target="am Morgen" data-feedback-id="fb_voc_1" title="Ripeti">🎤</button>
  </div>
</div>

<!-- SEZIONI DA 1 A 8: TUTTE <section class="lesson-section"> -->
  <section class="lesson-section" id="sezione-1">
    <div class="section-header">
      <h2 class="section-title"><span class="icon">🎯</span> 1. Titolo Sezione</h2>
    </div>
    <p style="color: var(--text-secondary); margin-bottom: 1.25rem;">Spiegazione chiara...</p>
    ...
  </section>
</main>

Il tutor dialoga con lo studente simulando scenari quotidiani (ordinare al bar, presentarsi a una festa, chiedere informazioni a Berlino).