feat: add embedded quiz modal functionality
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
This commit is contained in:
parent
c3dff2394c
commit
ffb3945e19
2 changed files with 35 additions and 8 deletions
15
global.js
15
global.js
|
@ -15,7 +15,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
// Function to get URL parameters
|
// Function to get URL parameters
|
||||||
function getUrlParameter(name) {
|
function getUrlParameter(name) {
|
||||||
url = document.location.href;
|
url = document.location.href;
|
||||||
urlobj = new URL(url)
|
urlobj = new URL(url);
|
||||||
return urlobj.searchParams.get(name);
|
return urlobj.searchParams.get(name);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -53,6 +53,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
.then(() => {
|
.then(() => {
|
||||||
console.log("Bootstrap loaded successfully");
|
console.log("Bootstrap loaded successfully");
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
var embedded = getUrlParameter("embed");
|
||||||
|
|
||||||
// Set required attribute on inputs associated with labels containing <i title="Required field">
|
// Set required attribute on inputs associated with labels containing <i title="Required field">
|
||||||
$('label:has(i[title="Required field"])').each(function () {
|
$('label:has(i[title="Required field"])').each(function () {
|
||||||
var inputId = $(this).attr("for");
|
var inputId = $(this).attr("for");
|
||||||
|
@ -91,16 +93,19 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
encodeURIComponent(submitButton.val());
|
encodeURIComponent(submitButton.val());
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(formData);
|
|
||||||
|
|
||||||
// Perform the AJAX request
|
// Perform the AJAX request
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: form.attr("action"), // Use the form's action attribute
|
url: form.attr("action"), // Use the form's action attribute
|
||||||
type: form.attr("method"), // Use the form's method attribute
|
type: form.attr("method"), // Use the form's method attribute
|
||||||
data: formData,
|
data: formData,
|
||||||
success: function (response) {
|
success: function (response) {
|
||||||
// Call the nextContent function upon successful submission
|
// Close the modal if `modal=1` is set
|
||||||
window.top.nextContent();
|
if (embedded === "1") {
|
||||||
|
window.top.closeQuizModal();
|
||||||
|
} else {
|
||||||
|
// Else call the nextContent function
|
||||||
|
window.top.nextContent();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
error: function (xhr, status, error) {
|
error: function (xhr, status, error) {
|
||||||
// Handle any errors that occur during the AJAX request
|
// Handle any errors that occur during the AJAX request
|
||||||
|
|
28
script.js
28
script.js
|
@ -26,8 +26,7 @@ function getFeedbackLinks() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Return the 1-indexed list of href attributes
|
return feedbackLinks;
|
||||||
return feedbackLinks.map((href, index) => ({ index: index + 1, href }));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var currentScript = document.currentScript;
|
var currentScript = document.currentScript;
|
||||||
|
@ -136,6 +135,30 @@ loadScript(
|
||||||
nextActivity = nextContent;
|
nextActivity = nextContent;
|
||||||
window.top.nextContent = 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)
|
$(currentScript)
|
||||||
.parent()
|
.parent()
|
||||||
.append(
|
.append(
|
||||||
|
@ -147,7 +170,6 @@ loadScript(
|
||||||
|
|
||||||
var button = $("#contentButton-" + scriptId);
|
var button = $("#contentButton-" + scriptId);
|
||||||
button.click(function () {
|
button.click(function () {
|
||||||
console.log("Button clicked!");
|
|
||||||
showContent(
|
showContent(
|
||||||
contentUrl,
|
contentUrl,
|
||||||
$(currentScript).closest("li.section").attr("id")
|
$(currentScript).closest("li.section").attr("id")
|
||||||
|
|
Loading…
Reference in a new issue