Kumi
321c470a23
Introduces an event observer to inject JavaScript into courses containing the exp360 activity when the course is viewed. The newly created `db/events.php` initializes event observers, while updates to `lib.php` define the event observer callback and the observer list. Enhancements to `global.js` include modal handling logic for improved UI interaction. This aids in dynamically loading required scripts, enhancing user experience in courses with exp360 activities.
176 lines
6.5 KiB
JavaScript
176 lines
6.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
const modalHTML = `
|
|
<div id="fullScreenModal" class="modal" tabindex="-1"
|
|
aria-labelledby="modalLabel" aria-hidden="true">
|
|
<div style="background-color:#294084;" class="modal-dialog modal-fullscreen">
|
|
<div style="background-color:#294084;" class="modal-content">
|
|
<div style="background-color:#294084;" class="modal-body"><iframe style="background-color:#294084;" id="modal-iframe"></iframe></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="regularModal" style="background: rgb(255,255,255,.7);" class="modal" tabindex="-2"
|
|
aria-labelledby="modalLabel" aria-hidden="true">
|
|
<div style="background-color:#294084;height:90%;" class="modal-dialog modal-lg">
|
|
<div style="background-color:#294084;height:100%;" class="modal-content">
|
|
<div style="background-color:#294084;" class="modal-body"><iframe style="background-color:#294084;width:100%;height:100%;" id="regular-modal-iframe"></iframe></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Append the modal HTML to the document body
|
|
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
|
|
|
// 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) {
|
|
url = document.location.href;
|
|
urlobj = new URL(url);
|
|
return urlobj.searchParams.get(name);
|
|
}
|
|
|
|
// Check if the 'embed' parameter is set to '1'
|
|
if (getUrlParameter("embed") === "1") {
|
|
// Apply custom CSS to hide Moodle interface elements
|
|
var 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);
|
|
|
|
loadScript(
|
|
"https://code.jquery.com/jquery-3.7.1.min.js",
|
|
"sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=",
|
|
"anonymous"
|
|
)
|
|
.then(() => {
|
|
console.log("jQuery loaded successfully");
|
|
// Load Bootstrap after jQuery is loaded
|
|
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");
|
|
$(document).ready(function () {
|
|
$(".btn-secondary:contains('Back')").hide()
|
|
|
|
var embedded = getUrlParameter("embed");
|
|
var inModal = getUrlParameter("modal");
|
|
|
|
// Set required attribute on inputs associated with labels containing <i title="Required field">
|
|
$('label:has(i[title="Required field"])').each(function () {
|
|
var 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 () {
|
|
var form = $(this);
|
|
|
|
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
|
|
var formData = form.serialize();
|
|
|
|
// Add the submit button's data to formData
|
|
var submitButton = form.find(
|
|
'input[type="submit"][name="savevalues"]'
|
|
);
|
|
if (submitButton.length) {
|
|
formData +=
|
|
"&" +
|
|
encodeURIComponent(submitButton.attr("name")) +
|
|
"=" +
|
|
encodeURIComponent(submitButton.val());
|
|
}
|
|
|
|
var sesskey = form.find('input[name=sesskey]').val();
|
|
var attempt = form.find('input[name=attempt]').val();
|
|
|
|
console.log(sesskey);
|
|
console.log(attempt);
|
|
|
|
// 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) {
|
|
if (form.attr("action").includes("/quiz/")) {
|
|
var finalize = "/mod/quiz/processattempt.php";
|
|
var 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);
|
|
});
|
|
}
|
|
});
|