https://cdn2.goodwall.io/app/gw/js/learning-carousel-a44a8098c9eafc8b742e1cf1e6235145.js?vsn=d

1document.addEventListener('DOMContentLoaded', function () {
2  var videoMap = {
3    ScrollToLearn: '01ScrollToLearn/mp4/mp4_2100.mp4',
4    CompleteCourses: '02CompleCourses/mp4/mp4_2100.mp4',
5    GetCertified: '03GetCertified/mp4/mp4_2100.mp4',
6    WinChallenges: '04WinChallenges/mp4/mp4_2100.mp4',
7    GetPaid: '05GetPaid/mp4/mp4_2100.mp4',
8    CelebrateWithFriends: '06CelebrateWithFriends/mp4/mp4_2100.mp4'
9  };
10
11  document.querySelectorAll('.learning__interactive').forEach(function (interactive) {
12    var buttons = interactive.querySelectorAll('.learning__btn');
13    var video = interactive.querySelector('.learning__phone-video');
14    if (!buttons.length || !video) return;
15
16    var basePath = video.getAttribute('data-video-base');
17    var activeIndex = 0;
18    var timer;
19    var captions = interactive.querySelectorAll('.learning__caption[data-video-caption]');
20    var buttonsContainer = interactive.querySelector('.learning__buttons');
21
22    function centerActiveButton() {
23      if (window.innerWidth >= 800 || !buttonsContainer) return;
24      var btn = buttons[activeIndex];
25      var containerRect = buttonsContainer.getBoundingClientRect();
26      var btnRect = btn.getBoundingClientRect();
27      var btnCenter = btnRect.left + btnRect.width / 2;
28      var containerCenter = containerRect.left + containerRect.width / 2;
29      buttonsContainer.scrollLeft += btnCenter - containerCenter;
30    }
31
32    function activate(index) {
33      buttons[activeIndex].classList.remove('learning__btn--active');
34      activeIndex = index;
35      buttons[activeIndex].classList.add('learning__btn--active');
36      centerActiveButton();
37
38      var key = buttons[activeIndex].getAttribute('data-video');
39      captions.forEach(function (caption) {
40        caption.classList.toggle(
41          'learning__caption--active',
42          caption.getAttribute('data-video-caption') === key
43        );
44      });
45
46      var videoSrc = buttons[activeIndex].getAttribute('data-video-src');
47      var source = video.querySelector('source');
48      source.setAttribute('src', videoSrc || basePath + videoMap[key]);
49      source.setAttribute('type', 'video/mp4');
50      video.load();
51      video.play();
52    }
53
54    function startTimer() {
55      clearInterval(timer);
56      timer = setInterval(function () {
57        activate((activeIndex + 1) % buttons.length);
58      }, 6000);
59    }
60
61    buttons.forEach(function (btn, i) {
62      btn.addEventListener('click', function () {
63        activate(i);
64        startTimer();
65      });
66    });
67
68    startTimer();
69  });
70});