Untitled
user_6571963
plain_text
6 months ago
9.2 kB
3
Indexable
const userAnswers = []; let selectedSource = null; // Function to shuffle an array function shuffleArray(array) { 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]]; } } function renderActivity(data) { // Set the activity name and instruction document.getElementById('activity-name').textContent = data.name; document.getElementById('activity-instruction').textContent = data.activities[0].instruction.short; let activityContent = data.activities[0].content; const targets = data.activities[0].targets; // Replace placeholders with drop zones Object.keys(targets).forEach((key) => { const regex = new RegExp(`{{&${key} \\| drop}}`, 'g'); activityContent = activityContent.replace(regex, ` <div class="drop-zone" id="${key}" data-target="${key}"></div> `); }); // Append modified content to #activity-container document.getElementById('activity-container').innerHTML = activityContent; // Shuffle sources const sources = [...data.activities[0].sources]; shuffleArray(sources); // Render sources const sourcesContainer = document.getElementById('sources-container'); sourcesContainer.innerHTML = ''; // Clear previous sources sources.forEach((source) => { const sourceElement = document.createElement('div'); sourceElement.className = 'source'; sourceElement.id = `source-${source.id}`; sourceElement.textContent = source.label; if (data.activities[0].mode === 'click') { sourceElement.addEventListener('click', handleSourceClick); } else { sourceElement.draggable = true; sourceElement.addEventListener('dragstart', handleDragStart); } sourcesContainer.appendChild(sourceElement); }); // Add event listeners to drop zones const dropZones = document.querySelectorAll('.drop-zone'); dropZones.forEach((zone) => { if (data.activities[0].mode === 'click') { zone.addEventListener('click', handleDropClick); } else { zone.addEventListener('dragover', handleDragOver); zone.addEventListener('drop', handleDrop); zone.addEventListener('dragenter', handleDragEnter); zone.addEventListener('dragleave', handleDragLeave); } }); // Add event listener to submit button const submitButton = document.getElementById('submit-button'); if (submitButton) { submitButton.addEventListener('click', () => checkAnswers(data)); } // Add event listener to reset button const resetButton = document.getElementById('reset-button'); if (resetButton) { resetButton.addEventListener('click', () => resetActivity(data)); } // Add event listeners for the new buttons document.getElementById('showAnswersBtn').addEventListener('click', () => showCorrectAnswers(data)); document.getElementById('showUserAnswersBtn').addEventListener('click', showUserAnswers); } function handleSourceClick(event) { if (event.target.classList.contains('used')) { return; // Do nothing if the source is already used } if (selectedSource) { selectedSource.classList.remove('selected'); } selectedSource = event.target; selectedSource.classList.add('selected'); // Highlight all drop zones const dropZones = document.querySelectorAll('.drop-zone'); dropZones.forEach((zone) => { zone.classList.add('highlight'); }); } function handleDropClick(event) { if (selectedSource) { const multipleDrop = data.activities[0].multipleDrop; const sourceId = selectedSource.id; if (!multipleDrop) { // Check if the source is already used in another drop zone const used = Array.from(document.querySelectorAll('.drop-zone')).some(zone => zone.dataset.sourceId === sourceId); if (used) { return; // Do nothing if the source is already used } } // Make the previously used source pickable again const previousSourceId = event.target.dataset.sourceId; if (previousSourceId) { const previousSourceElement = document.getElementById(previousSourceId); previousSourceElement.classList.remove('used'); } event.target.textContent = selectedSource.textContent; event.target.dataset.sourceId = sourceId; selectedSource.classList.remove('selected'); selectedSource.classList.add('used'); // Mark the source as used selectedSource = null; // Remove highlight from all drop zones const dropZones = document.querySelectorAll('.drop-zone'); dropZones.forEach((zone) => { zone.classList.remove('highlight'); }); } } function handleDragStart(event) { event.dataTransfer.setData('text/plain', event.target.id); } function handleDragOver(event) { event.preventDefault(); } function handleDrop(event) { event.preventDefault(); const sourceId = event.dataTransfer.getData('text/plain'); const sourceElement = document.getElementById(sourceId); const dropZone = event.target; if (dropZone.classList.contains('drop-zone')) { const multipleDrop = data.activities[0].multipleDrop; if (!multipleDrop) { // Check if the source is already used in another drop zone const used = Array.from(document.querySelectorAll('.drop-zone')).some(zone => zone.dataset.sourceId === sourceId); if (used) { return; // Do nothing if the source is already used } } dropZone.textContent = sourceElement.textContent; dropZone.dataset.sourceId = sourceId; dropZone.classList.remove('highlight'); sourceElement.classList.add('used'); // Mark the source as used } } function handleDragEnter(event) { if (event.target.classList.contains('drop-zone')) { event.target.classList.add('highlight'); } } function handleDragLeave(event) { if (event.target.classList.contains('drop-zone')) { event.target.classList.remove('highlight'); } } function checkAnswers(data) { const dropZones = document.querySelectorAll('.drop-zone'); const targets = data.activities[0].targets; let score = 0; dropZones.forEach((zone) => { const userAnswerId = zone.dataset.sourceId; const correctAnswerId = targets[zone.id].answers[0]; const sourceElement = document.getElementById(userAnswerId); if (userAnswerId && parseInt(userAnswerId.split('-')[1]) === correctAnswerId) { zone.classList.add('correct-drop'); score++; } else { zone.classList.add('incorrect-drop'); } userAnswers.push(sourceElement ? sourceElement.textContent : ''); }); // Display score const scoreElement = document.getElementById('score'); if (scoreElement) { scoreElement.textContent = `Your score: ${score} / ${dropZones.length}`; } // Show the reset, show answers, and your answers buttons document.getElementById('reset-button').classList.remove('hidden'); document.getElementById('showAnswersBtn').classList.remove('hidden'); document.getElementById('showUserAnswersBtn').classList.remove('hidden'); // Hide the submit button document.getElementById('submit-button').classList.add('hidden'); } function showCorrectAnswers(data) { const dropZones = document.querySelectorAll('.drop-zone'); const targets = data.activities[0].targets; dropZones.forEach((zone) => { const correctAnswerId = targets[zone.id].answers[0]; const correctAnswer = data.activities[0].sources.find(source => source.id === correctAnswerId).label; zone.textContent = correctAnswer; zone.classList.add('correct-drop'); }); } function showUserAnswers() { const dropZones = document.querySelectorAll('.drop-zone'); dropZones.forEach((zone, index) => { zone.textContent = userAnswers[index]; zone.classList.remove('correct-drop', 'incorrect-drop'); }); } function resetActivity(data) { // Clear user answers userAnswers.length = 0; // Reset drop zones const dropZones = document.querySelectorAll('.drop-zone'); dropZones.forEach((zone) => { zone.textContent = ''; zone.classList.remove('correct-drop', 'incorrect-drop'); }); // Reset sources const sources = document.querySelectorAll('.source'); sources.forEach((source) => { source.classList.remove('used'); }); // Hide the reset, show answers, and your answers buttons document.getElementById('reset-button').classList.add('hidden'); document.getElementById('showAnswersBtn').classList.add('hidden'); document.getElementById('showUserAnswersBtn').classList.add('hidden'); // Show the submit button document.getElementById('submit-button').classList.remove('hidden'); // Clear the score display const scoreElement = document.getElementById('score'); if (scoreElement) { scoreElement.textContent = ''; } // Re-render the activity to shuffle sources again renderActivity(data); } // Render the activity on page load document.addEventListener('DOMContentLoaded', () => { renderActivity(data); });
Editor is loading...
Leave a Comment