Lädt...

HTTP Statuscodes für HTML

HTTP Statuscodes sind dreistellige Zahlen, die vom Webserver als Antwort auf eine Anfrage des Browsers gesendet werden. Sie fungieren wie Wegweiser in einem Hausbau oder als klare Beschriftungen in einer Bibliothek, die anzeigen, ob eine Seite erfolgreich geladen wurde, eine Ressource fehlt oder ein Fehler vorliegt. Für Entwickler sind sie essenziell, um sowohl die technische Funktionsfähigkeit einer Webseite als auch die Nutzererfahrung zu optimieren.
Ob auf einer Portfolioseite, einem Blog, einer E-Commerce-Plattform, einer Nachrichtenwebseite oder einem sozialen Netzwerk – HTTP Statuscodes informieren über den Zustand der angeforderten Inhalte. Ein Statuscode 200 zeigt an, dass die Seite fehlerfrei geladen wurde. Ein 404 weist auf eine nicht gefundene Seite hin, während 503 signalisiert, dass der Server vorübergehend nicht erreichbar ist. Richtig eingesetzt helfen diese Codes, Nutzer effektiv zu informieren, Suchmaschinen korrekt zu leiten und Fehler gezielt zu behandeln.
In diesem Tutorial lernen Sie, wie Sie HTML-Seiten gestalten, die passende HTTP Statuscodes visuell kommunizieren, Fehlerseiten nutzerfreundlich aufbauen und Best Practices für semantisches HTML umsetzen. Sie werden verstehen, wie Statuscodes funktionieren, wann und wie sie genutzt werden und welche Fallstricke es zu vermeiden gilt. Wie beim Schreiben eines Briefs oder dem Einrichten eines Raumes, lernen Sie, klare und verständliche Signale an Ihre Besucher zu senden.

Grundlegendes Beispiel

html
HTML Code
<!DOCTYPE html>

<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fehler 404 – Seite nicht gefunden</title>
</head>
<body>
<!-- Display message for HTTP 404 Not Found -->
<h1>Fehler 404: Seite nicht gefunden</h1>
<p>Die angeforderte Seite existiert nicht. Bitte prüfen Sie die URL oder kehren Sie zur <a href="index.html">Startseite</a> zurück.</p>
</body>
</html>

