<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buchungstrainer - Absatzvorgänge im Umlaufvermögen</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #3498db;
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
}
.exercise {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.exercise-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.exercise-title {
font-weight: bold;
font-size: 1.2em;
color: #2c3e50;
}
.exercise-difficulty {
background-color: #3498db;
color: white;
padding: 3px 8px;
border-radius: 3px;
font-size: 0.8em;
}
.difficulty-1 { background-color: #2ecc71; }
.difficulty-2 { background-color: #f39c12; }
.difficulty-3 { background-color: #e74c3c; }
.exercise-content {
margin-bottom: 15px;
}
.booking-form {
margin-bottom: 15px;
}
.booking-container {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 15px;
}
.booking-row {
display: flex;
align-items: center;
gap: 10px;
}
.account-container {
flex: 1;
min-height: 40px;
border: 1px dashed #3498db;
border-radius: 4px;
padding: 8px;
background-color: #f8f9fa;
display: flex;
align-items: center;
}
.account-container.highlight {
background-color: #e8f4f8;
border: 1px dashed #2980b9;
}
.amount-input {
width: 120px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.add-row-btn {
background-color: #2ecc71;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
font-weight: bold;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.remove-row-btn {
background-color: #e74c3c;
color: white;
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px;
}
.book-btn {
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
width: 100%;
margin-top: 10px;
}
.book-btn:hover {
background-color: #2980b9;
}
.feedback {
margin-top: 10px;
padding: 10px;
border-radius: 4px;
display: none;
}
.feedback.correct {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.feedback.incorrect {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.solution {
margin-top: 10px;
display: none;
padding: 10px;
background-color: #e8f4f8;
border: 1px solid #b8daff;
border-radius: 4px;
}
.controls {
display: flex;
justify-content: space-between;
}
.controls button {
padding: 8px 15px;
background-color: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.controls button:hover {
background-color: #5a6268;
}
.progress-container {
margin: 20px 0;
background-color: #e9ecef;
border-radius: 4px;
height: 20px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #3498db;
width: 0%;
transition: width 0.3s ease;
}
.stats {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.stat-box {
text-align: center;
padding: 10px;
background-color: #e9ecef;
border-radius: 4px;
min-width: 100px;
}
.stat-value {
font-size: 1.5em;
font-weight: bold;
color: #2c3e50;
}
.accounts-panel {
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
background-color: #f1f1f1;
}
.accounts-panel h3 {
margin-top: 0;
margin-bottom: 10px;
color: #2c3e50;
}
.accounts-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.account-item {
padding: 6px 12px;
background-color: #3498db;
color: white;
border-radius: 4px;
cursor: grab;
user-select: none;
}
.account-item.aktiv { background-color: #2ecc71; }
.account-item.passiv { background-color: #e74c3c; }
.account-item.ertrag { background-color: #9b59b6; }
.account-item.aufwand { background-color: #f39c12; }
.account-placeholder {
color: #888;
font-style: italic;
}
.dragging {
opacity: 0.5;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
border-radius: 4px 4px 0 0;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #3498db;
color: white;
}
.tabcontent {
display: none;
padding: 15px;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>Buchungstrainer - Absatzvorgänge im Umlaufvermögen</h1>
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'trainer')">Buchungstrainer</button>
<button class="tablinks" onclick="openTab(event, 'theory')">Theorie</button>
<button class="tablinks" onclick="openTab(event, 'help')">Hilfe</button>
</div>
<div id="trainer" class="tabcontent" style="display: block;">
<div class="stats">
<div class="stat-box">
<div>Bearbeitet</div>
<div class="stat-value" id="completed-count">0/0</div>
</div>
<div class="stat-box">
<div>Richtig</div>
<div class="stat-value" id="correct-count">0</div>
</div>
<div class="stat-box">
<div>Falsch</div>
<div class="stat-value" id="incorrect-count">0</div>
</div>
</div>
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="accounts-panel">
<h3>Konten zum Ziehen</h3>
<div class="accounts-list" id="accounts-list">
<!-- Wird dynamisch gefüllt -->
</div>
</div>
<div id="exercise-container" class="exercise">
<!-- Hier werden die Übungen dynamisch eingefügt -->
</div>
<div class="controls">
<button id="prev-btn" onclick="previousExercise()" disabled>Zurück</button>
<button id="solution-btn" onclick="toggleSolution()">Lösung anzeigen</button>
<button id="next-btn" onclick="nextExercise()">Weiter</button>
</div>
</div>
<div id="theory" class="tabcontent">
<h2>Theorie: Absatzvorgänge im Umlaufvermögen</h2>
<h3>1. Standard-Buchungssatz für Absatz/Verkauf</h3>
<p>Bei einem Verkauf wird die Forderung gegenüber dem Kunden aktiviert und der Umsatzerlös sowie die Umsatzsteuer werden als Ertrag verbucht.</p>
<p>Standardbuchung:</p>
<pre>
Forderungen an verschiedene
an Umsatzerlöse
an Umsatzsteuer
</pre>
<h3>2. Buchung bei Barzahlung</h3>
<p>Bei Barzahlung wird statt der Forderung direkt die Kasse aktiviert:</p>
<pre>
Kasse an verschiedene
an Umsatzerlöse
an Umsatzsteuer
</pre>
<h3>3. Buchung bei Bankzahlung</h3>
<p>Bei Zahlung per Überweisung wird das Bankkonto aktiviert:</p>
<pre>
Bank an verschiedene
an Umsatzerlöse
an Umsatzsteuer
</pre>
</div>
<div id="help" class="tabcontent">
<h2>Hilfe zur Anwendung</h2>
<p>Dieser Buchungstrainer hilft dir, Buchungssätze für Absatzvorgänge im Umlaufvermögen zu üben.</p>
<p>So funktioniert es:</p>
<ol>
<li>Lies den Geschäftsvorfall sorgfältig durch</li>
<li>Ziehe die entsprechenden Konten für Soll und Haben per Drag & Drop</li>
<li>Gib den Betrag ein</li>
<li>Füge bei Bedarf weitere Buchungszeilen hinzu</li>
<li>Klicke auf "Buchen" um deine Antwort zu prüfen</li>
<li>Nutze "Lösung anzeigen" wenn du nicht weiterkommst</li>
</ol>
</div>
</div>
<script>
// Übungsdaten
const exercises = [
{
id: 1,
title: "Warenverkauf auf Rechnung",
difficulty: 1,
content: "Die Firma verkauft Waren im Wert von 1.000 € zzgl. 19% USt. auf Rechnung.",
solution: [
{ debit: "Forderungen", credit: "Umsatzerlöse", amount: 1000 },
{ debit: "Forderungen", credit: "Umsatzsteuer", amount: 190 }
]
},
{
id: 2,
title: "Barzahlung bei Warenverkauf",
difficulty: 1,
content: "Ein Kunde kauft Waren im Wert von 500 € zzgl. 19% USt. und bezahlt bar.",
solution: [
{ debit: "Kasse", credit: "Umsatzerlöse", amount: 500 },
{ debit: "Kasse", credit: "Umsatzsteuer", amount: 95 }
]
},
{
id: 3,
title: "Warenverkauf mit Bankzahlung",
difficulty: 2,
content: "Die Firma verkauft Waren im Wert von 2.000 € zzgl. 19% USt. Der Kunde überweist den Betrag sofort.",
solution: [
{ debit: "Bank", credit: "Umsatzerlöse", amount: 2000 },
{ debit: "Bank", credit: "Umsatzsteuer", amount: 380 }
]
},
{
id: 4,
title: "Warenverkauf mit Skonto",
difficulty: 3,
content: "Die Firma verkauft Waren im Wert von 3.000 € zzgl. 19% USt. auf Rechnung. Der Kunde zahlt innerhalb der Skontofrist und erhält 2% Skonto.",
solution: [
{ debit: "Forderungen", credit: "Umsatzerlöse", amount: 3000 },
{ debit: "Forderungen", credit: "Umsatzsteuer", amount: 570 },
{ debit: "Bank", credit: "Forderungen", amount: 3510 },
{ debit: "Skontoaufwand", credit: "Bank", amount: 60 }
]
}
];
// Konten-Liste mit Kategorien
const accounts = [
{ name: "Forderungen", category: "aktiv" },
{ name: "Kasse", category: "aktiv" },
{ name: "Bank", category: "aktiv" },
{ name: "Warenbestand", category: "aktiv" },
{ name: "Verbindlichkeiten", category: "passiv" },
{ name: "Umsatzsteuer", category: "passiv" },
{ name: "Umsatzerlöse", category: "ertrag" },
{ name: "Skontoaufwand", category: "aufwand" },
{ name: "Wareneinsatz", category: "aufwand" }
];
// Variablen für den Zustand
let currentExerciseIndex = 0;
let correctAnswers = 0;
let incorrectAnswers = 0;
let completedExercises = [];
let draggingElement = null;
// Initialisierung
function init() {
populateAccountsList();
loadExercise(currentExerciseIndex);
updateStats();
setupDragAndDrop();
}
// Konten-Liste füllen
function populateAccountsList() {
const container = document.getElementById('accounts-list');
container.innerHTML = '';
accounts.forEach(account => {
const accountEl = document.createElement('div');
accountEl.className = `account-item ${account.category}`;
accountEl.textContent = account.name;
accountEl.draggable = true;
accountEl.addEventListener('dragstart', (e) => {
draggingElement = accountEl;
setTimeout(() => {
accountEl.classList.add('dragging');
}, 0);
e.dataTransfer.setData('text/plain', account.name);
});
accountEl.addEventListener('dragend', () => {
accountEl.classList.remove('dragging');
draggingElement = null;
});
container.appendChild(accountEl);
});
}
// Übung laden
function loadExercise(index) {
const exercise = exercises[index];
const container = document.getElementById('exercise-container');
let html = `
<div class="exercise-header">
<div class="exercise-title">${exercise.title}</div>
<div class="exercise-difficulty difficulty-${exercise.difficulty}">
Schwierigkeit: ${exercise.difficulty}
</div>
</div>
<div class="exercise-content">${exercise.content}</div>
<div class="booking-form">
<div class="booking-container" id="booking-container">
<div class="booking-row">
<div class="account-container" data-type="debit">
<span class="account-placeholder">Soll-Konto hierher ziehen</span>
</div>
<div style="padding: 0 10px;">an</div>
<div class="account-container" data-type="credit">
<span class="account-placeholder">Haben-Konto hierher ziehen</span>
</div>
<input type="number" class="amount-input" placeholder="Betrag in €">
<button class="remove-row-btn" onclick="removeBookingRow(this)">-</button>
</div>
</div>
<button class="add-row-btn" onclick="addBookingRow()">+</button>
<button class="book-btn" onclick="checkBooking()">Buchen</button>
</div>
<div id="feedback" class="feedback"></div>
<div id="solution" class="solution">
<h4>Lösung:</h4>
${exercise.solution.map(s =>
`${s.debit} an ${s.credit} ${s.amount} €`
).join('<br>')}
</div>
`;
container.innerHTML = html;
setupDragAndDrop();
}
// Drag and Drop Setup
function setupDragAndDrop() {
const accountContainers = document.querySelectorAll('.account-container');
accountContainers.forEach(container => {
container.addEventListener('dragover', (e) => {
e.preventDefault();
container.classList.add('highlight');
});
container.addEventListener('dragleave', () => {
container.classList.remove('highlight');
});
container.addEventListener('drop', (e) => {
e.preventDefault();
container.classList.remove('highlight');
if (draggingElement) {
const accountName = draggingElement.textContent;
container.innerHTML = accountName;
container.dataset.value = accountName;
}
});
});
}
// Buchungszeile hinzufügen
function addBookingRow() {
const container = document.getElementById('booking-container');
const row = document.createElement('div');
row.className = 'booking-row';
row.innerHTML = `
<div class="account-container" data-type="debit">
<span class="account-placeholder">Soll-Konto hierher ziehen</span>
</div>
<div style="padding: 0 10px;">an</div>
<div class="account-container" data-type="credit">
<span class="account-placeholder">Haben-Konto hierher ziehen</span>
</div>
<input type="number" class="amount-input" placeholder="Betrag in €">
<button class="remove-row-btn" onclick="removeBookingRow(this)">-</button>
`;
container.appendChild(row);
setupDragAndDrop();
}
// Buchungszeile entfernen
function removeBookingRow(button) {
const row = button.parentElement;
if (document.querySelectorAll('.booking-row').length > 1) {
row.remove();
}
}
// Buchung prüfen
function checkBooking() {
const exercise = exercises[currentExerciseIndex];
const rows = document.querySelectorAll('.booking-row');
const feedback = document.getElementById('feedback');
// Benutzereingaben sammeln
const userBookings = [];
rows.forEach(row => {
const debitEl = row.querySelector('[data-type="debit"]');
const creditEl = row.querySelector('[data-type="credit"]');
const amountEl = row.querySelector('.amount-input');
if (debitEl.dataset.value && creditEl.dataset.value && amountEl.value) {
userBookings.push({
debit: debitEl.dataset.value,
credit: creditEl.dataset.value,
amount: parseFloat(amountEl.value)
});
}
});
// Prüfen der Buchungen
let isCorrect = true;
// Prüfen, ob Anzahl der Buchungen stimmt
if (userBookings.length !== exercise.solution.length) {
isCorrect = false;
} else {
// Jede Buchung überprüfen
exercise.solution.forEach(solution => {
const matchingBooking = userBookings.find(booking =>
booking.debit === solution.debit &&
booking.credit === solution.credit &&
Math.abs(booking.amount - solution.amount) < 0.01
);
if (!matchingBooking) {
isCorrect = false;
}
});
}
// Feedback anzeigen
feedback.style.display = 'block';
if (isCorrect) {
feedback.className = 'feedback correct';
feedback.innerHTML = '<strong>Richtig!</strong> Deine Buchungen sind korrekt.';
correctAnswers++;
// Übung als abgeschlossen markieren, wenn noch nicht erledigt
if (!completedExercises.includes(currentExerciseIndex)) {
completedExercises.push(currentExerciseIndex);
}
} else {
feedback.className = 'feedback incorrect';
feedback.innerHTML = '<strong>Nicht ganz richtig.</strong> Überprüfe deine Buchungen oder schaue dir die Lösung an.';
incorrectAnswers++;
}
updateStats();
}
// Lösung anzeigen/verstecken
function toggleSolution() {
const solution = document.getElementById('solution');
if (solution.style.display === 'block') {
solution.style.display = 'none';
} else {
solution.style.display = 'block';
}
}
// Zur nächsten Übung gehen
function nextExercise() {
if (currentExerciseIndex < exercises.length - 1) {
currentExerciseIndex++;
loadExercise(currentExerciseIndex);
document.getElementById('prev-btn').disabled = false;
document.getElementById('feedback').style.display = 'none';
document.getElementById('solution').style.display = 'none';
}
if (currentExerciseIndex === exercises.length - 1) {
document.getElementById('next-btn').disabled = true;
}
updateStats();
}
// Zur vorherigen Übung gehen
function previousExercise() {
if (currentExerciseIndex > 0) {
currentExerciseIndex--;
loadExercise(currentExerciseIndex);
document.getElementById('next-btn').disabled = false;
document.getElementById('feedback').style.display = 'none';
document.getElementById('solution').style.display = 'none';
}
if (currentExerciseIndex === 0) {
document.getElementById('prev-btn').disabled = true;
}
updateStats();
}
// Statistiken aktualisieren
function updateStats() {
document.getElementById('completed-count').textContent = `${completedExercises.length}/${exercises.length}`;
document.getElementById('correct-count').textContent = correctAnswers;
document.getElementById('incorrect-count').textContent = incorrectAnswers;
const progressBar = document.getElementById('progress-bar');
const progressPercentage = (completedExercises.length / exercises.length) * 100;
progressBar.style.width = `${progressPercentage}%`;
}
// Tab-Wechsel
function openTab(evt, tabName) {
const tabcontent = document.getElementsByClassName("tabcontent");
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
const tablinks = document.getElementsByClassName("tablinks");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Initialisieren beim Laden
window.onload = init;
</script>
</body>
</html>