Tutorial Demo - Alle neuen Features

Willkommen! Dieser Artikel zeigt alle neuen Tutorial-Features im W3Schools-Style.

Was ist neu?

🎯 Challenge-Komponente - Interaktive Übungsaufgaben 📊 Tutorial-Progress - Bessere Fortschrittsanzeige ✨ Mehr Interaktivität - Noch mehr Live-Editoren

Feature 1: Interaktive Challenges

Challenges sind praktische Übungsaufgaben wo du selbst Code schreiben musst!

<!-- Schreibe deinen Code hier -->
<button>Klick mich</button>

Vorteile:

• ✅ Leerer/Starter Code
• ✅ Hinweise zum Aufdecken
• ✅ Lösung anzeigen
• ✅ Live-Vorschau
• ✅ Schwierigkeitsgrade

Feature 2: Fortschrittsanzeige

Schau nach oben - siehst du den Fortschrittsbalken? 📊

Der zeigt dir:

• Lektion X von Y
• Fortschritt in %
• Bleibt beim Scrollen sichtbar (sticky)

Feature 3: Mehr Challenges

<h1 id="titel">Ändere meine Farbe!</h1>
<button onclick="">Farbe ändern</button>

<script>
  // Dein Code hier

</script>

Feature 4: Noch eine Challenge

<input id="textfeld" placeholder="Tippe hier...">
<p id="counter">0 Zeichen</p>

<script>
  // Dein Code hier

</script>

Feature 5: Kombiniert mit Quiz

Du kannst Challenges und Quiz kombinieren:

Feature 6: Standard Editor (wie vorher)

Du kannst natürlich auch normale AdvancedCodeEditor weiter nutzen:

<div style="padding: 20px; background: linear-gradient(to right, #667eea, #764ba2); color: white; border-radius: 10px; text-align: center;">
    <h2>🎨 Stylischer Container</h2>
    <p>Bearbeite den Code und sieh dir die Änderungen an!</p>
    <button style="padding: 10px 20px; background: white; color: #667eea; border: none; border-radius: 5px; cursor: pointer;">Click me!</button>
</div>

Feature 7: Tutorial-Navigation

Schau nach unten - am Ende des Artikels siehst du:

• ✅ Glückwunsch-Nachricht
• ✅ Vorherige/Nächste Lektion Karten
• ✅ Schönes Design
• ✅ Modul-Übersicht Link

Zusammenfassung

Neue Features:

1. 🎯 Challenge - Interaktive Übungsaufgaben mit Hints
2. 📊 TutorialProgress - Sticky Fortschrittsbalken
3. 🎨 Bessere Navigation - Schöne Prev/Next Karten
4. ✨ Mehr Interaktivität - Kombination mit Quiz

Wie nutzen?

Challenges in deinen MDX-Artikeln:

```jsx

// Start Code

```

Nächste Schritte

Probiere es aus:

• Scrolle hoch - sieh den Fortschrittsbalken
• Löse die Challenges
• Klick auf "Nächste Lektion" unten

Viel Erfolg! 🚀