Metadata Variable implementation is incorrect

Question

I have introduced an internal variable IV01_01 to store data/text for the metadata I require. Basically it should tell me out of 3 videos playing (you can go from one video to another by scrolling) how many seconds had 1 video been watched for all of them, how many times and in which order. I am not sure if my implementation is wrong or not since I am having problems with only storing this metadata and not playing videos and scrolling part.

<p> videos über scibo </p>

<div class="container" id="Container"></div>

<input type="hidden" name="IV01_01" value="">




<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow: hidden;
    background: transparent;
  }
  .tiktok-container {
    height: 55vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    background: transparent;
  }
  .tiktok-item {
    position: relative;
    height: 55vh;
    scroll-snap-align: start;
    background-color: ##fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .player-wrapper {
    width: auto;
    height: 100%;
    background: transparent;
    position: relative;
    transition: opacity 0.4s ease;
    opacity: 0.6; /* inaktiv: etwas ausgeblendet */
  }
  .player-wrapper video {
    height: 100%;
    width: auto;
    display: block;
    margin: auto;
  }
  .tiktok-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
  }
  .active {
    opacity: 1 !important;
  }
</style>





<script>
  var videoList = [
    { id: 'video1', src: 'https://uni-duisburg-essen.sciebo.de/s/YhrGEzGF5jbHqCA/download', label: 'Video 1' },
    { id: 'video2', src: 'https://uni-duisburg-essen.sciebo.de/s/33UBk0sF5QplmOo/download', label: 'Video 2' },
    { id: 'video3', src: 'https://uni-duisburg-essen.sciebo.de/s/BIOmfLMWX85XzKX/download', label: 'Video 3' }
  ];

  
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }
  videoList = shuffleArray(videoList);

var container = document.getElementById('Container');
  videoList.forEach(function(video) {
    var item = document.createElement('div');
    item.className = 'tiktok-item';

    var playerWrapper = document.createElement('div');
    playerWrapper.className = 'player-wrapper';
    playerWrapper.id = video.id;

    var videoElem = document.createElement('video');
    videoElem.setAttribute('playsinline', '');
    videoElem.setAttribute('muted', '');
    videoElem.setAttribute('loop', '');
    videoElem.setAttribute('preload', 'auto');
    videoElem.src = video.src;

    playerWrapper.appendChild(videoElem);

    var overlay = document.createElement('div');
    overlay.className = 'tiktok-overlay';
    overlay.innerHTML = '<p>' + (video.label || '') + '</p>';

    item.appendChild(playerWrapper);
    item.appendChild(overlay);
    container.appendChild(item);
  });

  var videoStats = {
      viewCounts: {},
      viewDurations: {},
      displayOrder: []
  };

  var currentVisibleVideoId = null;
  var currentViewStart = null;

  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio >= 0.75) {
        var newVideoId = entry.target.querySelector('.player-wrapper').id;
        if (currentVisibleVideoId !== newVideoId) {
          if (currentVisibleVideoId !== null && currentViewStart) {
            var elapsed = Date.now() - currentViewStart;
            videoStats.viewDurations[currentVisibleVideoId] = (videoStats.viewDurations[currentVisibleVideoId] || 0) + elapsed;
            var prevVideoElem = document.querySelector('#' + currentVisibleVideoId + ' video');
            if (prevVideoElem) {
              prevVideoElem.pause();
              document.getElementById(currentVisibleVideoId).classList.remove('active');
            }
          }
          currentVisibleVideoId = newVideoId;
          currentViewStart = Date.now();
          videoStats.viewCounts[newVideoId] = (videoStats.viewCounts[newVideoId] || 0) + 1;
          videoStats.displayOrder.push(newVideoId);

          var currentVideoElem = document.querySelector('#' + newVideoId + ' video');
          if (currentVideoElem) {
            document.getElementById(newVideoId).classList.add('active');
            currentVideoElem.play();
          }
        }
      }
    });
  }, { threshold: [0.75] });

  document.querySelectorAll('.tiktok-item').forEach(function(item) {
    observer.observe(item);
  });

  function scrollToItem(index) {
    var items = document.querySelectorAll('.tiktok-item');
    if (index < 0) index = 0;
    if (index >= items.length) index = items.length - 1;
    items[index].scrollIntoView({ behavior: 'smooth' });
  }
  document.addEventListener('keydown', function(e) {
    var items = document.querySelectorAll('.tiktok-item');
    var currentIndex = 0;
    items.forEach(function(item, i) {
      if (item.querySelector('.player-wrapper').id === currentVisibleVideoId) {
        currentIndex = i;
      }
    });
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      scrollToItem(currentIndex + 1);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      scrollToItem(currentIndex - 1);
    }
  });

    function updateHiddenInput() {
    document.getElementsByName('IV01_01')[0].value = JSON.stringify(videoStats);
    }

  window.addEventListener('beforeunload', function() {
    if (currentVisibleVideoId && currentViewStart) {
      var elapsed = Date.now() - currentViewStart;
      videoStats.viewDurations[currentVisibleVideoId] = (videoStats.viewDurations[currentVisibleVideoId] || 0) + elapsed;
    }
    updateHiddenInput();
  });
</script>

Answer 1

 <input type="hidden" name="IV01_01" value="">

You must not add this HTML code manually, please.

Instead, drag the question IV01 on the page, so that SoSci Survey knows that you're using the internal variable.

You should also replace

document.getElementsByName('IV01_01')

by

document.getElementById('IV01_01')

Usually, it is also better to integrage CSS code via pageCSS() instead of putting the <style> into the content.

Except from that, I am not aware of the scibo implementation, so you'll have to test whether the function that is setting the variable, is called:

function updateHiddenInput() {
    console.log("Store data", videoStats);
    document.getElementsByName('IV01_01')[0].value = JSON.stringify(videoStats);
}

The console.log will write into the browser console, giving you something to check what's going on.