// Custom JavaScript Section Start
// Tab Switching Function Section Start
// Tab Switching
function openTab(evt, tabName) {
try {
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
document.querySelectorAll('.tab-link').forEach(link => link.classList.remove('active'));
const tab = document.getElementById(tabName);
if (tab) {
tab.classList.add('active');
evt.currentTarget.classList.add('active');
} else {
console.warn(`Tab ${tabName} not found.`);
}
} catch (e) {
console.error('Tab Switching: Error opening tab.', e);
}
}
// Tab Switching Function Section End
// Audio Playback Function Section Start
// Audio Playback with Feedback
function speak(text, lang) {
try {
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = lang;
const phraseElement = event?.target;
if (phraseElement) {
phraseElement.insertAdjacentHTML('afterend', '
Playing...');
utterance.onend = () => document.querySelector('.audio-feedback')?.remove();
}
speechSynthesis.speak(utterance);
} else {
showExerciseFeedback('global-feedback', 'Audio not supported in this browser.', 'error');
}
} catch (e) {
console.error('Audio Playback: Error playing audio.', e);
showExerciseFeedback('global-feedback', 'Error playing audio.', 'error');
}
}
// Audio Playback Function Section End
// Feedback Display Function Section Start
// Feedback Display
function showExerciseFeedback(elementId, message, alertType) {
try {
const feedback = document.getElementById(elementId);
if (feedback) {
feedback.innerHTML = message;
feedback.className = `feedback ${alertType} ${message ? '' : 'hidden'}`;
feedback.style.display = message ? 'block' : 'none';
} else {
console.warn(`Feedback element not found: ${elementId}`);
console.log(`Feedback [${elementId}]: ${message} (${alertType})`);
}
} catch (e) {
console.error(`Feedback [${elementId}]: Error displaying feedback.`, e);
console.log(`Feedback [${elementId}]: ${message} (${alertType})`);
}
}
// Feedback Display Function Section End
// Progress Tracking Functions Section Start
// Main Progress Tracking
function updateProgress() {
try {
const completed = JSON.parse(localStorage.getItem('completedExercises') || '[]');
const totalExercises = 4; // Exercise 1, Exercise 2, Grammar Practice, Vocabulary Quiz
const progress = (completed.length / totalExercises) * 100;
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
const scoreElement = document.getElementById('score');
const badgeElement = document.getElementById('badge');
if (progressBar && progressText && scoreElement && badgeElement) {
progressBar.style.width = `${progress}%`;
progressBar.setAttribute('aria-valuenow', progress);
progressText.textContent = `${completed.length}/${totalExercises} exercises completed`;
let points = localStorage.getItem('points') || '0';
scoreElement.textContent = `Score: ${points}`;
badgeElement.innerHTML = points >= 80 ? '
Dialect Master' : '';
} else {
console.warn('Main Progress: One or more progress elements not found.');
}
} catch (e) {
console.error('Main Progress: Error updating progress.', e);
}
}
function awardPoints(exerciseId, correct) {
try {
let points = parseInt(localStorage.getItem('points') || '0');
if (correct) {
points += 10;
localStorage.setItem('points', points);
const completed = JSON.parse(localStorage.getItem('completedExercises') || '[]');
if (!completed.includes(exerciseId)) {
completed.push(exerciseId);
localStorage.setItem('completedExercises', JSON.stringify(completed));
}
}
updateProgress();
} catch (e) {
console.error('Main Progress: Error awarding points.', e);
}
}
// Quiz Progress Tracking
function updateQuizProgress() {
try {
const completed = JSON.parse(localStorage.getItem('quizCompleted') || '[]');
const totalQuestions = vocabQuestions.length;
const progress = (completed.length / totalQuestions) * 100;
const progressBar = document.getElementById('quiz-progress-bar');
const progressText = document.getElementById('quiz-progress-text');
const scoreElement = document.getElementById('quiz-score');
if (progressBar && progressText && scoreElement) {
progressBar.style.width = `${progress}%`;
progressBar.setAttribute('aria-valuenow', progress);
progressText.textContent = `${completed.length}/${totalQuestions} questions completed`;
let quizPoints = localStorage.getItem('quizPoints') || '0';
scoreElement.textContent = `Quiz Score: ${quizPoints}`;
} else {
console.warn('Quiz Progress: One or more progress elements not found.');
}
} catch (e) {
console.error('Quiz Progress: Error updating progress.', e);
}
}
function awardQuizPoints(questionId, correct) {
try {
let quizPoints = parseInt(localStorage.getItem('quizPoints') || '0');
if (correct) {
quizPoints += 10;
localStorage.setItem('quizPoints', quizPoints);
const completed = JSON.parse(localStorage.getItem('quizCompleted') || '[]');
if (!completed.includes(questionId)) {
completed.push(questionId);
localStorage.setItem('quizCompleted', JSON.stringify(completed));
awardPoints('vocab-quiz', true);
}
}
updateQuizProgress();
} catch (e) {
console.error('Quiz Progress: Error awarding points.', e);
}
}
// Progress Tracking Functions Section End
// Save and Load Progress Functions Section Start
// Save and Load Progress
function saveProgress() {
try {
const answers = {};
document.querySelectorAll('input[type="text"], select, textarea').forEach(input => {
answers[input.id] = input.value;
});
localStorage.setItem('exerciseAnswers', JSON.stringify(answers));
showExerciseFeedback('global-feedback', 'Progress saved!', 'success');
} catch (e) {
console.error('Save Progress: Error saving progress.', e);
showExerciseFeedback('global-feedback', 'Error: Save failed.', 'error');
}
}
function loadProgress() {
try {
const answers = JSON.parse(localStorage.getItem('exerciseAnswers') || '{}');
Object.keys(answers).forEach(id => {
const input = document.getElementById(id);
if (input) input.value = answers[id];
});
showExerciseFeedback('global-feedback', 'Progress loaded!', 'success');
updateProgress();
updateQuizProgress();
updateGrammarProgress();
} catch (e) {
console.error('Load Progress: Error loading progress.', e);
showExerciseFeedback('global-feedback', 'Error: Load failed.', 'error');
}
}
// Save and Load Progress Functions Section End
// Vocabulary Quiz Functions Section Start
// Vocabulary Quiz
const vocabQuestions = [
{ question: 'What does "Servus" mean?', answer: 'Hello', options: ['Hello', 'Goodbye', 'Thank you'], id: 'q1' },
{ question: 'What does "Guten Morgen" mean?', answer: 'Good morning', options: ['Good morning', 'Good evening', 'Goodbye'], id: 'q2' },
];
let currentQuizQuestion = 0;
function startVocabQuiz() {
try {
const quizContainer = document.getElementById('vocab-quiz');
if (!quizContainer) {
console.warn('Vocabulary Quiz: Container (#vocab-quiz) not found.');
showExerciseFeedback('vocab-quiz-feedback', 'Error: Quiz container not found.', 'error');
return;
}
quizContainer.classList.remove('hidden');
const q = vocabQuestions[currentQuizQuestion];
const questionElement = document.getElementById('quiz-question');
const select = document.getElementById('quiz-answer');
if (!questionElement || !select) {
console.warn('Vocabulary Quiz: Question or select element not found.');
showExerciseFeedback('vocab-quiz-feedback', 'Error: Quiz elements not found.', 'error');
return;
}
questionElement.textContent = q.question;
select.innerHTML = '
' + q.options.map(opt => `
`).join('');
} catch (e) {
console.error('Vocabulary Quiz: Error starting quiz.', e);
showExerciseFeedback('vocab-quiz-feedback', 'Error: Unable to start quiz.', 'error');
}
}
function checkVocabQuiz() {
try {
const q = vocabQuestions[currentQuizQuestion];
const select = document.getElementById('quiz-answer');
if (!select) {
console.warn('Vocabulary Quiz: Select element (#quiz-answer) not found.');
showExerciseFeedback('vocab-quiz-feedback', 'Error: Answer select not found.', 'error');
return;
}
const answer = select.value;
const correct = answer === q.answer;
showExerciseFeedback('vocab-quiz-feedback', correct ? 'Correct!' : `Incorrect. The answer is "${q.answer}".`, correct ? 'success' : 'error');
awardQuizPoints(q.id, correct);
} catch (e) {
console.error('Vocabulary Quiz: Error checking quiz.', e);
showExerciseFeedback('vocab-quiz-feedback', 'Error: Unable to check quiz.', 'error');
}
}
function nextQuizQuestion() {
try {
currentQuizQuestion = (currentQuizQuestion + 1) % vocabQuestions.length;
startVocabQuiz();
showExerciseFeedback('vocab-quiz-feedback', '');
const select = document.getElementById('quiz-answer');
if (select) select.value = '';
} catch (e) {
console.error('Vocabulary Quiz: Error moving to next question.', e);
showExerciseFeedback('vocab-quiz-feedback', 'Error: Unable to load next question.', 'error');
}
}
// Vocabulary Quiz Functions Section End
// Flashcard Functions Section Start
// Flashcards
const flashcards = [
{ front: 'Servus', back: 'Hello (Bavarian)' },
{ front: 'Guten Morgen', back: 'Good morning (Standard)' },
{ front: 'Na, wie läuft’s', back: 'Yo, how’s it going? (Colloquial)' },
{ front: 'Grüß di', back: 'Hello (Swabian)' }
];
let currentFlashcard = 0;
function flipFlashcard() {
try {
const back = document.getElementById('flashcard-back');
if (back) {
back.classList.toggle('hidden');
} else {
console.warn('Flashcards: Back element (#flashcard-back) not found.');
}
} catch (e) {
console.error('Flashcards: Error flipping card.', e);
}
}
function nextFlashcard() {
try {
currentFlashcard = (currentFlashcard + 1) % flashcards.length;
const front = document.getElementById('flashcard-front');
const back = document.getElementById('flashcard-back');
if (front && back) {
front.textContent = flashcards[currentFlashcard].front;
back.textContent = flashcards[currentFlashcard].back;
back.classList.add('hidden');
} else {
console.warn('Flashcards: Front or back element not found.');
}
} catch (e) {
console.error('Flashcards: Error loading next card.', e);
}
}
// Flashcard Functions Section End
// Grammar Practice Functions Section Start
// Grammar Drag-and-Drop
let draggedItem = null;
// Randomize array (Fisher-Yates shuffle)
function shuffleArray(array) {
try {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
} catch (e) {
console.error('Grammar Drag-and-Drop: Error shuffling array.', e);
return array;
}
}
// Initialize drag-and-drop with randomized items
function initializeGrammarDragAndDrop() {
try {
const container = document.getElementById('draggable-container-grammar');
if (!container) {
console.warn('Grammar Drag-and-Drop: Container (#draggable-container-grammar) not found.');
return;
}
const existingDraggables = document.querySelectorAll('#draggable-container-grammar .draggable-grammar');
const draggableData = Array.from(existingDraggables).map(item => ({
value: item.getAttribute('data-value'),
verb: item.getAttribute('data-verb') || 'machen',
text: item.textContent
}));
if (!draggableData.length) {
console.warn('Grammar Drag-and-Drop: No draggable items found.');
return;
}
shuffleArray(draggableData);
container.innerHTML = '';
// Create draggable items
draggableData.forEach(data => {
const item = document.createElement('div');
item.className = 'draggable-grammar';
item.setAttribute('draggable', 'true');
item.setAttribute('data-value', data.value);
item.setAttribute('data-verb', data.verb);
item.textContent = data.text;
container.appendChild(item);
});
// Remove existing event listeners to prevent duplication
document.querySelectorAll('.draggable-grammar').forEach(item => {
const newItem = item.cloneNode(true);
item.parentNode.replaceChild(newItem, item);
});
// Attach new event listeners
document.querySelectorAll('.draggable-grammar').forEach(item => {
item.addEventListener('dragstart', () => {
draggedItem = item;
item.classList.add('dragging');
});
item.addEventListener('dragend', () => {
item.classList.remove('dragging');
draggedItem = null;
});
});
// Remove existing listeners for droppables
document.querySelectorAll('.droppable-grammar').forEach(dropZone => {
const newZone = dropZone.cloneNode(true);
dropZone.parentNode.replaceChild(newZone, dropZone);
});
// Attach new drop zone listeners
document.querySelectorAll('.droppable-grammar').forEach(dropZone => {
dropZone.addEventListener('dragover', e => {
e.preventDefault();
dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('drag-over');
});
dropZone.addEventListener('drop', e => {
e.preventDefault();
dropZone.classList.remove('drag-over');
if (draggedItem) {
const existingItem = dropZone.querySelector('.draggable-grammar');
if (existingItem) {
container.appendChild(existingItem);
}
dropZone.appendChild(draggedItem);
}
});
});
} catch (e) {
console.error('Grammar Drag-and-Drop: Error initializing.', e);
}
}
function checkGrammarPractice() {
try {
const answers = {
'machen': { 'Ich': 'mache', 'Du': 'machst', 'Er/Sie': 'macht' }
};
let correct = 0;
let feedback = '
';
const dropZones = document.querySelectorAll('#grammar .droppable-grammar');
if (!dropZones.length) {
console.warn('Grammar Drag-and-Drop: No drop zones found.');
showExerciseFeedback('grammar-feedback', 'Error: Drop zones not found.', 'error');
return;
}
dropZones.forEach(dropZone => {
const pronoun = dropZone.getAttribute('data-dialect')?.trim();
const verb = dropZone.getAttribute('data-verb')?.trim() || 'machen';
const droppedItem = dropZone.querySelector('.draggable-grammar');
const droppedValue = droppedItem ? droppedItem.getAttribute('data-value')?.trim() : '';
const droppedVerb = droppedItem ? droppedItem.getAttribute('data-verb')?.trim() || 'machen' : '';
if (droppedValue && droppedVerb && pronoun && verb && droppedValue === answers[verb][pronoun] && droppedVerb === verb) {
correct++;
feedback += `- ${pronoun} (${verb}): Correct!
`;
} else {
feedback += `- ${pronoun} (${verb}): Incorrect
`;
}
});
feedback += '
';
showExerciseFeedback('grammar-feedback', `${correct}/${dropZones.length} correct. ${feedback}`, correct === dropZones.length ? 'success' : 'error');
awardGrammarPoints('grammar-drag', correct === dropZones.length);
} catch (e) {
console.error('Grammar Drag-and-Drop: Error checking answers.', e);
showExerciseFeedback('grammar-feedback', 'Error: Unable to check answers.', 'error');
}
}
function resetGrammarPractice() {
try {
const container = document.getElementById('draggable-container-grammar');
if (!container) {
console.warn('Grammar Drag-and-Drop: Container (#draggable-container-grammar) not found.');
showExerciseFeedback('grammar-feedback', 'Error: Reset failed.', 'error');
return;
}
const droppables = document.querySelectorAll('#grammar .droppable-grammar');
droppables.forEach(zone => {
const draggable = zone.querySelector('.draggable-grammar');
if (draggable) {
container.appendChild(draggable);
}
zone.innerHTML = '';
zone.textContent = `${zone.getAttribute('data-dialect')} (${zone.getAttribute('data-verb') || 'machen'})`;
});
initializeGrammarDragAndDrop();
showExerciseFeedback('grammar-feedback', '');
} catch (e) {
console.error('Grammar Drag-and-Drop: Error resetting practice.', e);
showExerciseFeedback('grammar-feedback', 'Error: Reset failed.', 'error');
}
}
// Grammar Quiz
const grammarQuestions = [
{ question: 'What is the correct conjugation of "machen" for "Du"?', answer: 'machst', options: ['mache', 'machst', 'macht'], id: 'gq1' },
{ question: 'What is the correct conjugation of "lernen" for "Ich"?', answer: 'lerne', options: ['lerne', 'lernst', 'lernt'], id: 'gq2' },
];
let currentGrammarQuestion = 0;
function startGrammarQuiz() {
try {
const quizContainer = document.getElementById('grammar-quiz');
if (!quizContainer) {
console.warn('Grammar Quiz: Container (#grammar-quiz) not found.');
showExerciseFeedback('grammar-quiz-feedback', 'Error: Quiz container not found.', 'error');
return;
}
quizContainer.classList.remove('hidden');
const q = grammarQuestions[currentGrammarQuestion];
const questionElement = document.getElementById('grammar-quiz-question');
const select = document.getElementById('grammar-quiz-answer');
if (!questionElement || !select) {
console.warn('Grammar Quiz: Question or select element not found.');
showExerciseFeedback('grammar-quiz-feedback', 'Error: Quiz elements not found.', 'error');
return;
}
questionElement.textContent = q.question;
select.innerHTML = '
' + q.options.map(opt => `
`).join('');
} catch (e) {
console.error('Grammar Quiz: Error starting quiz.', e);
showExerciseFeedback('grammar-quiz-feedback', 'Error: Unable to start quiz.', 'error');
}
}
function checkGrammarQuiz() {
try {
const q = grammarQuestions[currentGrammarQuestion];
const select = document.getElementById('grammar-quiz-answer');
if (!select) {
console.warn('Grammar Quiz: Select element (#grammar-quiz-answer) not found.');
showExerciseFeedback('grammar-quiz-feedback', 'Error: Answer select not found.', 'error');
return;
}
const answer = select.value;
const correct = answer === q.answer;
showExerciseFeedback('grammar-quiz-feedback', correct ? 'Correct!' : `Incorrect. The answer is "${q.answer}".`, correct ? 'success' : 'error');
awardGrammarPoints(q.id, correct);
} catch (e) {
console.error('Grammar Quiz: Error checking quiz.', e);
showExerciseFeedback('grammar-quiz-feedback', 'Error: Unable to check quiz.', 'error');
}
}
function nextGrammarQuestion() {
try {
currentGrammarQuestion = (currentGrammarQuestion + 1) % grammarQuestions.length;
startGrammarQuiz();
showExerciseFeedback('grammar-quiz-feedback', '');
const select = document.getElementById('grammar-quiz-answer');
if (select) select.value = '';
} catch (e) {
console.error('Grammar Quiz: Error moving to next question.', e);
showExerciseFeedback('grammar-quiz-feedback', 'Error: Unable to load next question.', 'error');
}
}
// Grammar Progress Tracking
function updateGrammarProgress() {
try {
const completed = JSON.parse(localStorage.getItem('grammarCompleted') || '[]');
const totalExercises = 2; // Drag-and-Drop, Grammar Quiz
const progress = (completed.length / totalExercises) * 100;
const progressBar = document.getElementById('grammar-progress-bar');
const progressText = document.getElementById('grammar-progress-text');
const scoreElement = document.getElementById('grammar-score');
if (progressBar && progressText && scoreElement) {
progressBar.style.width = `${progress}%`;
progressBar.setAttribute('aria-valuenow', progress);
progressText.textContent = `${completed.length}/${totalExercises} exercises completed`;
let grammarPoints = localStorage.getItem('grammarPoints') || '0';
scoreElement.textContent = `Grammar Score: ${grammarPoints}`;
} else {
console.warn('Grammar Progress: One or more progress elements not found.');
}
} catch (e) {
console.error('Grammar Progress: Error updating progress.', e);
}
}
function awardGrammarPoints(exerciseId, correct) {
try {
let grammarPoints = parseInt(localStorage.getItem('grammarPoints') || '0');
if (correct) {
grammarPoints += 10;
localStorage.setItem('grammarPoints', grammarPoints);
const completed = JSON.parse(localStorage.getItem('grammarCompleted') || '[]');
if (!completed.includes(exerciseId)) {
completed.push(exerciseId);
localStorage.setItem('grammarCompleted', JSON.stringify(completed));
awardPoints(exerciseId, true);
}
}
updateGrammarProgress();
} catch (e) {
console.error('Grammar Progress: Error awarding points.', e);
}
}
function resetGrammarProgress() {
try {
localStorage.removeItem('grammarCompleted');
localStorage.removeItem('grammarPoints');
localStorage.removeItem('exerciseAnswers');
const select = document.getElementById('grammar-quiz-answer');
if (select) select.value = '';
resetGrammarPractice();
showExerciseFeedback('grammar-quiz-feedback', '');
updateGrammarProgress();
showExerciseFeedback('global-feedback', 'Grammar progress reset!', 'success');
} catch (e) {
console.error('Grammar Progress: Error resetting progress.', e);
showExerciseFeedback('global-feedback', 'Error: Reset failed.', 'error');
}
}
// Grammar Practice Functions Section End
// Exercise 1 Functions Section Start
// Exercise 1
function checkExercise1() {
try {
const answers = {
'ex1-1': 'mache',
'ex1-2': 'machst'
};
let correct = 0;
let feedback = '
';
Object.keys(answers).forEach(id => {
const input = document.getElementById(id);
if (!input) {
console.warn(`Exercise 1: Input element (${id}) not found.`);
feedback += `- ${id}: Input not found
`;
return;
}
const userAnswer = input.value.trim().toLowerCase();
if (userAnswer === answers[id]) {
correct++;
feedback += `- ${id}: Correct!
`;
} else {
feedback += `- ${id}: Incorrect
`;
}
});
feedback += '
';
showExerciseFeedback('exercise1-feedback', `${correct}/2 correct. ${feedback}`, correct === 2 ? 'success' : 'error');
awardPoints('ex1', correct === 2);
} catch (e) {
console.error('Exercise 1: Error checking answers.', e);
showExerciseFeedback('exercise1-feedback', 'Error: Unable to check answers.', 'error');
}
}
function showSolutions1() {
try {
showExerciseFeedback('exercise1-feedback', 'Solutions:
', 'success');
} catch (e) {
console.error('Exercise 1: Error showing solutions.', e);
showExerciseFeedback('exercise1-feedback', 'Error: Unable to show solutions.', 'error');
}
}
// Exercise 1 Functions Section End
// Exercise 2 Functions Section Start
// Exercise 2: Matching Phrases to Dialects
function initializeExercise2() {
try {
const draggables = document.querySelectorAll('.draggable');
const droppables = document.querySelectorAll('.droppable');
const container = document.getElementById('greetings-list');
if (!draggables.length || !droppables.length || !container) {
console.error('Exercise 2: Missing elements:', {
draggables: draggables.length,
droppables: droppables.length,
container: !!container
});
showExerciseFeedback('exercise2-feedback', 'Error: Page elements not loaded correctly.', 'error');
return;
}
// Remove existing event listeners
draggables.forEach(item => {
const newItem = item.cloneNode(true);
item.parentNode.replaceChild(newItem, item);
});
droppables.forEach(zone => {
const newZone = zone.cloneNode(true);
zone.parentNode.replaceChild(newZone, zone);
});
// Attach new event listeners
document.querySelectorAll('.draggable').forEach(item => {
item.addEventListener('dragstart', e => {
console.log('Exercise 2: Drag start:', item.getAttribute('data-answer'));
item.classList.add('dragging');
e.dataTransfer.setData('text/plain', item.getAttribute('data-answer'));
});
item.addEventListener('dragend', e => {
console.log('Exercise 2: Drag end:', item.getAttribute('data-answer'));
item.classList.remove('dragging');
item.style.cssText = 'position: relative; opacity: 1; padding: 10px 15px; font-size: 16px; margin: 0 0 8px 0; width: 100%; box-sizing: border-box;';
});
});
document.querySelectorAll('.droppable').forEach(zone => {
zone.addEventListener('dragover', e => {
e.preventDefault();
console.log('Exercise 2: Drag over:', zone.getAttribute('data-id'));
zone.classList.add('drag-over');
});
zone.addEventListener('dragleave', () => {
console.log('Exercise 2: Drag leave:', zone.getAttribute('data-id'));
zone.classList.remove('drag-over');
});
zone.addEventListener('drop', e => {
e.preventDefault();
const value = e.dataTransfer.getData('text/plain');
console.log('Exercise 2: Dropped:', value, 'into', zone.getAttribute('data-id'));
zone.classList.remove('drag-over');
const draggable = document.querySelector(`.draggable[data-answer="${value}"]`);
if (draggable) {
const existingItem = zone.querySelector('.draggable');
if (existingItem && existingItem !== draggable) {
container.appendChild(existingItem);
console.log('Exercise 2: Moved existing item back to container:', existingItem.getAttribute('data-answer'));
}
zone.appendChild(draggable);
zone.classList.add('has-draggable');
draggable.style.cssText = 'position: relative; opacity: 1; padding: 10px 15px; font-size: 16px; margin: 0; width: 100%; box-sizing: border-box;';
showExerciseFeedback('exercise2-feedback', `Dropped "${draggable.textContent}" into ${zone.querySelector('.droppable-text').textContent}.`, 'success');
} else {
console.error('Exercise 2: Draggable not found for value:', value);
}
});
});
} catch (e) {
console.error('Exercise 2: Error initializing.', e);
showExerciseFeedback('exercise2-feedback', 'Error: Initialization failed.', 'error');
}
}
function checkExercise2() {
try {
console.log('Checking Exercise 2 answers.');
const answers = {
'A': 'Standard German',
'B': 'Colloquial German',
'C': 'Bavarian',
'D': 'Swabian'
};
let correct = 0;
let feedback = '
';
const droppables = document.querySelectorAll('.droppable');
if (!droppables.length) {
console.warn('Exercise 2: No droppable zones found.');
showExerciseFeedback('exercise2-feedback', 'Error: Drop zones not found.', 'error');
return;
}
droppables.forEach(dropZone => {
const dialectId = dropZone.getAttribute('data-id');
const phraseAnswer = dropZone.querySelector('.draggable')?.getAttribute('data-answer')?.trim();
const dialectText = dropZone.querySelector('.droppable-text').textContent.trim();
if (phraseAnswer && phraseAnswer === dialectId) {
correct++;
feedback += `- ${dropZone.querySelector('.draggable').textContent}: Correct!
`;
} else if (phraseAnswer) {
feedback += `- ${dropZone.querySelector('.draggable').textContent}: Incorrect. Should be in ${answers[phraseAnswer]}.
`;
} else {
feedback += `- ${dialectText}: No phrase placed.
`;
}
});
document.querySelectorAll('#greetings-list .draggable').forEach(item => {
const phraseAnswer = item.getAttribute('data-answer').trim();
feedback += `- ${item.textContent}: Not placed.
`;
});
feedback += '
';
const total = Object.keys(answers).length;
showExerciseFeedback('exercise2-feedback', `${correct}/${total} correct. ${feedback}`, correct === total ? 'success' : 'error');
console.log(`Exercise 2: Check complete: ${correct}/${total} correct.`);
awardPoints('ex2', correct === total);
} catch (e) {
console.error('Exercise 2: Error checking answers.', e);
showExerciseFeedback('exercise2-feedback', 'Error: Unable to check answers.', 'error');
}
}
function resetExercise2() {
try {
console.log('Resetting Exercise 2.');
const originalContainer = document.getElementById('greetings-list');
if (!originalContainer) {
console.error('Exercise 2: Container (#greetings-list) not found.');
showExerciseFeedback('exercise2-feedback', 'Error: Reset failed.', 'error');
return;
}
document.querySelectorAll('.droppable').forEach(dropZone => {
const draggable = dropZone.querySelector('.draggable');
if (draggable) {
originalContainer.appendChild(draggable);
}
dropZone.classList.remove('has-draggable');
const droppableText = dropZone.querySelector('.droppable-text');
if (droppableText) droppableText.style.display = 'block';
});
const draggableData = [
{ answer: 'A', text: 'Guten Morgen' },
{ answer: 'B', text: 'Na, wie läuft’s' },
{ answer: 'C', text: 'Servus' },
{ answer: 'D', text: 'Grüß di' }
];
originalContainer.innerHTML = '';
draggableData.forEach(data => {
const item = document.createElement('li');
item.className = 'list-group-item draggable';
item.setAttribute('draggable', 'true');
item.setAttribute('data-answer', data.answer);
item.textContent = data.text;
item.style.cssText = 'position: relative; opacity: 1; padding: 10px 15px; font-size: 16px; margin-bottom: 8px;';
originalContainer.appendChild(item);
});
initializeExercise2();
console.log('Exercise 2: Reset complete.');
showExerciseFeedback('exercise2-feedback', 'Exercise 2 reset.', 'success');
} catch (e) {
console.error('Exercise 2: Error resetting exercise.', e);
showExerciseFeedback('exercise2-feedback', 'Error: Reset failed.', 'error');
}
}
// Exercise 2 Functions Section End
// Initialization Section Start
// Initialize
document.addEventListener('DOMContentLoaded', () => {
try {
updateProgress();
updateQuizProgress();
updateGrammarProgress();
initializeGrammarDragAndDrop();
initializeExercise2();
nextFlashcard();
} catch (e) {
console.error('Initialization: Error during initialization.', e);
}
});
// Initialization Section End
// Custom JavaScript Section End
0 Comments:
Post a Comment