troodle-expcontent/global.js
Kumi 85d50e19b8
refactor: simplify script loading and enhance quiz modal
Removed jQuery and Bootstrap loading logic in favor of directly waiting for Bootstrap, reducing complexity and potential errors. Introduced a flag to manage sequential opening of quiz modals, improving UX by ensuring transitions to subsequent quizzes occur seamlessly.
2024-09-06 11:09:44 +02:00

183 lines
6.6 KiB
JavaScript

document.addEventListener("DOMContentLoaded", function () {
// Function to load a script into the DOM
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 to get URL parameters
function getUrlParameter(name) {
const url = document.location.href;
const urlobj = new URL(url);
return urlobj.searchParams.get(name);
}
// Function to wait until a global variable is defined
function waitForGlobalVariable(variableName) {
return new Promise((resolve) => {
const checkVariable = setInterval(() => {
if (window[variableName]) {
clearInterval(checkVariable);
resolve();
}
}, 100);
});
}
// Check if the 'embed' parameter is set to '1'
if (getUrlParameter("embed") === "1") {
// Apply custom CSS to hide Moodle interface elements
const style = document.createElement("style");
style.innerHTML = `
body.path-mod {
#header, #footer, .breadcrumb, .navbar, .side-pre, .side-post, .drawer, .drawer-toggler, .footer-popover, .navigation {
display: none !important;
}
#region-main {
margin: 0;
padding: 0;
}
}
`;
document.head.appendChild(style);
waitForGlobalVariable("bootstrap")
.then(() => {
console.log("Bootstrap loaded successfully");
$(document).ready(function () {
$(".btn-secondary:contains('Back')").hide();
const embedded = getUrlParameter("embed");
const inModal = getUrlParameter("modal");
const page = getUrlParameter("page") ? getUrlParameter("page") : 0;
// Set required attribute on inputs associated with labels containing <i title="Required field">
$('label:has(i[title="Required field"])').each(function () {
const inputId = $(this).attr("for");
$("#" + inputId).attr("required", "required");
});
// Hide the modal if the 'cancel' button is clicked
$("[name=cancel]").click(function () {
hideContent();
});
$("form").each(function () {
const form = $(this);
// Check if the form has a button where the text contains "Finish attempt"
let isLast = false;
const finishButton = form.find('input[type="submit"][value*="Finish attempt"]');
if (finishButton.length) {
isLast = true;
}
form.submit(function (event) {
event.preventDefault(); // Prevent the default form submission
// Check if the form is valid
if (!form[0].checkValidity()) {
form[0].reportValidity();
return;
}
// Serialize the form data
let formData = form.serialize();
// Add the submit button's data to formData
const submitButton = form.find(
'input[type="submit"][name="savevalues"]'
);
if (submitButton.length) {
formData +=
"&" +
encodeURIComponent(submitButton.attr("name")) +
"=" +
encodeURIComponent(submitButton.val());
}
const sesskey = form.find('input[name=sesskey]').val();
const attempt = form.find('input[name=attempt]').val();
// Perform the AJAX request
$.ajax({
url: form.attr("action"), // Use the form's action attribute
type: form.attr("method"), // Use the form's method attribute
data: formData,
success: function (response, status, xhr) {
if (form.attr("action").includes("/quiz/")) {
// Check if the quiz has a next page by calling the attempt.php page
let nextUrl = form.attr("action").replace("processattempt", "attempt");
nextUrl += "&page=" + (parseInt(page) + 1) + "&attempt=" + attempt + "&sesskey=" + sesskey;
if (isLast) {
nextUrl = "https://invalid.invalid";
}
$.get(nextUrl, function (response) {
console.log(nextUrl + " seems to be a valid URL, redirecting...");
nextUrl = nextUrl + "&embed=1";
if (inModal === "1") {
nextUrl += "&modal=1";
}
document.location.href = nextUrl;
return;
})
.fail(function () {
console.log("No next page found at " + nextUrl + ", finalizing attempt...");
const finalize = "/mod/quiz/processattempt.php";
const data = {
attempt: attempt,
finishattempt: 1,
sesskey: sesskey,
};
$.post(finalize, data, function (response) {
console.log(response);
// Close the modal if `modal=1` is set
if (inModal === "1") {
window.top.closeQuizModal();
} else {
// Else call the nextContent function
window.top.nextContent();
}
});
});
} else {
// Close the modal if `modal=1` is set
if (inModal === "1") {
window.top.closeQuizModal();
} else {
// Else call the nextContent function
window.top.nextContent();
}
}
},
error: function (xhr, status, error) {
// Handle any errors that occur during the AJAX request
console.error(
"Form submission failed: " + status + " - " + error
);
},
});
});
});
});
})
.catch((error) => {
console.error(error.message);
});
}
});