{"id":24,"date":"2025-03-07T10:57:26","date_gmt":"2025-03-07T10:57:26","guid":{"rendered":"http:\/\/formel40.de\/?p=24"},"modified":"2025-03-07T10:57:26","modified_gmt":"2025-03-07T10:57:26","slug":"testbeitrag","status":"publish","type":"post","link":"https:\/\/formel40.de\/?p=24","title":{"rendered":"Testbeitrag"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Buchungstrainer - Absatzvorg\u00e4nge im Umlaufverm\u00f6gen<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            line-height: 1.6;\n            margin: 0;\n            padding: 20px;\n            background-color: #f5f5f5;\n        }\n        .container {\n            max-width: 1000px;\n            margin: 0 auto;\n            background-color: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 0 10px rgba(0,0,0,0.1);\n        }\n        h1 {\n            color: #2c3e50;\n            text-align: center;\n            margin-bottom: 30px;\n        }\n        h2 {\n            color: #3498db;\n            border-bottom: 2px solid #3498db;\n            padding-bottom: 5px;\n        }\n        .exercise {\n            margin-bottom: 30px;\n            padding: 15px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n            background-color: #f9f9f9;\n        }\n        .exercise-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 10px;\n        }\n        .exercise-title {\n            font-weight: bold;\n            font-size: 1.2em;\n            color: #2c3e50;\n        }\n        .exercise-difficulty {\n            background-color: #3498db;\n            color: white;\n            padding: 3px 8px;\n            border-radius: 3px;\n            font-size: 0.8em;\n        }\n        .difficulty-1 { background-color: #2ecc71; }\n        .difficulty-2 { background-color: #f39c12; }\n        .difficulty-3 { background-color: #e74c3c; }\n        .exercise-content {\n            margin-bottom: 15px;\n        }\n        .booking-form {\n            margin-bottom: 15px;\n        }\n        .booking-container {\n            display: flex;\n            flex-direction: column;\n            gap: 15px;\n            margin-bottom: 15px;\n        }\n        .booking-row {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n        .account-container {\n            flex: 1;\n            min-height: 40px;\n            border: 1px dashed #3498db;\n            border-radius: 4px;\n            padding: 8px;\n            background-color: #f8f9fa;\n            display: flex;\n            align-items: center;\n        }\n        .account-container.highlight {\n            background-color: #e8f4f8;\n            border: 1px dashed #2980b9;\n        }\n        .amount-input {\n            width: 120px;\n            padding: 8px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n        }\n        .add-row-btn {\n            background-color: #2ecc71;\n            color: white;\n            border: none;\n            border-radius: 50%;\n            width: 30px;\n            height: 30px;\n            cursor: pointer;\n            font-weight: bold;\n            font-size: 18px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .remove-row-btn {\n            background-color: #e74c3c;\n            color: white;\n            border: none;\n            border-radius: 50%;\n            width: 24px;\n            height: 24px;\n            cursor: pointer;\n            font-weight: bold;\n            font-size: 14px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-left: 5px;\n        }\n        .book-btn {\n            padding: 10px;\n            background-color: #3498db;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-weight: bold;\n            width: 100%;\n            margin-top: 10px;\n        }\n        .book-btn:hover {\n            background-color: #2980b9;\n        }\n        .feedback {\n            margin-top: 10px;\n            padding: 10px;\n            border-radius: 4px;\n            display: none;\n        }\n        .feedback.correct {\n            background-color: #d4edda;\n            color: #155724;\n            border: 1px solid #c3e6cb;\n        }\n        .feedback.incorrect {\n            background-color: #f8d7da;\n            color: #721c24;\n            border: 1px solid #f5c6cb;\n        }\n        .solution {\n            margin-top: 10px;\n            display: none;\n            padding: 10px;\n            background-color: #e8f4f8;\n            border: 1px solid #b8daff;\n            border-radius: 4px;\n        }\n        .controls {\n            display: flex;\n            justify-content: space-between;\n        }\n        .controls button {\n            padding: 8px 15px;\n            background-color: #6c757d;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n        }\n        .controls button:hover {\n            background-color: #5a6268;\n        }\n        .progress-container {\n            margin: 20px 0;\n            background-color: #e9ecef;\n            border-radius: 4px;\n            height: 20px;\n            overflow: hidden;\n        }\n        .progress-bar {\n            height: 100%;\n            background-color: #3498db;\n            width: 0%;\n            transition: width 0.3s ease;\n        }\n        .stats {\n            display: flex;\n            justify-content: space-around;\n            margin-bottom: 20px;\n        }\n        .stat-box {\n            text-align: center;\n            padding: 10px;\n            background-color: #e9ecef;\n            border-radius: 4px;\n            min-width: 100px;\n        }\n        .stat-value {\n            font-size: 1.5em;\n            font-weight: bold;\n            color: #2c3e50;\n        }\n        .accounts-panel {\n            margin-bottom: 20px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            padding: 10px;\n            background-color: #f1f1f1;\n        }\n        .accounts-panel h3 {\n            margin-top: 0;\n            margin-bottom: 10px;\n            color: #2c3e50;\n        }\n        .accounts-list {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n        }\n        .account-item {\n            padding: 6px 12px;\n            background-color: #3498db;\n            color: white;\n            border-radius: 4px;\n            cursor: grab;\n            user-select: none;\n        }\n        .account-item.aktiv { background-color: #2ecc71; }\n        .account-item.passiv { background-color: #e74c3c; }\n        .account-item.ertrag { background-color: #9b59b6; }\n        .account-item.aufwand { background-color: #f39c12; }\n        .account-placeholder {\n            color: #888;\n            font-style: italic;\n        }\n        .dragging {\n            opacity: 0.5;\n        }\n        .tab {\n            overflow: hidden;\n            border: 1px solid #ccc;\n            background-color: #f1f1f1;\n            border-radius: 4px 4px 0 0;\n        }\n        .tab button {\n            background-color: inherit;\n            float: left;\n            border: none;\n            outline: none;\n            cursor: pointer;\n            padding: 10px 16px;\n            transition: 0.3s;\n        }\n        .tab button:hover {\n            background-color: #ddd;\n        }\n        .tab button.active {\n            background-color: #3498db;\n            color: white;\n        }\n        .tabcontent {\n            display: none;\n            padding: 15px;\n            border: 1px solid #ccc;\n            border-top: none;\n            border-radius: 0 0 4px 4px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1>Buchungstrainer - Absatzvorg\u00e4nge im Umlaufverm\u00f6gen<\/h1>\n        \n        <div class=\"tab\">\n            <button class=\"tablinks active\" onclick=\"openTab(event, 'trainer')\">Buchungstrainer<\/button>\n            <button class=\"tablinks\" onclick=\"openTab(event, 'theory')\">Theorie<\/button>\n            <button class=\"tablinks\" onclick=\"openTab(event, 'help')\">Hilfe<\/button>\n        <\/div>\n        \n        <div id=\"trainer\" class=\"tabcontent\" style=\"display: block;\">\n            <div class=\"stats\">\n                <div class=\"stat-box\">\n                    <div>Bearbeitet<\/div>\n                    <div class=\"stat-value\" id=\"completed-count\">0\/0<\/div>\n                <\/div>\n                <div class=\"stat-box\">\n                    <div>Richtig<\/div>\n                    <div class=\"stat-value\" id=\"correct-count\">0<\/div>\n                <\/div>\n                <div class=\"stat-box\">\n                    <div>Falsch<\/div>\n                    <div class=\"stat-value\" id=\"incorrect-count\">0<\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"progress-container\">\n                <div class=\"progress-bar\" id=\"progress-bar\"><\/div>\n            <\/div>\n            \n            <div class=\"accounts-panel\">\n                <h3>Konten zum Ziehen<\/h3>\n                <div class=\"accounts-list\" id=\"accounts-list\">\n                    <!-- Wird dynamisch gef\u00fcllt -->\n                <\/div>\n            <\/div>\n            \n            <div id=\"exercise-container\" class=\"exercise\">\n                <!-- Hier werden die \u00dcbungen dynamisch eingef\u00fcgt -->\n            <\/div>\n            \n            <div class=\"controls\">\n                <button id=\"prev-btn\" onclick=\"previousExercise()\" disabled>Zur\u00fcck<\/button>\n                <button id=\"solution-btn\" onclick=\"toggleSolution()\">L\u00f6sung anzeigen<\/button>\n                <button id=\"next-btn\" onclick=\"nextExercise()\">Weiter<\/button>\n            <\/div>\n        <\/div>\n        \n        <div id=\"theory\" class=\"tabcontent\">\n            <h2>Theorie: Absatzvorg\u00e4nge im Umlaufverm\u00f6gen<\/h2>\n            \n            <h3>1. Standard-Buchungssatz f\u00fcr Absatz\/Verkauf<\/h3>\n            <p>Bei einem Verkauf wird die Forderung gegen\u00fcber dem Kunden aktiviert und der Umsatzerl\u00f6s sowie die Umsatzsteuer werden als Ertrag verbucht.<\/p>\n            <p>Standardbuchung:<\/p>\n            <pre>\n                Forderungen an verschiedene\n                  an Umsatzerl\u00f6se\n                  an Umsatzsteuer\n            <\/pre>\n            \n            <h3>2. Buchung bei Barzahlung<\/h3>\n            <p>Bei Barzahlung wird statt der Forderung direkt die Kasse aktiviert:<\/p>\n            <pre>\n                Kasse an verschiedene\n                  an Umsatzerl\u00f6se\n                  an Umsatzsteuer\n            <\/pre>\n            \n            <h3>3. Buchung bei Bankzahlung<\/h3>\n            <p>Bei Zahlung per \u00dcberweisung wird das Bankkonto aktiviert:<\/p>\n            <pre>\n                Bank an verschiedene\n                  an Umsatzerl\u00f6se\n                  an Umsatzsteuer\n            <\/pre>\n        <\/div>\n        \n        <div id=\"help\" class=\"tabcontent\">\n            <h2>Hilfe zur Anwendung<\/h2>\n            <p>Dieser Buchungstrainer hilft dir, Buchungss\u00e4tze f\u00fcr Absatzvorg\u00e4nge im Umlaufverm\u00f6gen zu \u00fcben.<\/p>\n            <p>So funktioniert es:<\/p>\n            <ol>\n                <li>Lies den Gesch\u00e4ftsvorfall sorgf\u00e4ltig durch<\/li>\n                <li>Ziehe die entsprechenden Konten f\u00fcr Soll und Haben per Drag & Drop<\/li>\n                <li>Gib den Betrag ein<\/li>\n                <li>F\u00fcge bei Bedarf weitere Buchungszeilen hinzu<\/li>\n                <li>Klicke auf \"Buchen\" um deine Antwort zu pr\u00fcfen<\/li>\n                <li>Nutze \"L\u00f6sung anzeigen\" wenn du nicht weiterkommst<\/li>\n            <\/ol>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ \u00dcbungsdaten\n        const exercises = [\n            {\n                id: 1,\n                title: \"Warenverkauf auf Rechnung\",\n                difficulty: 1,\n                content: \"Die Firma verkauft Waren im Wert von 1.000 \u20ac zzgl. 19% USt. auf Rechnung.\",\n                solution: [\n                    { debit: \"Forderungen\", credit: \"Umsatzerl\u00f6se\", amount: 1000 },\n                    { debit: \"Forderungen\", credit: \"Umsatzsteuer\", amount: 190 }\n                ]\n            },\n            {\n                id: 2,\n                title: \"Barzahlung bei Warenverkauf\",\n                difficulty: 1,\n                content: \"Ein Kunde kauft Waren im Wert von 500 \u20ac zzgl. 19% USt. und bezahlt bar.\",\n                solution: [\n                    { debit: \"Kasse\", credit: \"Umsatzerl\u00f6se\", amount: 500 },\n                    { debit: \"Kasse\", credit: \"Umsatzsteuer\", amount: 95 }\n                ]\n            },\n            {\n                id: 3,\n                title: \"Warenverkauf mit Bankzahlung\",\n                difficulty: 2,\n                content: \"Die Firma verkauft Waren im Wert von 2.000 \u20ac zzgl. 19% USt. Der Kunde \u00fcberweist den Betrag sofort.\",\n                solution: [\n                    { debit: \"Bank\", credit: \"Umsatzerl\u00f6se\", amount: 2000 },\n                    { debit: \"Bank\", credit: \"Umsatzsteuer\", amount: 380 }\n                ]\n            },\n            {\n                id: 4,\n                title: \"Warenverkauf mit Skonto\",\n                difficulty: 3,\n                content: \"Die Firma verkauft Waren im Wert von 3.000 \u20ac zzgl. 19% USt. auf Rechnung. Der Kunde zahlt innerhalb der Skontofrist und erh\u00e4lt 2% Skonto.\",\n                solution: [\n                    { debit: \"Forderungen\", credit: \"Umsatzerl\u00f6se\", amount: 3000 },\n                    { debit: \"Forderungen\", credit: \"Umsatzsteuer\", amount: 570 },\n                    { debit: \"Bank\", credit: \"Forderungen\", amount: 3510 },\n                    { debit: \"Skontoaufwand\", credit: \"Bank\", amount: 60 }\n                ]\n            }\n        ];\n\n        \/\/ Konten-Liste mit Kategorien\n        const accounts = [\n            { name: \"Forderungen\", category: \"aktiv\" },\n            { name: \"Kasse\", category: \"aktiv\" },\n            { name: \"Bank\", category: \"aktiv\" },\n            { name: \"Warenbestand\", category: \"aktiv\" },\n            { name: \"Verbindlichkeiten\", category: \"passiv\" },\n            { name: \"Umsatzsteuer\", category: \"passiv\" },\n            { name: \"Umsatzerl\u00f6se\", category: \"ertrag\" },\n            { name: \"Skontoaufwand\", category: \"aufwand\" },\n            { name: \"Wareneinsatz\", category: \"aufwand\" }\n        ];\n\n        \/\/ Variablen f\u00fcr den Zustand\n        let currentExerciseIndex = 0;\n        let correctAnswers = 0;\n        let incorrectAnswers = 0;\n        let completedExercises = [];\n        let draggingElement = null;\n\n        \/\/ Initialisierung\n        function init() {\n            populateAccountsList();\n            loadExercise(currentExerciseIndex);\n            updateStats();\n            setupDragAndDrop();\n        }\n\n        \/\/ Konten-Liste f\u00fcllen\n        function populateAccountsList() {\n            const container = document.getElementById('accounts-list');\n            container.innerHTML = '';\n            \n            accounts.forEach(account => {\n                const accountEl = document.createElement('div');\n                accountEl.className = `account-item ${account.category}`;\n                accountEl.textContent = account.name;\n                accountEl.draggable = true;\n                \n                accountEl.addEventListener('dragstart', (e) => {\n                    draggingElement = accountEl;\n                    setTimeout(() => {\n                        accountEl.classList.add('dragging');\n                    }, 0);\n                    e.dataTransfer.setData('text\/plain', account.name);\n                });\n                \n                accountEl.addEventListener('dragend', () => {\n                    accountEl.classList.remove('dragging');\n                    draggingElement = null;\n                });\n                \n                container.appendChild(accountEl);\n            });\n        }\n\n        \/\/ \u00dcbung laden\n        function loadExercise(index) {\n            const exercise = exercises[index];\n            const container = document.getElementById('exercise-container');\n            \n            let html = `\n                <div class=\"exercise-header\">\n                    <div class=\"exercise-title\">${exercise.title}<\/div>\n                    <div class=\"exercise-difficulty difficulty-${exercise.difficulty}\">\n                        Schwierigkeit: ${exercise.difficulty}\n                    <\/div>\n                <\/div>\n                <div class=\"exercise-content\">${exercise.content}<\/div>\n                <div class=\"booking-form\">\n                    <div class=\"booking-container\" id=\"booking-container\">\n                        <div class=\"booking-row\">\n                            <div class=\"account-container\" data-type=\"debit\">\n                                <span class=\"account-placeholder\">Soll-Konto hierher ziehen<\/span>\n                            <\/div>\n                            <div style=\"padding: 0 10px;\">an<\/div>\n                            <div class=\"account-container\" data-type=\"credit\">\n                                <span class=\"account-placeholder\">Haben-Konto hierher ziehen<\/span>\n                            <\/div>\n                            <input type=\"number\" class=\"amount-input\" placeholder=\"Betrag in \u20ac\">\n                            <button class=\"remove-row-btn\" onclick=\"removeBookingRow(this)\">-<\/button>\n                        <\/div>\n                    <\/div>\n                    <button class=\"add-row-btn\" onclick=\"addBookingRow()\">+<\/button>\n                    <button class=\"book-btn\" onclick=\"checkBooking()\">Buchen<\/button>\n                <\/div>\n                <div id=\"feedback\" class=\"feedback\"><\/div>\n                <div id=\"solution\" class=\"solution\">\n                    <h4>L\u00f6sung:<\/h4>\n                    ${exercise.solution.map(s => \n                        `${s.debit} an ${s.credit} ${s.amount} \u20ac`\n                    ).join('<br>')}\n                <\/div>\n            `;\n            \n            container.innerHTML = html;\n            setupDragAndDrop();\n        }\n\n        \/\/ Drag and Drop Setup\n        function setupDragAndDrop() {\n            const accountContainers = document.querySelectorAll('.account-container');\n            \n            accountContainers.forEach(container => {\n                container.addEventListener('dragover', (e) => {\n                    e.preventDefault();\n                    container.classList.add('highlight');\n                });\n                \n                container.addEventListener('dragleave', () => {\n                    container.classList.remove('highlight');\n                });\n                \n                container.addEventListener('drop', (e) => {\n                    e.preventDefault();\n                    container.classList.remove('highlight');\n                    \n                    if (draggingElement) {\n                        const accountName = draggingElement.textContent;\n                        container.innerHTML = accountName;\n                        container.dataset.value = accountName;\n                    }\n                });\n            });\n        }\n\n        \/\/ Buchungszeile hinzuf\u00fcgen\n        function addBookingRow() {\n            const container = document.getElementById('booking-container');\n            const row = document.createElement('div');\n            row.className = 'booking-row';\n            \n            row.innerHTML = `\n                <div class=\"account-container\" data-type=\"debit\">\n                    <span class=\"account-placeholder\">Soll-Konto hierher ziehen<\/span>\n                <\/div>\n                <div style=\"padding: 0 10px;\">an<\/div>\n                <div class=\"account-container\" data-type=\"credit\">\n                    <span class=\"account-placeholder\">Haben-Konto hierher ziehen<\/span>\n                <\/div>\n                <input type=\"number\" class=\"amount-input\" placeholder=\"Betrag in \u20ac\">\n                <button class=\"remove-row-btn\" onclick=\"removeBookingRow(this)\">-<\/button>\n            `;\n            \n            container.appendChild(row);\n            setupDragAndDrop();\n        }\n\n        \/\/ Buchungszeile entfernen\n        function removeBookingRow(button) {\n            const row = button.parentElement;\n            if (document.querySelectorAll('.booking-row').length > 1) {\n                row.remove();\n            }\n        }\n\n        \/\/ Buchung pr\u00fcfen\n        function checkBooking() {\n            const exercise = exercises[currentExerciseIndex];\n            const rows = document.querySelectorAll('.booking-row');\n            const feedback = document.getElementById('feedback');\n            \n            \/\/ Benutzereingaben sammeln\n            const userBookings = [];\n            rows.forEach(row => {\n                const debitEl = row.querySelector('[data-type=\"debit\"]');\n                const creditEl = row.querySelector('[data-type=\"credit\"]');\n                const amountEl = row.querySelector('.amount-input');\n                \n                if (debitEl.dataset.value && creditEl.dataset.value && amountEl.value) {\n                    userBookings.push({\n                        debit: debitEl.dataset.value,\n                        credit: creditEl.dataset.value,\n                        amount: parseFloat(amountEl.value)\n                    });\n                }\n            });\n            \n            \/\/ Pr\u00fcfen der Buchungen\n            let isCorrect = true;\n            \n            \/\/ Pr\u00fcfen, ob Anzahl der Buchungen stimmt\n            if (userBookings.length !== exercise.solution.length) {\n                isCorrect = false;\n            } else {\n                \/\/ Jede Buchung \u00fcberpr\u00fcfen\n                exercise.solution.forEach(solution => {\n                    const matchingBooking = userBookings.find(booking => \n                        booking.debit === solution.debit && \n                        booking.credit === solution.credit && \n                        Math.abs(booking.amount - solution.amount) < 0.01\n                    );\n                    \n                    if (!matchingBooking) {\n                        isCorrect = false;\n                    }\n                });\n            }\n            \n            \/\/ Feedback anzeigen\n            feedback.style.display = 'block';\n            if (isCorrect) {\n                feedback.className = 'feedback correct';\n                feedback.innerHTML = '<strong>Richtig!<\/strong> Deine Buchungen sind korrekt.';\n                correctAnswers++;\n                \/\/ \u00dcbung als abgeschlossen markieren, wenn noch nicht erledigt\n                if (!completedExercises.includes(currentExerciseIndex)) {\n                    completedExercises.push(currentExerciseIndex);\n                }\n            } else {\n                feedback.className = 'feedback incorrect';\n                feedback.innerHTML = '<strong>Nicht ganz richtig.<\/strong> \u00dcberpr\u00fcfe deine Buchungen oder schaue dir die L\u00f6sung an.';\n                incorrectAnswers++;\n            }\n            \n            updateStats();\n        }\n\n        \/\/ L\u00f6sung anzeigen\/verstecken\n        function toggleSolution() {\n            const solution = document.getElementById('solution');\n            if (solution.style.display === 'block') {\n                solution.style.display = 'none';\n            } else {\n                solution.style.display = 'block';\n            }\n        }\n\n        \/\/ Zur n\u00e4chsten \u00dcbung gehen\n        function nextExercise() {\n            if (currentExerciseIndex < exercises.length - 1) {\n                currentExerciseIndex++;\n                loadExercise(currentExerciseIndex);\n                document.getElementById('prev-btn').disabled = false;\n                document.getElementById('feedback').style.display = 'none';\n                document.getElementById('solution').style.display = 'none';\n            }\n            \n            if (currentExerciseIndex === exercises.length - 1) {\n                document.getElementById('next-btn').disabled = true;\n            }\n            \n            updateStats();\n        }\n\n        \/\/ Zur vorherigen \u00dcbung gehen\n        function previousExercise() {\n            if (currentExerciseIndex > 0) {\n                currentExerciseIndex--;\n                loadExercise(currentExerciseIndex);\n                document.getElementById('next-btn').disabled = false;\n                document.getElementById('feedback').style.display = 'none';\n                document.getElementById('solution').style.display = 'none';\n            }\n            \n            if (currentExerciseIndex === 0) {\n                document.getElementById('prev-btn').disabled = true;\n            }\n            \n            updateStats();\n        }\n\n        \/\/ Statistiken aktualisieren\n        function updateStats() {\n            document.getElementById('completed-count').textContent = `${completedExercises.length}\/${exercises.length}`;\n            document.getElementById('correct-count').textContent = correctAnswers;\n            document.getElementById('incorrect-count').textContent = incorrectAnswers;\n            \n            const progressBar = document.getElementById('progress-bar');\n            const progressPercentage = (completedExercises.length \/ exercises.length) * 100;\n            progressBar.style.width = `${progressPercentage}%`;\n        }\n\n        \/\/ Tab-Wechsel\n        function openTab(evt, tabName) {\n            const tabcontent = document.getElementsByClassName(\"tabcontent\");\n            for (let i = 0; i < tabcontent.length; i++) {\n                tabcontent[i].style.display = \"none\";\n            }\n            \n            const tablinks = document.getElementsByClassName(\"tablinks\");\n            for (let i = 0; i < tablinks.length; i++) {\n                tablinks[i].className = tablinks[i].className.replace(\" active\", \"\");\n            }\n            \n            document.getElementById(tabName).style.display = \"block\";\n            evt.currentTarget.className += \" active\";\n        }\n\n        \/\/ Initialisieren beim Laden\n        window.onload = init;\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/formel40.de\/index.php?rest_route=\/wp\/v2\/posts\/24"}],"collection":[{"href":"https:\/\/formel40.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/formel40.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/formel40.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/formel40.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":2,"href":"https:\/\/formel40.de\/index.php?rest_route=\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/formel40.de\/index.php?rest_route=\/wp\/v2\/posts\/24\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/formel40.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/formel40.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/formel40.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}