var runTime_{{uid}} = c8PlayerApi.getRuntime(); var variables_{{uid}} = runTime_{{uid}} === "PLAYER" ? getVariables() : false; var tl_{{uid}} = gsap.timeline({ paused: true }); var selectedPosition_{{uid}} = c8PlayerApi.getWidgetProp("selectedIconPosition"); var wrapper_{{uid}} = $(".wrapper-{{uid}}"); var isSmall_{{uid}} = true; var animObj_{{uid}} = { width: "100%", height: "100%", ease: "back", duration: 0.5, }; var currentLocation_{{uid}} = location.pathname.replace("/video/", ""); var { [currentLocation_{{uid}}]: allData_{{uid}} } = runTime_{{uid}} === "PLAYER" ? __IVIDEO_CONTEXT__.projects : {}; // Question Title Types var qTitleTypes_{{uid}} = { FREE_TEXT: "Free Text Questions", SINGLE_SELECT: "Single Select Questions", MULTI_SELECT: "Multiple Select Questions", FILL_IN_THE_BLANK: "Fill in the Blank Questions", }; // SET SMALL SIZE POSITION switch (selectedPosition_{{uid}}) { case "Center": wrapper_{{uid}}.addClass("center-{{uid}}"); Object.assign(animObj_{{uid}}, { top: "0" }); break; case "Top - Left": wrapper_{{uid}}.addClass("top-left-{{uid}}"); break; case "Top - Right": wrapper_{{uid}}.addClass("top-right-{{uid}}"); break; case "Bottom - Left": wrapper_{{uid}}.addClass("bottom-left-{{uid}}"); break; case "Bottom - Right": wrapper_{{uid}}.addClass("bottom-right-{{uid}}"); break; default: break; } // RENDER CONTENT if (runTime_{{uid}} === "PLAYER") { renderVariables_{{uid}}(); } // POINTER EVENTS SETTING var container_{{uid}} = $(".container-{{uid}}").parent(); if (container_{{uid}}.hasClass("c8-elem-template")) { container_{{uid}}.css("pointer-events", "none"); } // COMING ANIMATION gsap.to(".container-{{uid}}", { opacity: 1, }); // CLICK ANIMATION tl_{{uid}}.to(".wrapper-{{uid}}", animObj_{{uid}}).to(".large-{{uid}}", { display: "block", opacity: 1, duration: 0.25, ease: "none", }); // OPEN / CLOSE ACTIONS $(".narrow-{{uid}}").click(function () { outlookControl_{{uid}}(); wrapper_{{uid}}.removeClass("alarm-{{uid}}") }); $(".close-{{uid}}").click(function () { outlookControl_{{uid}}(); }); // TABS CONTROL $(".variables-{{uid}}, .question-{{uid}}, .video-{{uid}}").click(function () { document.querySelectorAll(".tab-wrapper-{{uid}} div").forEach((tab) => { tab.classList.remove("selected-{{uid}}"); }); document.querySelectorAll(".contents-{{uid}} div").forEach((cont) => { cont.classList.remove("active-{{uid}}"); }); $(this).addClass("selected-{{uid}}"); if ($(this).hasClass("variables-{{uid}}")) { $(".variables-content-{{uid}}").addClass("active-{{uid}}"); } else if ($(this).hasClass("question-{{uid}}")) { $(".questions-content-{{uid}}").addClass("active-{{uid}}"); } else { $(".video-content-{{uid}}").addClass("active-{{uid}}"); } }); /* *** ***HELPFUL FUNCTIONS *** */ function outlookControl_{{uid}}() { if (isSmall_{{uid}}) { $(".narrow-{{uid}}").toggleClass("d-none-{{uid}}"); tl_{{uid}}.play(); isSmall_{{uid}} = false; } else { tl_{{uid}}.reverse().then(() => { $(".narrow-{{uid}}").toggleClass("d-none-{{uid}}"); wrapper_{{uid}}.css("width", ""); wrapper_{{uid}}.css("height", ""); wrapper_{{uid}}.css("transform", ""); }); isSmall_{{uid}} = true; } } if (runTime_{{uid}} === "PLAYER") { c8PlayerApi.on( "variableChange", function (variableName, prevValue, newValue) { renderVariables_{{uid}}(); if(isSmall_{{uid}}){ wrapper_{{uid}}.addClass("alarm-{{uid}}") } } ); } function renderVariables_{{uid}}() { var questionContentHTML = ""; var variablesContentHTML = ""; var cloneContextData = {}; cloneContextData = { ...allData_{{uid}}.context }; var cloneUserInteractions = []; cloneUserInteractions = [...allData_{{uid}}.userInteractions]; var fillInTheBlankControl = ""; var isTitleFreeText = true; var isTitleSingleSelect = true; var isTitleMultiSelect = true; var isTitleFillInTheBlank = true; if (Object.keys(cloneContextData).length > 0) { Object.entries(cloneContextData).forEach(function (entry) { var [key, value] = entry; var fillInKey = ""; if (key.includes(".blank")) { fillInKey = key.slice(0, key.search(".blank")); } // CREATE QUESTIONS TAB CONTENT cloneUserInteractions.forEach((userInteraction) => { if ( (userInteraction.name == key || fillInKey == userInteraction.name) && userInteraction.type == "QUESTION" ) { console.log("-userInteraction-", userInteraction); if (userInteraction.questionType == "SINGLE_SELECT") { var questionOptions = ""; questionOptions += createSelectedOptions_{{uid}}( userInteraction, "single_select" ); questionContentHTML += `${ isTitleSingleSelect ? `

