Woalis/destination.html

## destination.html
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="/dynamic.js"></script>
</head>
<body>
<div data-DynamicJSdestination="Destination1" data-file="/pages/dynamicsource.html" data-source="dynamicdemo1" data-playername="Alice" data-setting="The Black Forest"></div>
<hr>
<p><a href="#" data-DynamicJSlink="Destination1" data-source="dynamicdemo3">Skip to the end</a></p>
</body>
</html>

## dynamic.js
document.addEventListener('DOMContentLoaded', () => {
  const dynamicContainers = document.querySelectorAll('[data-DynamicJSdestination]');

  dynamicContainers.forEach(container => {
    const fileToLoad = container.getAttribute('data-file') || '/styles/source.html'; // Default file

    // Fetch the source HTML file
    fetch(fileToLoad)
      .then(response => response.text())
      .then(data => {
        container.innerHTML = data;

        // Get the default scene from data-source
        const defaultScene = container.getAttribute('data-source') || 'scenedefault';

        // Load the initial scene for this specific container
        loadScene(container, defaultScene);

        // Apply data-* values
        applyDataAttributes(container);
      })
      .catch(err => console.error('Error loading source content:', err));
  });
});

// Function to load the requested scene for a specific container
function loadScene(container, sceneId) {
  // Hide all scenes inside this specific container
  const scenes = container.querySelectorAll('[data-DynamicJSsource]');
  scenes.forEach(scene => scene.style.display = 'none');

  // Show the selected scene
  const sceneToShow = container.querySelector(`[data-DynamicJSsource="${sceneId}"]`);
  if (sceneToShow) {
    sceneToShow.style.display = 'block';

    // Apply data-* updates after switching scenes
    applyDataAttributes(container);
  }
}

// Function to apply data-* attributes within the active scene
function applyDataAttributes(container) {
  const activeScene = container.querySelector('[data-DynamicJSsource][style*="display: block"]');
  if (!activeScene) return;

  // Loop through all data-* attributes in the container
  for (const attr of container.attributes) {
    if (attr.name.startsWith('data-') && attr.name !== 'data-source' && attr.name !== 'data-file' && attr.name !== 'data-DynamicJSdestination') {
      const targetAttr = attr.name; // Use the full data-* attribute name
      const targetValue = attr.value; // Extract value

      // Find all matching elements inside the active scene using data-* attributes
      const targetElements = activeScene.querySelectorAll(`[${targetAttr}]`);
      targetElements.forEach(targetElement => {
        targetElement.textContent = targetValue;
      });
    }
  }
}

// Function to handle scene transitions based on links
document.addEventListener('click', (event) => {
  const target = event.target.closest('[data-DynamicJSlink]');
  if (target) {
    event.preventDefault();

    const targetContainerId = target.getAttribute('data-DynamicJSlink');
    const targetScene = target.getAttribute('data-source');

    if (targetContainerId && targetScene) {
      const targetContainer = document.querySelector(`[data-DynamicJSdestination="${targetContainerId}"]`);
      if (targetContainer) {
        loadScene(targetContainer, targetScene);
      }
    }
  }
});

## source.html
<!DOCTYPE html>
<html lang="en">
<body>
<div data-DynamicJSsource="dynamicdemo1">
    <h2>Welcome to the Adventure!</h2>
    <p>Welcome, <span data-playername>Traveller</span>! Are you ready to begin the adventure?</p>
    <a href="#" data-DynamicJSlink="Destination1" data-source="dynamicdemo2">Begin</a>
</div>

<div data-DynamicJSsource="dynamicdemo2">
    <h2>The Journey Begins</h2>
    <p>You find yourself before <span data-setting>a mysterious place</span>. Be careful, <span data-playername>Traveler</span>. You can go forth if you are ready.</p>
    <p><a href="#" data-DynamicJSlink="Destination1" data-source="dynamicdemo1">Go back</a> | <a href="#" data-DynamicJSlink="Destination1" data-source="dynamicdemo3">Continue</a></p>
</div>

<div data-DynamicJSsource="dynamicdemo3">
    <h2><span data-setting>Mysterious Place</span></h2>
    <p>You are surrounded by trees, and an eerie silence fills the air. Something seems off, and a voice announces:</p>
    <p><span data-playername>Traveler</span>, you are not actually in <span data-setting>a mysterious place</span>, but a demonstration of how a javascript can pull elements from source.html to display in a specific element in a destination.html. As you have already learned, it is possible to switch content with a hyperlink.</p>
    <p><a href="#" data-DynamicJSlink="Destination1" data-source="dynamicdemo1">Return to the start</a></p>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="/dynamic.js"></script>
	</head>
	<body>
	<div data-DynamicJSdestination="Destination1" data-file="/pages/dynamicsource.html" data-source="dynamicdemo1" data-playername="Alice" data-setting="The Black Forest"></div>
	<hr>
	<p><a href="#" data-DynamicJSlink="Destination1" data-source="dynamicdemo3">Skip to the end</a></p>
	</body>
	</html>
	document.addEventListener('DOMContentLoaded', () => {
	const dynamicContainers = document.querySelectorAll('[data-DynamicJSdestination]');

	dynamicContainers.forEach(container => {
	const fileToLoad = container.getAttribute('data-file') \|\| '/styles/source.html'; // Default file

	// Fetch the source HTML file
	fetch(fileToLoad)
	.then(response => response.text())
	.then(data => {
	container.innerHTML = data;

	// Get the default scene from data-source
	const defaultScene = container.getAttribute('data-source') \|\| 'scenedefault';

	// Load the initial scene for this specific container
	loadScene(container, defaultScene);

	// Apply data-* values
	applyDataAttributes(container);
	})
	.catch(err => console.error('Error loading source content:', err));
	});
	});

	// Function to load the requested scene for a specific container
	function loadScene(container, sceneId) {
	// Hide all scenes inside this specific container
	const scenes = container.querySelectorAll('[data-DynamicJSsource]');
	scenes.forEach(scene => scene.style.display = 'none');

	// Show the selected scene
	const sceneToShow = container.querySelector(`[data-DynamicJSsource="${sceneId}"]`);
	if (sceneToShow) {
	sceneToShow.style.display = 'block';

	// Apply data-* updates after switching scenes
	applyDataAttributes(container);
	}
	}

	// Function to apply data-* attributes within the active scene
	function applyDataAttributes(container) {
	const activeScene = container.querySelector('[data-DynamicJSsource][style*="display: block"]');
	if (!activeScene) return;

	// Loop through all data-* attributes in the container
	for (const attr of container.attributes) {
	if (attr.name.startsWith('data-') && attr.name !== 'data-source' && attr.name !== 'data-file' && attr.name !== 'data-DynamicJSdestination') {
	const targetAttr = attr.name; // Use the full data-* attribute name
	const targetValue = attr.value; // Extract value

	// Find all matching elements inside the active scene using data-* attributes
	const targetElements = activeScene.querySelectorAll(`[${targetAttr}]`);
	targetElements.forEach(targetElement => {
	targetElement.textContent = targetValue;
	});
	}
	}
	}

	// Function to handle scene transitions based on links
	document.addEventListener('click', (event) => {
	const target = event.target.closest('[data-DynamicJSlink]');
	if (target) {
	event.preventDefault();

	const targetContainerId = target.getAttribute('data-DynamicJSlink');
	const targetScene = target.getAttribute('data-source');

	if (targetContainerId && targetScene) {
	const targetContainer = document.querySelector(`[data-DynamicJSdestination="${targetContainerId}"]`);
	if (targetContainer) {
	loadScene(targetContainer, targetScene);
	}
	}
	}
	});