/* EDIT THESE VARIABLES */ var googleSheetID = "1u2uopBi1714N20bHfjWQJ0kfiH4UgYMMsxFk-BKW00E" var tabNumber = 20; //starts at 1 var tableID = "table3"; var table_column_size = [2, 2, 2, 6]; // others are [3, 3, 3, 3], or [3, 2, 4, 3] var table_column_names = ['Question', 'Topics', 'Skills', 'Additional Guidance']; var total_columns_of_data = 37; // should not need to change /* DO NOT TOUCH ANYTHING BELOW THIS LINE */ $(window).ready(function() { hugooglie(googleSheetID, tabNumber, tableID, table_column_size, total_columns_of_data, table_column_names); })

/* Resize iframe whenever the bot page sends its height */ window.addEventListener("message", (e) => { if (e.data && e.data.type === "resize") { document.getElementById("botFrame").style.height = e.data.h + "px"; } }); /* Toggle the comments section’s visibility and scroll to it when opened */ document.addEventListener("DOMContentLoaded", () => { const comments = document.getElementById("scroll_to_comments"); const toggleBtn = document.querySelector(".comments-toggle"); if (!comments || !toggleBtn) return; // silently exit if not found toggleBtn.addEventListener("click", () => { const nowOpen = comments.classList.toggle("open"); // flip the class if (nowOpen) { /* give the browser a tick to apply visibility, then scroll */ requestAnimationFrame(() => comments.scrollIntoView({ behavior: "smooth", block: "start" }) ); } }); });

document.addEventListener('DOMContentLoaded', function() { // Attach click event to all elements with class 'pl-vid' runVideos(); }); // Run the code when the lecture changes document.addEventListener('lecture:change', function() { runVideos(); }); function runVideos() { document.querySelectorAll('.pl-vid').forEach(button => { button.parentElement.addEventListener('click', function(event) { event.preventDefault(); // Prevent default anchor click behavior // Extract the ID from the clicked button's parent element const buttonId = this.id; const videoId = buttonId.split('-')[1]; // Find the closest .tab-main-content and then the corresponding player container const tabContent = this.closest('.tab-main-content'); const playerContainer = tabContent.querySelector('.embed-container > div, .embed-containerx > div'); // made this change // Check if the playerContainer exists if (playerContainer) { // Initialize the Vimeo Player in the correct container let videoPlayer = new Vimeo.Player(playerContainer, { id: videoId, responsive: true }); // get the timestamp from the data attribue if exists otherwise 6 const timeStart = parseInt(this.getAttribute('data-video-start')) ?? 6; // Load and play the video at the 6-second mark videoPlayer.loadVideo(videoId).then(function(id) { videoPlayer.setCurrentTime(timeStart); videoPlayer.play(); }).catch(function(error) { console.error('Error loading video:', error); }); } else { console.error('Player container not found for video ID:', videoId); } }); }); } var teachable_user_id = currentUser().id; var name = currentUser().name; var email = currentUser().email; var courseID = currentUser().courseId; var lectureID = currentUser().lectureId; var lectureURL = currentUser().lectureUrl; var cf8 = 'Extra_Field_1'; var cf9 = 'Extra_Field_2'; // Function to build the URL function buildSurveyURL(surveyID) { return `https://s.tailoredtutors.co.uk/${surveyID}/?cf1=${name}&cf2=${surveyID}j&cf3=${email}&cf4=${teachable_user_id}&cf5=${courseID}&cf6=${lectureID}&cf7=${lectureURL}&cf8=${cf8}&cf9=${cf9}`; } // Select all elements with data-survey-id and update the iframe src inside them // TODO: remove the jQuery $('[data-survey-id]').each(function() { var surveyID = $(this).attr('data-survey-id'); var buildURL = buildSurveyURL(surveyID); $(this).find('iframe').attr('src', buildURL); }); // Function to activate a tab based on the URL hash or directly via an event function activateTab(containerId, tabId) { const container = document.getElementById(containerId); if (container) { const tabPane = container.querySelector(`#${tabId}`); const tabNav = container.querySelector(`.tab-nav a[href="#${tabId}"]`)?.parentNode; if (tabPane) { // Remove active class from all tab panes in the container container.querySelectorAll('.tab-pane').forEach((pane) => pane.classList.remove('active')); container.querySelectorAll('.tab-nav ul li').forEach((nav) => nav.classList.remove('active')); // Add active class to the selected tab pane tabPane.classList.add('active'); if (tabNav) tabNav.classList.add('active'); // Update mobile dropdown updateDropdownSelection(containerId, tabId); } } } // Function to update the mobile dropdown to reflect the active tab function updateDropdownSelection(containerId, tabId) { // Construct the selector to find the dropdown within the specified container const container = document.getElementById(containerId); if (container) { const dropdown = container.querySelector('select[id="content-select"]'); if (dropdown) { const options = dropdown.querySelectorAll('option'); options.forEach(option => { if (option.value === `#${tabId}`) { dropdown.value = option.value; } }); } else { console.error(`Dropdown with ID "content-select" not found within container ${containerId}.`); } } else { console.error(`Container with ID ${containerId} not found.`); } } // Function to handle dropdown changes function handleDropdownChange(dropdown) { const selectedOption = dropdown.options[dropdown.selectedIndex]; // Extract the tab ID and container ID const value = selectedOption.value; const tabId = value.substring(1); // Remove the leading '#' const containerId = value.split('-')[0].substring(1); // Extract the container ID // Call the function to activate the tab activateTab(containerId, tabId); } // Event listener for mobile dropdowns document.querySelectorAll('select[id^="content-select"]').forEach(dropdown => { dropdown.addEventListener('change', function() { handleDropdownChange(this); }); }); // Event listener for left tab navigation links document.addEventListener('click', (e) => { if ((e.target.tagName === 'LI' || e.target.tagName === 'A') && e.target.closest('.tab-nav')) { e.preventDefault(); // Attempt to find the closest .tab-container const tabContainer = e.target.closest('.tab-container'); if (tabContainer) { // Find the parent with an ID const parentDivWithId = tabContainer.closest('.box'); const containerId = parentDivWithId ? parentDivWithId.getAttribute('id') : null; let tabId; if (e.target.tagName === 'LI') { tabId = e.target.querySelector('a').getAttribute('href'); } else { tabId = e.target.getAttribute('href'); } // Ensure tabId is a string before using substring if (typeof tabId === 'string') { const tabIdValue = tabId.substring(1); // Remove leading # activateTab(containerId, tabIdValue); const dropdown = document.getElementById('content-select'); if (dropdown) { dropdown.value = `${containerId}-${tabIdValue}`; } } else { console.error("tabId is not a string:", tabId); } } else { console.error("No .tab-container found for the clicked element."); } } }); // Add event listener to the three buttons inside the lesson content document.addEventListener('click', (e) => { if (e.target.tagName === 'A' && (e.target.closest('.tab-header-nav') || e.target.closest('.tab-main-right-sidebar'))) { e.preventDefault(); const tabId = e.target.getAttribute('href').substring(1); const tabPane = e.target.closest('.tab-pane') || document; const tabMain = tabPane.querySelector('.tab-main'); const tabMainContent = tabMain.querySelector(`#${tabId}`); // Remove active class from all tab-main-content elements tabMain.querySelectorAll('.tab-main-content').forEach(content => content.classList.remove('active')); // Remove active class from all header-nav buttons const tabHeaderNav = e.target.closest('.tab-header-nav') || tabPane.querySelector('.tab-header-nav'); tabHeaderNav.querySelectorAll('.header-nav').forEach(nav => nav.classList.remove('active')); // Add active class to the selected tab-main-content if (tabMainContent) { tabMainContent.classList.add('active'); } if (e.target.closest('.tab-main-right-sidebar')) { const correspondingHeaderNav = tabHeaderNav.querySelector(`a[href="#${tabId}"]`); if (correspondingHeaderNav) { correspondingHeaderNav.classList.add('active'); } e.target.classList.add('active'); } else { e.target.classList.add('active'); } } }); // Function to activate tab from URL function activateTabFromUrl() { const urlHash = window.location.hash; if (urlHash) { const [_, containerId, tabId] = urlHash.split('#'); if (containerId && tabId) { activateTab(containerId, `${containerId}-${tabId}`); } } else { const tabContainers = document.querySelectorAll('.tab-container'); tabContainers.forEach(container => { const firstTabLink = container.querySelector('.tab-nav a'); if (firstTabLink) { firstTabLink.click(); } }); } } // Call the function on page load window.addEventListener('load', activateTabFromUrl); // ================================= --> // Search the Google Sheet data --> // ================================= --> // Debounce function to delay the filtering function debounce(func, delay) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), delay); }; } // Function to filter questions based on input function filterQuestions() { const searchTerm = document.getElementById('searchQuestions').value.toLowerCase(); const questionWrappers = document.querySelectorAll('.questionwrapper'); questionWrappers.forEach(wrapper => { const textContent = wrapper.textContent.toLowerCase(); if (textContent.includes(searchTerm)) { wrapper.classList.remove('hidden'); } else { wrapper.classList.add('hidden'); } }); } // Apply the debounce to the filterQuestions function with a delay of 300ms const debouncedFilter = debounce(filterQuestions, 300); // Add event listener to the search input field document.getElementById('searchQuestions').addEventListener('input', debouncedFilter);