Kumi
ffb3945e19
Implemented support for triggering and closing an embedded quiz modal based on URL parameters. Refactored the URL parameter retrieval function and added conditional modal handling after AJAX success. Simplified feedback link handling and added modal management functions. This enhancement improves the user experience by enabling embedded quiz handling within modal dialogs
184 lines
5.4 KiB
JavaScript
184 lines
5.4 KiB
JavaScript
function loadScript(url, integrity, crossorigin) {
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement("script");
|
|
script.src = url;
|
|
script.integrity = integrity;
|
|
script.crossOrigin = crossorigin;
|
|
script.onload = () => resolve(script);
|
|
script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
function getFeedbackLinks() {
|
|
// Select all <a> elements with the class "stretched-link"
|
|
const links = document.querySelectorAll("a.stretched-link");
|
|
|
|
// Initialize an array to store the href attributes
|
|
const feedbackLinks = [];
|
|
|
|
// Iterate through the selected links
|
|
links.forEach((link) => {
|
|
const href = link.getAttribute("href");
|
|
// Check if the href includes "/feedback/"
|
|
if (href && href.includes("/feedback/")) {
|
|
feedbackLinks.push(href);
|
|
}
|
|
});
|
|
|
|
return feedbackLinks;
|
|
}
|
|
|
|
var currentScript = document.currentScript;
|
|
|
|
var myModal = document.getElementById("fullScreenModal");
|
|
|
|
myModal.addEventListener("shown.bs.modal", function () {
|
|
var modalContent = myModal.querySelector(".modal-content");
|
|
var modalWidth = modalContent.offsetWidth;
|
|
var modalHeight = modalContent.offsetHeight;
|
|
|
|
const modalIframe = window.$("#modal-iframe");
|
|
|
|
modalIframe.css("width", "100%");
|
|
modalIframe.css("height", "100%");
|
|
modalIframe.css("border", "none");
|
|
});
|
|
|
|
loadScript(
|
|
"https://code.jquery.com/jquery-3.7.1.min.js",
|
|
"sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=",
|
|
"anonymous"
|
|
)
|
|
.then(() => {
|
|
console.log("jQuery loaded successfully");
|
|
window.$ = jQuery;
|
|
return loadScript(
|
|
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js",
|
|
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz",
|
|
"anonymous"
|
|
);
|
|
})
|
|
.then(() => {
|
|
console.log("Bootstrap loaded successfully");
|
|
var scriptId = "script-" + Math.random().toString(36).substring(2, 9);
|
|
currentScript.id = scriptId;
|
|
|
|
contentUrl = $(currentScript).attr("data-content-url");
|
|
|
|
function openInModal(url, block) {
|
|
$("#modal-iframe").attr("src", url);
|
|
if (block) {
|
|
$("#fullScreenModal").attr("data-block", block);
|
|
} else {
|
|
$("#fullScreenModal").removeAttr("data-block");
|
|
}
|
|
}
|
|
|
|
function showContent(url, block) {
|
|
bootstrap.Modal.getOrCreateInstance(
|
|
document.getElementById("fullScreenModal")
|
|
).show();
|
|
if (url) {
|
|
openInModal(url, block);
|
|
}
|
|
}
|
|
|
|
function hideContent() {
|
|
bootstrap.Modal.getOrCreateInstance(
|
|
document.getElementById("fullScreenModal")
|
|
).hide();
|
|
openInModal("about:blank");
|
|
}
|
|
|
|
function nextContent() {
|
|
// Get the currently executing <script> element
|
|
var modal = $("#fullScreenModal");
|
|
var currentLi = $("#" + modal.attr("data-block"));
|
|
|
|
// Find the next <li> sibling with the "section" class
|
|
var nextLi = currentLi.next("li.section");
|
|
|
|
// Find the <a> element with the "stretched-link" class within the next <li> element
|
|
var aLink = nextLi.find("a.stretched-link");
|
|
|
|
if (aLink.length > 0) {
|
|
// Get the "href" attribute of the <a> element
|
|
var hrefValue = aLink.attr("href");
|
|
|
|
// Check if "feedback" is in the "href" attribute
|
|
if (hrefValue.includes("feedback")) {
|
|
// Get the id URL parameter for debugging purposes
|
|
var url = new URL(hrefValue);
|
|
var id = url.searchParams.get("id");
|
|
|
|
// Replace "view" with "complete" in the "href" attribute
|
|
hrefValue = hrefValue.replace("view", "complete");
|
|
|
|
// Go to embed mode
|
|
hrefValue = hrefValue + "&embed=1";
|
|
}
|
|
|
|
return openInModal(hrefValue, nextLi.attr("id"));
|
|
} else {
|
|
// Check if there is a button with the "btn-primary" class
|
|
var button = nextLi.find("button.btn-primary");
|
|
|
|
if (button.length > 0) {
|
|
return button.click();
|
|
}
|
|
}
|
|
|
|
hideContent();
|
|
}
|
|
|
|
nextActivity = nextContent;
|
|
window.top.nextContent = nextContent;
|
|
|
|
function openQuizModal(number) {
|
|
// Get the feedback link
|
|
var href = getFeedbackLinks()[number - 1];
|
|
href = href.replace("view", "complete");
|
|
|
|
// Go to embed mode
|
|
href = href + "&embed=1&modal=1";
|
|
|
|
// Open in #regular-modal-iframe
|
|
$("#regular-modal-iframe").attr("src", href);
|
|
|
|
// Show the modal
|
|
$("#regularModal").modal("show");
|
|
}
|
|
|
|
function closeQuizModal() {
|
|
$("#regularModal").modal("hide");
|
|
$("#regular-modal-iframe").attr("src", "about:blank");
|
|
}
|
|
|
|
window.top.openQuizModal = openQuizModal;
|
|
window.top.openModal = openQuizModal;
|
|
window.top.closeQuizModal = closeQuizModal;
|
|
|
|
$(currentScript)
|
|
.parent()
|
|
.append(
|
|
`<button id="contentButton-` +
|
|
scriptId +
|
|
`"class="btn btn-primary" type="button"
|
|
> 360° Content </button>`
|
|
);
|
|
|
|
var button = $("#contentButton-" + scriptId);
|
|
button.click(function () {
|
|
showContent(
|
|
contentUrl,
|
|
$(currentScript).closest("li.section").attr("id")
|
|
);
|
|
});
|
|
$("head").append(
|
|
' <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">'
|
|
);
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
});
|