// Accordion functionality const acc = document.getElementsByClassName(“accordion”); for (let i = 0; i { card.addEventListener(‘click’, function() { this.style.transform = this.style.transform === ‘rotateY(180deg)’ ? ‘rotateY(0deg)’ : ‘rotateY(180deg)’; }); }); // Match the following functionality let draggedItem = null; const matchItems = document.querySelectorAll(‘.match-item’); matchItems.forEach(item => { item.addEventListener(‘dragstart’, function() { draggedItem = this; setTimeout(() => this.style.opacity = ‘0.4’, 0); }); item.addEventListener(‘dragend’, function() { setTimeout(() => this.style.opacity = ‘1’, 0); }); }); const targets = document.querySelectorAll(‘.match-target’); targets.forEach(target => { target.addEventListener(‘dragover’, function(e) { e.preventDefault(); }); target.addEventListener(‘dragenter’, function(e) { e.preventDefault(); this.style.backgroundColor = ‘#d5f5e3’; }); target.addEventListener(‘dragleave’, function() { this.style.backgroundColor = ”; }); target.addEventListener(‘drop’, function() { this.style.backgroundColor = ”; if (draggedItem) { this.appendChild(draggedItem); } }); }); document.getElementById(‘check-match’).addEventListener(‘click’, function() { const feedback = document.getElementById(‘match-feedback’); const targets = document.querySelectorAll(‘.match-target’); let correct = 0; targets.forEach(target => { const items = target.querySelectorAll(‘.match-item’); if (items.length === 1) { const phrase = items[0].textContent.trim(); const category = target.dataset.category; if ( (category === ‘opening’ && (phrase === ‘I am writing to inquire about…’)) || (category === ‘middle’ && (phrase === ‘I was wondering if you could…’)) || (category === ‘closing’ && (phrase === ‘Hope to catch up with you soon!’ || phrase === ‘Yours sincerely,’)) ) { correct++; target.style.border = ‘2px solid #2ecc71’; } else { target.style.border = ‘2px solid #e74c3c’; } } else { target.style.border = ‘2px dashed #1abc9c’; } }); feedback.textContent = `You got ${correct} out of 4 correct!`; feedback.style.color = correct >= 3 ? ‘#2ecc71’ : ‘#e74c3c’; }); // Quiz functionality document.getElementById(‘check-quiz’).addEventListener(‘click’, function() { const feedback = document.getElementById(‘quiz-feedback’); const questions = document.querySelectorAll(‘.quiz-question’); let correct = 0; questions.forEach(question => { const selected = question.querySelector(‘input[type=”radio”]:checked’); if (selected && selected.hasAttribute(‘data-correct’)) { correct++; selected.parentElement.style.color = ‘#2ecc71’; } else if (selected) { selected.parentElement.style.color = ‘#e74c3c’; const correctOption = question.querySelector(‘input[data-correct]’); if (correctOption) { correctOption.parentElement.style.color = ‘#2ecc71’; correctOption.parentElement.style.fontWeight = ‘bold’; } } }); feedback.textContent = `You scored ${correct} out of 5!`; feedback.style.color = correct >= 3 ? ‘#2ecc71’ : ‘#e74c3c’; });