${ qTitleTypes_{{uid}}[userInteraction.questionType] }

` : "" }

Question:

${userInteraction.questionText}

Question Options:

${questionOptions}

`; isTitleSingleSelect = false; } else if (userInteraction.questionType == "MULTI_SELECT") { var questionOptions = ""; questionOptions += createSelectedOptions_{{uid}}( userInteraction, "multi_select" ); questionContentHTML += `${ isTitleMultiSelect ? `

${ qTitleTypes_{{uid}}[userInteraction.questionType] }

` : "" }

Question:

${userInteraction.questionText}

Question Options:

${questionOptions}

`; isTitleMultiSelect = false; } else if (userInteraction.questionType == "FREE_TEXT") { questionContentHTML += `${ isTitleFreeText ? `

${ qTitleTypes_{{uid}}[userInteraction.questionType] }

` : "" }

Question:

${userInteraction.questionText}

Answer:

${value}

`; isTitleFreeText = false; } else if (userInteraction.questionType == "FILL_IN_THE_BLANK") { if (fillInTheBlankControl !== fillInKey) { var questionn = userInteraction.questionText; var questionOptions = ""; while (questionn.split(" 0) { var firstIndex = questionn.indexOf(""); var getArea = questionn.substring(firstIndex, secondIndex + 2); questionn = questionn.replace(getArea, `___`); } questionOptions += createSelectedOptions_{{uid}}( userInteraction, "fill_in_the_blank" ); questionContentHTML += `${ isTitleFillInTheBlank ? `

${ qTitleTypes_{{uid}}[userInteraction.questionType] }

` : "" }

Question:

${questionn}

Answer:

${questionOptions}

`; } fillInTheBlankControl = fillInKey; isTitleFillInTheBlank = false; } else { console.log("else"); } delete cloneContextData[String(key)]; $(".questions-content-{{uid}}").html(`

${questionContentHTML}`); } }); }); // CREATE VARIABLES TAB CONTENT Object.entries(cloneContextData).forEach(function (entry) { var [key, value] = entry; if (!key.includes(".blank")) { variablesContentHTML += `

${key}:

${value}

`; } $(".variables-content-{{uid}}").html(`

${variablesContentHTML}`); }); } lineControl_{{uid}}(); } function createSelectedOptions_{{uid}}(data, type) { var questionOptions = ""; if (type === "multi_select") { data.questionOptions.map((opt) => { if (data.answer?.find((e) => e.id === opt.id)) { questionOptions += `

${opt.text}

`; } else { questionOptions += `

${opt.text}

`; } }); } else if (type === "single_select") { data.questionOptions.map((opt) => { questionOptions += `

${opt.id === data.answer.id ? "" : ""}${ opt.text }

`; }); } else if (type === "fill_in_the_blank") { data.answer?.map((opt) => { questionOptions += `

${opt.value}

`; }); } else { console.log("ELSE"); } return questionOptions; } function lineControl_{{uid}}() { $(".questions-content-{{uid}} ul li").each(function () { if (this.nextSibling?.classList) { if (this.nextSibling.classList.contains("head-{{uid}}")) { this.classList.add("last-item-{{uid}}"); } } }); }

Name	Type	Default Value
Icon Position	Select	Top - Right Top - Left Bottom - Left Bottom - Right Center
BackgroundColor	Color	rgba(0,0,0,0.7)
Text Color	Color	rgba(255,255,255,1)

Smart Streamer

Interaction Designer

Smart Streamer

Interaction Designer

Interaction Debugger

Category