Untitled

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);
});