Das obige Beispiel zeigt eine typische Fehlerseite für den HTTP-Statuscode 404. Der Code ist einfach und semantisch korrekt aufgebaut, mit den Grundbausteinen einer HTML-Seite: , und . Das -Element beschreibt den Seiteninhalt für Browser-Tabs und Suchmaschinen. Die Hauptüberschrift <h1> macht den Fehlerstatus klar und sichtbar.<br /> Der Statuscode 404 wird vom Server gesendet, wenn die angefragte Ressource nicht gefunden wird. Die HTML-Seite dient dazu, diese Information für den Benutzer verständlich aufzubereiten. Die Kombination aus prägnanter Fehlermeldung und einem Link zurück zur Startseite sorgt für eine bessere Nutzerführung und verringert Frustration.<br /> Für Anfänger ist wichtig zu verstehen, dass der Server den Statuscode überträgt, die HTML-Seite jedoch den visuellen Kontext liefert. Auf Portfolio- oder Blogseiten verhindert diese Vorgehensweise, dass Nutzer auf „toten“ Seiten hängen bleiben. So verbindet sich serverseitige Statusmeldung mit clientseitiger Benutzerkommunikation.</p> </div> <!-- Enhanced Code Block --> <div class="code-editor-container"> <div class="code-editor-header"> <h3 class="code-title">Praktisches Beispiel</h3> <span class="code-language-badge html">html</span> </div> <div class="code-display"> <div class="code-display-header"> <span>HTML Code</span> <div class="flex flex-col sm:flex-row gap-2"> <button type="button" class="copy-button" onclick="copyStaticCode('code-1067', this)"> 📋 Kopieren </button> <button type="button" class="copy-button bg-green-600 hover:bg-green-700 text-white" onclick="openCodeRunner('html', 'Praktisches Beispiel', 1067)"> 🚀 Live ausprobieren </button> </div> </div> <div class="code-block"> <pre><code id="code-1067" class="language-html"><!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Wartungsmodus – Service vorübergehend nicht verfügbar (503)</title> </head> <body> <!-- Practical example for HTTP 503 Service Unavailable --> <header> <h1>Service vorübergehend nicht verfügbar (503)</h1> </header> <main> <p>Wir führen derzeit Wartungsarbeiten durch. Bitte versuchen Sie es später erneut.</p> <nav> <ul> <li><a href="index.html">Startseite</a></li> <li><a href="kontakt.html">Kontakt</a></li> <li><a href="hilfe.html">Hilfe & FAQ</a></li> </ul> </nav> </main> <footer> <small>&copy; 2025 IhrWebseite</small> </footer> </body> </html></code></pre> </div> </div> </div> <!-- Enhanced Text Block with Smart Links --> <div class="prose prose-lg max-w-none"> <p>Dieses Beispiel illustriert den HTTP-Statuscode 503, der anzeigt, dass der Dienst temporär nicht erreichbar ist, beispielsweise wegen Wartungsarbeiten oder Serverüberlastung. Die Seite ist semantisch korrekt mit <header>, <main>, <nav> und <footer> strukturiert, was nicht nur die Lesbarkeit verbessert, sondern auch die Barrierefreiheit für Hilfsmittel wie Screenreader.<br /> Der klare Hinweis in <h1> und <p> erklärt den Zustand der Seite verständlich für den Nutzer. Die Navigation bietet direkte Alternativen, um die Nutzerführung aufrechtzuerhalten und Abbrüche zu minimieren – entscheidend für E-Commerce- oder Nachrichtenseiten, bei denen Ausfallzeiten die Nutzerbindung stark beeinflussen können.<br /> Solche Statusseiten sind unerlässlich, um professionell mit Ausfällen umzugehen und Besuchern transparente Informationen zu bieten. Die Verbindung von Statuscode und HTML-Seite ist damit ein Kernstück moderner Webentwicklung.</p> </div> <!-- Enhanced Text Block with Smart Links --> <div class="prose prose-lg max-w-none"> <p>Best Practices und häufige Fehler:<br /> Best Practices:</p> <ol> <li>Nutze semantische HTML-Elemente (z.B. <header>, <main>, <nav>, <footer>) für bessere Struktur und Zugänglichkeit.</li> <li>Biete klare und verständliche Fehlermeldungen, die Nutzer anleiten, wie sie weiter vorgehen können.</li> <li>Halte die Seitenstruktur übersichtlich und vermeide zu tief verschachtelte Elemente.</li> <li> <p>Stelle sicher, dass der Server korrekte HTTP Statuscodes zusammen mit der passenden HTML-Seite sendet.<br /> Häufige Fehler:</p> </li> <li> <p>Falsche Statuscodes senden (z.B. 200 OK mit Fehlerseite), was Suchmaschinen und Browser verwirrt.</p> </li> <li>Fehlende semantische Struktur und stattdessen nur <div>-Tags, was Barrierefreiheit mindert.</li> <li>Keine Links oder Handlungsanweisungen auf Fehlerseiten, sodass Nutzer „feststecken“.</li> <li>Fehlerhafte HTML-Syntax, wie nicht geschlossene Tags, die Rendering-Probleme verursachen.<br /> Debugging-Tipps:</li> </ol> <ul> <li>Verwenden Sie Browser-Entwicklertools, um HTTP-Antwortcodes zu überprüfen.</li> <li>Testen Sie Fehlerseiten regelmäßig mit simulierten Statuscodes.</li> <li>Validieren Sie Ihren HTML-Code über Online-Validatoren.<br /> Mit diesen Methoden sichern Sie eine robuste, benutzerfreundliche Fehlerbehandlung.</li> </ul> </div> <!-- Enhanced Reference Table --> <div class="table-responsive"> <div class="bg-white p-6"> <h3 class="text-xl font-semibold mb-4 text-gray-800">📊 Schnelle Referenz</h3> <div class="overflow-x-auto"> <table class="w-full table-auto border-collapse"> <thead> <tr class="bg-gradient-to-r from-gray-50 to-gray-100"> <th class="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">Statuscode</th> <th class="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">Beschreibung</th> <th class="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">Beispiel</th> </tr> </thead> <tbody> <tr class="hover:bg-gray-50 transition-colors"> <td class="border border-gray-300 px-4 py-3 text-gray-600">200 OK</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Anfrage erfolgreich, Seite geladen</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Portfolio-Seite wird korrekt angezeigt</td> </tr> <tr class="hover:bg-gray-50 transition-colors"> <td class="border border-gray-300 px-4 py-3 text-gray-600">301 Moved Permanently</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Dauerhafte Weiterleitung</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Alte Blog-URL wird zur neuen weitergeleitet</td> </tr> <tr class="hover:bg-gray-50 transition-colors"> <td class="border border-gray-300 px-4 py-3 text-gray-600">404 Not Found</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Seite nicht gefunden</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Gelöschter Blogartikel oder Produktseite</td> </tr> <tr class="hover:bg-gray-50 transition-colors"> <td class="border border-gray-300 px-4 py-3 text-gray-600">500 Internal Server Error</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Serverfehler</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Unerwarteter Fehler bei Verarbeitung einer Bestellung</td> </tr> <tr class="hover:bg-gray-50 transition-colors"> <td class="border border-gray-300 px-4 py-3 text-gray-600">503 Service Unavailable</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Service vorübergehend nicht verfügbar</td> <td class="border border-gray-300 px-4 py-3 text-gray-600">Wartung am Server oder Überlastung</td> </tr> </tbody> </table> </div> </div> </div> <!-- Enhanced Text Block with Smart Links --> <div class="prose prose-lg max-w-none"> <p>Zusammenfassung und nächste Schritte:<br /> Sie haben gelernt, welche Bedeutung HTTP Statuscodes für die Benutzerkommunikation und technische Funktionsweise einer Webseite haben. Durch gezielte Gestaltung von HTML-Seiten, die diese Statuscodes begleiten, schaffen Sie transparente, nutzerfreundliche Fehler- und Statusmeldungen.<br /> Der nächste Schritt ist die Integration von CSS, um diese Seiten optisch ansprechend zu gestalten, sowie die Einbindung von JavaScript, um dynamische Funktionen wie automatische Weiterleitungen oder Countdown-Timer zu realisieren. Außerdem sollten Sie sich mit Serverkonfigurationen befassen, um Statuscodes korrekt auszuliefern.<br /> Weiterführende Themen umfassen HTTP-Methoden (GET, POST etc.), REST-API-Design sowie SEO-Optimierung für Statusseiten. Die Kombination von technischem Wissen und Benutzerorientierung ist entscheidend für professionelle Webentwicklung.</p> </div> </div> <!-- Enhanced Quiz Section --> <div class="mb-8"> <h2 class="text-2xl md:text-3xl font-bold mb-6 bg-clip-text"> 🧠 Testen Sie Ihr Wissen </h2> <!-- Modern Quiz Container - Direct Display --> <div id="quiz-container" class="quiz-modern-container"> <!-- Hidden CSRF Token --> <input type="hidden" name="csrfmiddlewaretoken" value="vuOnyKZPFeg5HnqqzMjSecZOFR8IM2bHoipL20OuBRaj1GGDBInc7CIltrigQr4R"> <!-- Quiz Header with Progress --> <div class="quiz-header"> <div class="quiz-progress-wrapper"> <div class="quiz-progress-track"> <div id="quiz-progress-fill" class="quiz-progress-fill"></div> </div> <div class="quiz-progress-info"> <span id="progress-text" class="progress-current">Bereit zum Start</span> <span id="progress-stats" class="progress-stats"></span> </div> </div> <!-- Timer (if applicable) --> <div id="quiz-timer-wrapper" class="quiz-timer-wrapper" style="display: none;"> <div class="timer-icon">⏱️</div> <span id="timer-display" class="timer-display">10:00</span> </div> </div> <!-- Quiz Content Area --> <div class="quiz-content-area"> <!-- Quiz Introduction - Now Always Visible --> <div id="quiz-intro" class="quiz-intro-section"> <div class="quiz-intro-icon"> <div class="icon-circle"> <svg class="brain-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> </div> </div> <h3 class="quiz-intro-title">Testen Sie Ihr Wissen</h3> <p class="quiz-intro-subtitle">Testen Sie Ihr Verständnis dieses Themas mit praktischen Fragen.</p> <!-- Quiz Stats Grid --> <div id="quiz-stats-grid" class="quiz-stats-grid"> <div class="quiz-stat-card"> <span class="stat-icon">❓</span> <div class="stat-value">4</div> <div class="stat-label">Fragen</div> </div> <div class="quiz-stat-card"> <span class="stat-icon">🎯</span> <div class="stat-value">70%</div> <div class="stat-label">Zum Bestehen</div> </div> <div class="quiz-stat-card"> <span class="stat-icon">♾️</span> <div class="stat-value">∞</div> <div class="stat-label">Zeit</div> </div> <div class="quiz-stat-card"> <span class="stat-icon">🔄</span> <div class="stat-value">∞</div> <div class="stat-label">Versuche</div> </div> </div> <!-- Quiz Instructions --> <div class="quiz-instructions"> <h4 class="instructions-title">📝 Anweisungen</h4> <ul class="instructions-list"> <li>Lesen Sie jede Frage sorgfältig</li> <li>Wählen Sie die beste Antwort für jede Frage</li> <li>Sie können das Quiz so oft wiederholen, wie Sie möchten</li> <li>Ihr Fortschritt wird oben angezeigt</li> </ul> </div> <button id="start-quiz-btn" class="quiz-start-button" onclick="startQuiz(47)"> <span class="button-content"> <svg class="button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8"/> </svg> Quiz starten </span> <div class="button-ripple"></div> </button> </div> <!-- Quiz Questions Section --> <div id="quiz-questions" class="quiz-questions-section" style="display: none;"> <!-- Question Header --> <div class="question-header"> <div class="question-meta"> <span id="question-number" class="question-counter">Frage 1</span> <div class="question-type-badge" id="question-type"> <span>📝</span> </div> </div> </div> <!-- Question Content --> <div id="current-question" class="question-content"> <!-- Question will be loaded here --> </div> <!-- Question Actions --> <div class="question-actions"> <button id="submit-answer" class="submit-answer-btn" onclick="submitAnswer()" disabled> <span class="btn-text">Antwort absenden</span> <div class="btn-loader" style="display: none;"> <div class="loader-spinner"></div> </div> </button> </div> </div> <!-- Quiz Results Section --> <div id="quiz-results" class="quiz-results-section" style="display: none;"> <!-- Results will be populated here --> </div> <!-- Loading State --> <div id="quiz-loading" class="quiz-loading-section" style="display: none;"> <div class="loading-animation"> <div class="loading-spinner"></div> <div class="loading-dots"> <span></span> <span></span> <span></span> </div> </div> <p class="loading-text">Ihr Quiz wird geladen...</p> </div> </div> <!-- Error Display --> <div id="quiz-error" class="quiz-error-display" style="display: none;"> <div class="error-content"> <div class="error-icon">⚠️</div> <div class="error-message"></div> <button class="error-close" onclick="hideError()">✕</button> </div> </div> </div> <script> let currentQuiz = null; let currentQuestionIndex = 0; let selectedAnswer = null; let quizTimer = null; let timeRemaining = null; let currentQuestionData = null; let quizSessionData = null; // Store quiz session data for answer sheet function getCsrfToken() { let token = null; const quizContainer = document.getElementById('quiz-container'); if (quizContainer) { const tokenInput = quizContainer.querySelector('input[name="csrfmiddlewaretoken"]'); if (tokenInput) { token = tokenInput.value; } } if (!token) { const tokenInput = document.querySelector('input[name="csrfmiddlewaretoken"]'); if (tokenInput) { token = tokenInput.value; } } if (!token) { const cookieMatch = document.cookie.match(/csrftoken=([^;]+)/); if (cookieMatch) { token = cookieMatch[1]; } } return token; } function startQuiz(topicId) { console.log('Starting quiz for topic:', topicId); // Reset quiz session data quizSessionData = { questions: [], answers: {}, correctAnswers: {}, explanations: {} }; // Show loading showSection('quiz-loading'); updateProgress(0, 'Quiz wird initialisiert...', ''); const csrfToken = getCsrfToken(); if (!csrfToken) { console.error('CSRF token not found'); showError('Security token not found. Please refresh the page.'); showSection('quiz-intro'); return; } const formData = new FormData(); formData.append('csrfmiddlewaretoken', csrfToken); const url = `/de/quiz/${topicId}/start/`; fetch(url, { method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' } }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { if (data.success) { currentQuiz = data.quiz; currentQuestionIndex = 0; // Setup timer if quiz has time limit if (currentQuiz.time_limit) { setupTimer(currentQuiz.time_limit); } // Show quiz questions section showSection('quiz-questions'); // Load first question loadQuestion(data.current_question, data.question_number, data.total_questions); } else { console.error('Quiz start failed:', data.error); showError(data.error || 'Failed to start quiz'); showSection('quiz-intro'); } }) .catch(error => { console.error('Fetch error:', error); showError('Quiz konnte nicht gestartet werden. Bitte versuchen Sie es erneut.'); showSection('quiz-intro'); }); } function loadQuestion(question, questionNumber, totalQuestions) { console.log('Loading question:', question); // Store current question data currentQuestionData = question; // Store question in session data quizSessionData.questions[questionNumber - 1] = question; // Update progress const progressPercent = (questionNumber / totalQuestions) * 100; updateProgress(progressPercent, `Frage ${questionNumber}`, `${questionNumber} von ${totalQuestions}`); // Update question number const questionNumberEl = document.getElementById('question-number'); if (questionNumberEl) { questionNumberEl.textContent = `Frage ${questionNumber}`; } // Update question type badge const questionTypeEl = document.getElementById('question-type'); if (questionTypeEl) { const typeIcons = { 'multiple_choice': '📝', 'true_false': '✅', 'fill_code': '💻' }; questionTypeEl.innerHTML = `<span>${typeIcons[question.type] || '📝'}</span>`; } // Reset selected answer selectedAnswer = null; const submitBtn = document.getElementById('submit-answer'); if (submitBtn) { submitBtn.disabled = true; submitBtn.querySelector('.btn-text').textContent = 'Antwort absenden'; } // Generate question HTML let questionHTML = ` <div class="question-text">${escapeHtml(question.text)}</div> `; // Add code template if exists if (question.code_template && question.code_template.trim()) { questionHTML += ` <div class="code-block"> <pre><code>${escapeHtml(question.code_template)}</code></pre> </div> `; } // Add options questionHTML += '<div class="options-container">'; if (question.options && question.options.length > 0) { question.options.forEach((option, index) => { questionHTML += ` <div class="option-item" onclick="selectOption(${option.id}, this)"> <input type="radio" name="quiz-option" value="${option.id}" style="display: none;"> <div class="option-content"> <div class="option-indicator"></div> <div class="option-text">${escapeHtml(option.text)}</div> </div> </div> `; }); } else { questionHTML += '<p class="error-message">No options available for this question.</p>'; } questionHTML += '</div>'; // Insert question content with animation const questionContainer = document.getElementById('current-question'); if (questionContainer) { questionContainer.style.opacity = '0'; questionContainer.innerHTML = questionHTML; // Animate in setTimeout(() => { questionContainer.style.transition = 'opacity 0.3s ease'; questionContainer.style.opacity = '1'; }, 100); } } function selectOption(optionId, element) { console.log('Option selected:', optionId); selectedAnswer = optionId; // Update visual feedback document.querySelectorAll('.option-item').forEach(item => { item.classList.remove('selected'); }); element.classList.add('selected'); // Enable submit button const submitBtn = document.getElementById('submit-answer'); if (submitBtn) { submitBtn.disabled = false; } } function submitAnswer() { if (!selectedAnswer || !currentQuestionData) { console.log('No answer selected or no question data'); return; } console.log('Submitting answer:', selectedAnswer, 'for question:', currentQuestionData.id); // Store user answer in session data quizSessionData.answers[currentQuestionData.id] = { selectedOptionId: selectedAnswer, selectedOptionText: getSelectedOptionText(selectedAnswer) }; const submitBtn = document.getElementById('submit-answer'); if (!submitBtn) return; // Show loading state submitBtn.disabled = true; submitBtn.querySelector('.btn-text').style.opacity = '0'; submitBtn.querySelector('.btn-loader').style.display = 'block'; const csrfToken = getCsrfToken(); if (!csrfToken) { console.error('CSRF token not found for submit'); showError('Security token not found. Please refresh the page.'); resetSubmitButton(submitBtn); return; } const formData = new FormData(); formData.append('question_id', currentQuestionData.id); formData.append('selected_option', selectedAnswer); formData.append('csrfmiddlewaretoken', csrfToken); const url = `/de/quiz/${currentQuiz.id}/submit/`; fetch(url, { method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' } }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { if (data.success) { if (data.completed) { // Quiz completed - load results loadQuizResults(data.redirect_url); } else { // Load next question setTimeout(() => { loadQuestion(data.current_question, data.question_number, data.total_questions); resetSubmitButton(submitBtn); }, 500); } } else { console.error('Submit failed:', data.error); showError(data.error || 'Failed to submit answer'); resetSubmitButton(submitBtn); } }) .catch(error => { console.error('Submit fetch error:', error); showError('Antwort konnte nicht übermittelt werden. Bitte versuchen Sie es erneut.'); resetSubmitButton(submitBtn); }); } function getSelectedOptionText(optionId) { if (!currentQuestionData || !currentQuestionData.options) return ''; const option = currentQuestionData.options.find(opt => opt.id == optionId); return option ? option.text : ''; } function loadQuizResults(resultUrl) { console.log('Loading results from:', resultUrl); // Show loading while fetching results showSection('quiz-loading'); updateProgress(100, 'Calculating Results...', 'Bitte warten'); fetch(resultUrl, { headers: { 'HX-Request': 'true' } }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.text(); }) .then(html => { // Parse the results and extract detailed information const tempDiv = document.createElement('div'); tempDiv.innerHTML = html; // Extract score data from the response const scoreElement = tempDiv.querySelector('.score-percentage') || tempDiv.querySelector('[data-score]'); let scoreValue = 0; if (scoreElement) { const scoreText = scoreElement.textContent || scoreElement.getAttribute('data-score') || '0'; scoreValue = parseInt(scoreText.replace('%', '')) || 0; } const correctElement = tempDiv.querySelector('.correct-answers') || tempDiv.querySelector('[data-correct]'); let correctAnswers = 0; if (correctElement) { const correctText = correctElement.textContent || correctElement.getAttribute('data-correct') || '0'; correctAnswers = parseInt(correctText) || 0; } const totalElement = tempDiv.querySelector('.total-questions') || tempDiv.querySelector('[data-total]'); let totalQuestions = currentQuiz.total_questions || 0; if (totalElement) { const totalText = totalElement.textContent || totalElement.getAttribute('data-total') || '0'; totalQuestions = parseInt(totalText) || totalQuestions; } // Extract detailed question results extractQuestionResults(tempDiv); displayResults(scoreValue, correctAnswers, totalQuestions); // Stop timer if running if (quizTimer) { clearInterval(quizTimer); hideTimer(); } }) .catch(error => { console.error('Results fetch error:', error); showError('Ergebnisse konnten nicht geladen werden. Bitte aktualisieren Sie die Seite.'); showSection('quiz-questions'); }); } function extractQuestionResults(resultContainer) { // Extract detailed results from the Django-generated HTML const questionContainers = resultContainer.querySelectorAll('.border-b, .border'); questionContainers.forEach((container, index) => { try { // Extract question text const questionTextEl = container.querySelector('p.text-gray-700, .text-gray-700'); const questionText = questionTextEl ? questionTextEl.textContent.trim() : `Question ${index + 1}`; // Extract correct/incorrect status const correctSpan = container.querySelector('.bg-green-100'); const incorrectSpan = container.querySelector('.bg-red-100'); const isCorrect = correctSpan !== null; // Extract user's answer let userAnswer = ''; const userAnswerSpans = container.querySelectorAll('.text-red-600, .text-green-600'); for (let span of userAnswerSpans) { const text = span.textContent; if (text.includes('Your answer:')) { userAnswer = text.replace('Your answer:', '').trim(); break; } } // Extract correct answer let correctAnswer = ''; const greenSpans = container.querySelectorAll('.text-green-600'); for (let span of greenSpans) { const text = span.textContent.trim(); const parentText = span.parentElement ? span.parentElement.textContent : ''; // Check if this span contains "Correct answer:" in its parent context if (parentText.includes('Correct answer:') && !text.includes('Your answer:')) { // Extract only the answer part after "Correct answer:" const parts = parentText.split('Correct answer:'); if (parts.length > 1) { correctAnswer = parts[1].split('Explanation:')[0].trim(); break; } } } // Fallback: if still empty, use user answer for correct questions if (!correctAnswer && isCorrect) { correctAnswer = userAnswer; } // Extract explanation let explanation = ''; const explanationEl = container.querySelector('.bg-blue-50 p'); if (explanationEl) { explanation = explanationEl.textContent.replace('Explanation:', '').trim(); } // Store in session data const questionId = quizSessionData.questions[index] ? quizSessionData.questions[index].id : index + 1; quizSessionData.correctAnswers[questionId] = { isCorrect: isCorrect, correctAnswer: correctAnswer, explanation: explanation, questionText: questionText }; } catch (error) { console.error('Error extracting question result:', error); } }); } function displayResults(scoreValue, correctAnswers, totalQuestions) { const passed = scoreValue >= (currentQuiz.passing_score || 70); const resultsSection = document.getElementById('quiz-results'); if (!resultsSection) return; resultsSection.innerHTML = ` <div class="result-header"> <div class="result-status-icon ${passed ? 'passed' : 'failed'}"> ${passed ? '🎉' : '📚'} </div> <h3 class="result-title"> ${passed ? 'Herzlichen Glückwunsch!' : 'Weiter lernen!'} </h3> <p class="result-subtitle"> ${passed ? 'Sie haben das Quiz bestanden!' : 'Sie können es besser. Versuchen Sie es erneut!'} </p> </div> <div class="score-display"> <div class="score-percentage ${passed ? 'passed' : 'failed'}">${scoreValue}%</div> <div class="score-details"> ${correctAnswers} von ${totalQuestions} richtig </div> <div class="score-bar"> <div class="score-fill" style="width: 0%"></div> </div> <div style="margin-top: 1rem; font-size: 0.875rem; opacity: 0.8;"> Bestehensgrenze: ${currentQuiz.passing_score || 70}% </div> </div> <div class="result-actions"> <button class="result-btn primary" onclick="retakeQuiz()"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/> </svg> Quiz wiederholen </button> <button class="result-btn secondary" onclick="toggleAnswerSheet()" id="view-answers-btn"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> </svg> Antworten anzeigen </button> <button class="result-btn secondary" onclick="closeQuiz()"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> </svg> Schließen </button> </div> <!-- Answer Sheet Section --> <div id="answer-sheet" class="answer-sheet-section" style="display: none;"> <div class="answer-sheet-header"> <h4>📋 Antwortbogen</h4> <button class="close-answer-sheet" onclick="toggleAnswerSheet()">✕</button> </div> <div id="answer-sheet-content" class="answer-sheet-content"> Antworten werden geladen... </div> </div> `; // Show results section showSection('quiz-results'); updateProgress(100, 'Quiz abgeschlossen!', `${scoreValue}% Punktzahl`); // Animate score bar setTimeout(() => { const scoreFill = resultsSection.querySelector('.score-fill'); if (scoreFill) { scoreFill.style.width = `${scoreValue}%`; } }, 500); } // Answer sheet functions function toggleAnswerSheet() { const answerSheet = document.getElementById('answer-sheet'); const btn = document.getElementById('view-answers-btn'); if (answerSheet.style.display === 'none' || answerSheet.style.display === '') { answerSheet.style.display = 'block'; loadAnswerSheet(); btn.innerHTML = ` <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> </svg> Antworten verbergen `; } else { answerSheet.style.display = 'none'; btn.innerHTML = ` <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> </svg> Antworten anzeigen `; } } function loadAnswerSheet() { const answerSheetContent = document.getElementById('answer-sheet-content'); if (!answerSheetContent || !quizSessionData) return; let correctCount = 0; let incorrectCount = 0; let answerSheetHTML = ` <div class="answer-summary"> <div class="summary-stat total"> <div class="number">${currentQuiz.total_questions || 0}</div> <div class="label">Gesamte Fragen</div> </div> <div class="summary-stat correct"> <div class="number" id="correct-count">0</div> <div class="label">Richtig</div> </div> <div class="summary-stat incorrect"> <div class="number" id="incorrect-count">0</div> <div class="label">Falsch</div> </div> </div> <div class="answer-grid"> `; // Generate answer sheet for each question quizSessionData.questions.forEach((question, index) => { if (!question) return; const questionId = question.id; const userAnswer = quizSessionData.answers[questionId]; const correctInfo = quizSessionData.correctAnswers[questionId]; if (!userAnswer || !correctInfo) return; const isCorrect = correctInfo.isCorrect; if (isCorrect) { correctCount++; } else { incorrectCount++; } answerSheetHTML += ` <div class="answer-item ${isCorrect ? 'correct' : 'incorrect'}"> <div class="question-number">Q${index + 1}</div> <div class="question-details"> <div class="question-text">${escapeHtml(correctInfo.questionText || question.text)}</div> <div class="answer-comparison"> <div class="user-answer"> <span class="label">Your Answer:</span> <span class="value ${isCorrect ? 'correct' : 'incorrect'}">${escapeHtml(userAnswer.selectedOptionText)}</span> </div> ${!isCorrect ? ` <div class="correct-answer"> <span class="label">Correct Answer:</span> <span class="value correct">${escapeHtml(correctInfo.correctAnswer)}</span> </div> ` : ''} ${correctInfo.explanation ? ` <div class="explanation"> <span class="label">Erklärung:</span> <span class="explanation-text">${escapeHtml(correctInfo.explanation)}</span> </div> ` : ''} </div> </div> <div class="result-icon"> ${isCorrect ? '✅' : '❌'} </div> </div> `; }); answerSheetHTML += '</div>'; answerSheetContent.innerHTML = answerSheetHTML; // Update summary counts document.getElementById('correct-count').textContent = correctCount; document.getElementById('incorrect-count').textContent = incorrectCount; } function retakeQuiz() { // Reset quiz state currentQuiz = null; currentQuestionIndex = 0; selectedAnswer = null; currentQuestionData = null; quizSessionData = null; if (quizTimer) { clearInterval(quizTimer); hideTimer(); } // Show intro section showSection('quiz-intro'); updateProgress(0, 'Bereit zum Start', ''); } function closeQuiz() { // Just reset and hide for now since we're directly displaying retakeQuiz(); } function showSection(sectionId) { const sections = ['quiz-intro', 'quiz-questions', 'quiz-results', 'quiz-loading']; sections.forEach(id => { const element = document.getElementById(id); if (element) { element.style.display = id === sectionId ? 'block' : 'none'; } }); } function updateProgress(percentage, currentText, statsText) { const progressFill = document.getElementById('quiz-progress-fill'); const progressText = document.getElementById('progress-text'); const progressStats = document.getElementById('progress-stats'); if (progressFill) { progressFill.style.width = `${percentage}%`; } if (progressText) { progressText.textContent = currentText; } if (progressStats) { progressStats.textContent = statsText; } } function setupTimer(timeLimit) { const timerWrapper = document.getElementById('quiz-timer-wrapper'); const timerDisplay = document.getElementById('timer-display'); if (!timerWrapper || !timerDisplay) return; timeRemaining = timeLimit * 60; // Convert to seconds timerWrapper.style.display = 'flex'; quizTimer = setInterval(() => { const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`; // Warning when time is running out if (timeRemaining <= 60) { timerWrapper.style.color = '#ef4444'; timerWrapper.style.animation = 'pulse 1s infinite'; } if (timeRemaining <= 0) { clearInterval(quizTimer); if (selectedAnswer) { submitAnswer(); } else { showError('Zeit ist um! Das Quiz wird automatisch übermittelt.'); } } timeRemaining--; }, 1000); } function hideTimer() { const timerWrapper = document.getElementById('quiz-timer-wrapper'); if (timerWrapper) { timerWrapper.style.display = 'none'; } } function resetSubmitButton(button) { if (!button) return; button.disabled = false; button.querySelector('.btn-text').style.opacity = '1'; button.querySelector('.btn-loader').style.display = 'none'; } function showError(message) { console.log('Showing error:', message); const errorDisplay = document.getElementById('quiz-error'); if (!errorDisplay) return; const errorMessage = errorDisplay.querySelector('.error-message'); if (errorMessage) { errorMessage.textContent = message; } errorDisplay.style.display = 'block'; // Auto-hide after 5 seconds setTimeout(() => { hideError(); }, 5000); } function hideError() { const errorDisplay = document.getElementById('quiz-error'); if (errorDisplay) { errorDisplay.style.display = 'none'; } } function escapeHtml(unsafe) { if (typeof unsafe !== 'string') { return unsafe; } return unsafe .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } // Initialize quiz when page loads document.addEventListener('DOMContentLoaded', function() { // Quiz is now directly visible, no need for showQuiz() function console.log('Quiz components loaded'); }); // HTMX after-swap event document.body.addEventListener('htmx:afterSwap', function() { // Reinitialize quiz if it exists on the swapped content console.log('Quiz components reloaded after HTMX swap'); }); </script> </div> <!-- Enhanced Navigation --> <div class="topic-navigation"> <div class="nav-links"> <a href="/de/html/html-entities-reference/" class="nav-link prev" hx-get="/de/html/html-entities-reference/" hx-target="#topic-content" hx-push-url="true" aria-label="Zum vorherigen Thema gehen"> ← Vorherige </a> <div class="nav-center"> <div class="text-sm font-semibold">Thema 47 von 51</div> <div class="text-xs mt-1 opacity-75">Html Tutorial</div> </div> <a href="/de/html/html-troubleshooting/" class="nav-link next" hx-get="/de/html/html-troubleshooting/" hx-target="#topic-content" hx-push-url="true" aria-label="Zum nächsten Thema gehen"> Nächste → </a> </div> </div> </div> <script> const sessionKey = `code_session_${codeExampleId}`; // Smart Link Click Tracking document.addEventListener('click', function(event) { const smartLink = event.target.closest('.smart-link'); if (smartLink) { const keywordId = smartLink.getAttribute('data-keyword-id'); if (keywordId) { // Track click asynchronously fetch('/de/api/smart-link-click/', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': 'vuOnyKZPFeg5HnqqzMjSecZOFR8IM2bHoipL20OuBRaj1GGDBInc7CIltrigQr4R' }, body: JSON.stringify({ keyword_id: keywordId, source_content_type: 'topic', source_content_id: 47, user_agent: navigator.userAgent }) }).catch(error => { console.debug('Smart link tracking failed:', error); }); } } }); function openCodeRunner(language, title, codeExampleId) { const codeElement = document.getElementById('code-' + codeExampleId); const code = codeElement.textContent; const formData = new FormData(); formData.append('language', language); formData.append('title', title); formData.append('code', code); formData.append('source_example_id', codeExampleId); formData.append('csrfmiddlewaretoken', 'vuOnyKZPFeg5HnqqzMjSecZOFR8IM2bHoipL20OuBRaj1GGDBInc7CIltrigQr4R'); fetch('/de/create-code-session/', { method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' } }) .then(response => response.json()) .then(data => { if (data.success) { window.open(data.url, '_blank'); } else { console.error('Error creating session:', data.error); window.open('/de/try-it/' + language + '/', '_blank'); } }) .catch(error => { console.error('Error:', error); window.open('/de/try-it/' + language + '/', '_blank'); }); } document.body.addEventListener('htmx:afterSwap', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); if (typeof Prism !== 'undefined') { Prism.highlightAll(); } if (typeof populateQuizStats === 'function') { populateQuizStats(); } if (window.mobileMenu && window.mobileMenu.isMenuOpen && window.mobileMenu.isMenuOpen()) { window.mobileMenu.forceClose(); } initializeEnhancedFeatures(); }); function initializeEnhancedFeatures() { document.querySelectorAll('.nav-link, .custom-sidebar-item').forEach(link => { link.addEventListener('click', function() { if (this.hasAttribute('hx-get')) { this.classList.add('loading'); setTimeout(() => { this.classList.remove('loading'); }, 1000); } }); }); document.querySelectorAll('.code-block pre').forEach(pre => { const code = pre.querySelector('code'); if (code && code.textContent.split('\n').length > 3) { pre.classList.add('line-numbers'); } }); } document.addEventListener('DOMContentLoaded', function() { initializeEnhancedFeatures(); if (typeof Prism !== 'undefined') { Prism.highlightAll(); } document.body.addEventListener('htmx:beforeRequest', function(event) { const target = event.target; if (target.classList.contains('nav-link') || target.classList.contains('custom-sidebar-item')) { target.style.opacity = '0.7'; target.style.pointerEvents = 'none'; } }); document.body.addEventListener('htmx:afterRequest', function(event) { const target = event.target; if (target.classList.contains('nav-link') || target.classList.contains('custom-sidebar-item')) { target.style.opacity = '1'; target.style.pointerEvents = 'auto'; } }); }); window.addEventListener('error', function(event) { console.error('JavaScript error:', event.error); if (window.innerWidth <= 768) { const errorDiv = document.createElement('div'); errorDiv.className = 'fixed top-4 left-4 right-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg z-50 shadow-lg'; errorDiv.innerHTML = ` <div class="flex items-center justify-between"> <div class="flex items-center"> <span class="text-red-500 mr-2">⚠️</span> <span><strong>Fehler:</strong> Etwas ist schief gelaufen. Bitte aktualisieren Sie die Seite.</span> </div> <button onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700 ml-2">✕</button> </div> `; document.body.appendChild(errorDiv); setTimeout(() => { if (errorDiv.parentElement) { errorDiv.remove(); } }, 5000); } }); const style = document.createElement('style'); style.textContent = ` @keyframes ripple { to { transform: scale(4); opacity: 0; } } .copy-button { position: relative; overflow: hidden; } `; document.head.appendChild(style); </script> </main> </div> <!-- Include Footer --> <footer class="bg-gray-900 text-white"> <div class=""> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 grid grid-cols-2 md:grid-cols-6 gap-8"> <!-- Frontend Development --> <div> <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Frontend</h3> <ul class="space-y-1"> <li><a href="/de/html/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">HTML Tutorial</a></li> <li><a href="/de/css/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">CSS Complete Guide</a></li> <li><a href="/de/javascript/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">JavaScript Fundamentals</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">React Development</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Vue.js Framework</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Angular Framework</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">TypeScript Guide</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Bootstrap Framework</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Tailwind CSS</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Sass & SCSS</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">jQuery Library</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Web Components</a></li> </ul> </div> <!-- Backend Development --> <div> <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Backend</h3> <ul class="space-y-1"> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Python Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Django Framework</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Flask Framework</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Node.js Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Express.js Framework</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">PHP Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Laravel Framework</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Java Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Spring Boot</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">C# Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">ASP.NET Core</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Ruby on Rails</a></li> </ul> </div> <!-- Database Programming --> <div> <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Datenbank</h3> <ul class="space-y-1"> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">SQL Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">MySQL Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">PostgreSQL Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">MongoDB Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Redis Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">SQLite Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Database Design</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">SQL Server Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Oracle Database</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">MariaDB Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Firebase Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Elasticsearch Tutorial</a></li> </ul> </div> <!-- Mobile Development --> <div> <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Mobil</h3> <ul class="space-y-1"> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">React Native Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Flutter Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Dart Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">iOS Swift Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">SwiftUI Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Android Kotlin</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Android Java</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Xamarin Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Ionic Framework</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">PhoneGap Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Progressive Web Apps</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Mobile UI Design</a></li> </ul> </div> <!-- Advanced Topics --> <div> <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Fortgeschritten</h3> <ul class="space-y-1"> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Data Structures</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Algorithms Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Object Oriented Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Design Patterns</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">API Development</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">REST API Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">GraphQL Tutorial</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Microservices</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Machine Learning</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Artificial Intelligence</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Blockchain Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Game Development</a></li> </ul> </div> <!-- Programming Languages --> <div> <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Programmiersprachen</h3> <ul class="space-y-1"> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">C Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">C++ Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Go Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Rust Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Ruby Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Scala Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Kotlin Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">R Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">MATLAB Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Perl Programming</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Assembly Language</a></li> <li><a href="#" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Lua Programming</a></li> </ul> </div> </div> <!-- Brand Section --> <div class="border-t border-gray-800 mt-12 pt-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center"> <div class="flex flex-col items-center text-center mb-6 md:mb-0"> <img src="/static/images/logo.6fecbe0a2cbf.png" alt="Mrebi Logo" class="h-12 w-auto object-contain mb-2"> <div> <p class="text-sm text-gray-400 mt-1">Lernen, Üben, Meistern</p> </div> </div> <div class="text-center md:text-right"> <div class="flex flex-wrap justify-center md:justify-end gap-6 mb-4"> <a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Über uns</a> <a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Kontakt</a> <a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Datenschutzrichtlinie</a> <a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Nutzungsbedingungen</a> <a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Blog</a> </div> <div class="text-gray-400"> <p class="text-sm mb-2"> Meistern Sie das Programmieren mit interaktiven Tutorials und praktischen Übungen </p> <p class="text-xs"> © 2025 Mrebi. Alle Rechte vorbehalten. </p> </div> </div> </div> <!-- Social Links --> <div class="mt-8 pt-6 border-t border-gray-800 text-center"> <div class="flex justify-center space-x-6 "> <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors" aria-label="GitHub"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </a> <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors" aria-label="Twitter"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/> </svg> </a> <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors" aria-label="Discord"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/> </svg> </a> <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors" aria-label="YouTube"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/> </svg> </a> <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors" aria-label="LinkedIn"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> </svg> </a> </div> <p class="text-xs text-gray-500 mt-4"> Treten Sie unserer Gemeinschaft bei und beginnen Sie noch heute Ihre Programmierreise! </p> </div> </div> </div> </footer> <!-- Prism.js for Syntax Highlighting --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-html.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script> <!-- Theme Switcher --> <script src="/static/js/theme-switcher.b9d4d05ba1fb.js"></script> <!-- Custom JavaScript --> <script src="/static/js/code-editor.7d90db52a977.js"></script> <script src="/static/js/code-runner.9349a2537311.js"></script> <script src="/static/js/mobile-menu.b685f211e4ca.js"></script> <script> // Mobile menu toggle function toggleMobileMenu() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); } // Enhanced language switcher function changeLanguage(languageCode) { const changeUrl = `/de/change-language/?language=${languageCode}`; if (typeof htmx !== 'undefined') { htmx.ajax('GET', changeUrl, { headers: { 'HX-Request': 'true' } }).then(function(response) { if (response.redirect) { window.location.href = response.redirect; } }); } else { window.location.href = changeUrl; } } // HTMX event listeners document.body.addEventListener('htmx:beforeRequest', function(evt) { document.getElementById('loading-indicator').style.display = 'block'; }); document.body.addEventListener('htmx:afterRequest', function(evt) { document.getElementById('loading-indicator').style.display = 'none'; }); document.body.addEventListener('htmx:afterSwap', function(evt) { // Reinitialize Prism.js highlighting if (typeof Prism !== 'undefined') { Prism.highlightAll(); } // Close mobile menu const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenu && !mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } // Scroll to top for new content window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Smooth scroll for anchor links document.addEventListener('click', function(e) { if (e.target.matches('a[href^="#"]')) { e.preventDefault(); const target = document.querySelector(e.target.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } }); // Initialize on page load document.addEventListener('DOMContentLoaded', function() { // Initialize Prism.js if (typeof Prism !== 'undefined') { Prism.highlightAll(); } // Hide loading indicator document.getElementById('loading-indicator').style.display = 'none'; // RTL adjustments if (window.siteConfig.isRTL) { document.body.classList.add('rtl'); } }); </script> <!-- Block for additional JavaScript --> <!-- Analytics (add your tracking code here) --> <!-- Add Google Analytics, Plausible, or other analytics scripts here --> </body> </html>