feat(exp360): add EXP360 module for embedding 360° content

Introduce the EXP360 activity module to embed interactive 360° content
in Moodle. This update includes:

- Database schema for the exp360 table.
- Language support for the module.
- Frontend form to create exp360 activities.
- Script to handle 360° content embedding within a modal.
- Two new PHP scripts to display and serve 360° content.
- Version and plugin initialization.

These changes allow users to seamlessly integrate and interact with
360° content within Moodle courses.
This commit is contained in:
Kumi 2024-07-05 11:13:58 +02:00
parent 58993cbf51
commit 5b45d9ea82
Signed by: kumi
GPG key ID: ECBCC9082395383F
8 changed files with 369 additions and 179 deletions

17
db/install.xml Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" ?>
<XMLDB PATH="mod/exp360/db" VERSION="2024070500" COMMENT="exp360 module">
<TABLES>
<TABLE NAME="exp360">
<FIELDS>
<FIELD NAME="id" TYPE="int" LENGTH="10" NOTNULL="true" SEQUENCE="true" COMMENT="Primary key"/>
<FIELD NAME="course" TYPE="int" LENGTH="10" NOTNULL="true" COMMENT="Course ID"/>
<FIELD NAME="name" TYPE="char" LENGTH="255" NOTNULL="true" COMMENT="Activity name"/>
<FIELD NAME="content_id" TYPE="char" LENGTH="255" NOTNULL="true" COMMENT="Content ID"/>
<FIELD NAME="timemodified" TYPE="int" LENGTH="10" NOTNULL="true" COMMENT="Last modified time"/>
</FIELDS>
<KEYS>
<KEY NAME="primary" TYPE="primary" FIELDS="id"/>
</KEYS>
</TABLE>
</TABLES>
</XMLDB>

10
lang/en/exp360.php Normal file
View file

@ -0,0 +1,10 @@
<?php
$string['modulename'] = 'EXP360 Activity';
$string['modulenameplural'] = 'EXP360 Activities';
$string['modulename_help'] = 'Use the EXP360 module to embed interactive 360° content.';
$string['exp360:addinstance'] = 'Add a new EXP360 activity';
$string['exp360:submit'] = 'Submit EXP360 activity';
$string['exp360:view'] = 'View EXP360 activity';
$string['pluginadministration'] = 'EXP360 administration';
$string['pluginname'] = 'EXP360';

26
mod_form.php Normal file
View file

@ -0,0 +1,26 @@
<?php
require_once("$CFG->dirroot/course/moodleform_mod.php");
class mod_exp360_mod_form extends moodleform_mod {
public function definition() {
$mform = $this->_form;
$mform->addElement('header', 'general', get_string('general', 'form'));
$mform->addElement('text', 'name', get_string('exp360name', 'exp360'), array('size' => '64'));
$mform->setType('name', PARAM_TEXT);
$mform->addRule('name', null, 'required', null, 'client');
$mform->addRule('name', null, 'maxlength', 255, 'client');
$this->standard_intro_elements();
$mform->addElement('text', 'content_id', get_string('contentid', 'exp360'), array('size' => '64'));
$mform->setType('content_id', PARAM_TEXT);
$mform->addRule('content_id', null, 'required', null, 'client');
$this->standard_coursemodule_elements();
$this->add_action_buttons();
}
}

336
script.js
View file

@ -1,214 +1,192 @@
function loadScript(url, integrity, crossorigin) { (function () {
return new Promise((resolve, reject) => { function loadScript(url, integrity, crossorigin) {
const script = document.createElement("script"); return new Promise((resolve, reject) => {
script.src = url; const script = document.createElement("script");
script.integrity = integrity; script.src = url;
script.crossOrigin = crossorigin; script.integrity = integrity;
script.onload = () => resolve(script); script.crossOrigin = crossorigin;
script.onerror = () => reject(new Error(`Failed to load script: ${url}`)); script.onload = () => resolve(script);
document.head.appendChild(script); script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
}); document.head.appendChild(script);
} });
}
function getFeedbackLinks() { function getFeedbackLinks() {
// Select all <a> elements with the class "stretched-link" const links = document.querySelectorAll("a.stretched-link");
const links = document.querySelectorAll("a.stretched-link"); const feedbackLinks = [];
links.forEach((link) => {
// Initialize an array to store the href attributes const href = link.getAttribute("href");
const feedbackLinks = []; if (href) {
if (href.includes("/feedback/")) {
// Iterate through the selected links feedbackLinks.push(href);
links.forEach((link) => { } else if (href.includes("/quiz/")) {
const href = link.getAttribute("href"); feedbackLinks.push(href);
// Check if the href includes "/feedback/" }
if (href) {
if (href.includes("/feedback/")) {
feedbackLinks.push(href);
} else if (href.includes("/quiz/")) {
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");
}); });
return feedbackLinks; 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;
var currentScript = document.currentScript; var contentUrl = "/mod/exp360/view_content.php?id=" + $(currentScript).attr("data-activity-id");
var myModal = document.getElementById("fullScreenModal"); function openInModal(url, block) {
$("#modal-iframe").attr("src", url);
myModal.addEventListener("shown.bs.modal", function () { if (block) {
var modalContent = myModal.querySelector(".modal-content"); $("#fullScreenModal").attr("data-block", block);
var modalWidth = modalContent.offsetWidth; } else {
var modalHeight = modalContent.offsetHeight; $("#fullScreenModal").removeAttr("data-block");
}
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) { function showContent(url, block) {
bootstrap.Modal.getOrCreateInstance( bootstrap.Modal.getOrCreateInstance(
document.getElementById("fullScreenModal") document.getElementById("fullScreenModal")
).show(); ).show();
if (url) { if (url) {
openInModal(url, block); openInModal(url, block);
}
} }
}
function hideContent() { function hideContent() {
bootstrap.Modal.getOrCreateInstance( bootstrap.Modal.getOrCreateInstance(
document.getElementById("fullScreenModal") document.getElementById("fullScreenModal")
).hide(); ).hide();
openInModal("about:blank"); openInModal("about:blank");
} }
async function nextContent() { async function nextContent() {
// Get the currently executing <script> element var modal = $("#fullScreenModal");
var modal = $("#fullScreenModal"); var currentLi = $("#" + modal.attr("data-block"));
var currentLi = $("#" + modal.attr("data-block"));
// Find the next <li> sibling with the "section" class var nextLi = currentLi.next("li.section");
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");
var aLink = nextLi.find("a.stretched-link");
if (aLink.length > 0) { if (aLink.length > 0) {
// Get the "href" attribute of the <a> element let hrefValue = aLink.attr("href");
let hrefValue = aLink.attr("href");
// Check if "feedback" is in the "href" attribute if (hrefValue.includes("feedback")) {
if (hrefValue.includes("feedback")) { hrefValue = hrefValue.replace("view", "complete");
// Replace "view" with "complete" in the "href" attribute hrefValue = hrefValue + "&embed=1";
hrefValue = hrefValue.replace("view", "complete"); } else if (hrefValue.includes("/quiz/")) {
hrefValue = hrefValue.replace("view", "attempt");
// Go to embed mode try {
hrefValue = hrefValue + "&embed=1"; const response = await fetch(hrefValue);
} else if (hrefValue.includes("/quiz/")) { hrefValue = response.url;
// Replace "view" with "attempt" in the "href" attribute } catch (error) {
hrefValue = hrefValue.replace("view", "attempt"); console.error('Error fetching the URL:', error);
}
hrefValue = hrefValue + "&embed=1";
}
return openInModal(hrefValue, nextLi.attr("id"));
} else {
var button = nextLi.find("button.btn-primary");
if (button.length > 0) {
return button.click();
}
}
hideContent();
}
async function openQuizModal(number) {
let href = getFeedbackLinks()[number - 1];
if (href.includes("/feedback/")) {
href = href.replace("view", "complete");
} else if (href.includes("/quiz/")) {
href = href.replace("view", "attempt");
try { try {
// Call URL to see where it redirects to const response = await fetch(href);
const response = await fetch(hrefValue); href = response.url;
hrefValue = response.url;
} catch (error) { } catch (error) {
console.error('Error fetching the URL:', error); console.error('Error fetching the URL:', error);
} }
// Go to embed mode console.log(href);
hrefValue = hrefValue + "&embed=1";
} }
return openInModal(hrefValue, nextLi.attr("id")); href = href + "&embed=1&modal=1";
} else {
// Check if there is a button with the "btn-primary" class
var button = nextLi.find("button.btn-primary");
if (button.length > 0) { $("#regular-modal-iframe").attr("src", href);
return button.click();
} $("#regularModal").modal("show");
} }
hideContent(); function closeQuizModal() {
} $("#regularModal").modal("hide");
$("#regular-modal-iframe").attr("src", "about:blank");
nextActivity = nextContent;
window.top.nextContent = nextContent;
async function openQuizModal(number) {
// Get the feedback link
let href = getFeedbackLinks()[number - 1];
if (href.includes("/feedback/")) {
href = href.replace("view", "complete");
} else if (href.includes("/quiz/")) {
// Replace "view" with "attempt" in the "href" attribute
href = href.replace("view", "attempt");
try {
// Call URL to see where it redirects to
const response = await fetch(href);
href = response.url;
} catch (error) {
console.error('Error fetching the URL:', error);
}
console.log(href);
} }
// Go to embed mode // Attach global functions to window.top
href = href + "&embed=1&modal=1"; window.top.nextContent = nextContent;
window.top.openQuizModal = openQuizModal;
window.top.openModal = openQuizModal;
window.top.closeQuizModal = closeQuizModal;
window.top.goToQuiz = window.top.nextContent;
// Open in #regular-modal-iframe
$("#regular-modal-iframe").attr("src", href);
// Show the modal $(currentScript)
$("#regularModal").modal("show"); .parent()
} .append(
`<button id="contentButton-` +
scriptId +
`" class="btn btn-primary" type="button">360° Content</button>`
);
function closeQuizModal() { var button = $("#contentButton-" + scriptId);
$("#regularModal").modal("hide"); button.click(function () {
$("#regular-modal-iframe").attr("src", "about:blank"); showContent(
} contentUrl,
$(currentScript).closest("li.section").attr("id")
);
});
window.top.openQuizModal = openQuizModal; $("head").append(
window.top.openModal = openQuizModal; '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">'
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")
); );
})
.catch((error) => {
console.error(error);
}); });
$("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);
});

50
test.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
overflow: hidden;
}
</style>
</head>
<body>
<script src='https://cdn.exp360.com/embed/js/exp360-embed-3.8.59.js?v=3&d=d667dff2-97bb-437e-85d2-f7550d87a4d0&p=web'></script>
<script>
function startContent() {
exp360.openContent('{1513cf9a-d385-4793-b97e-d7626ab6c12a}', { popup: false,autorotate:true,autorotate_speed:5,autorotate_delay:2500,teleport_animation:false });
}
var currentUrl = window.location.href;
var url = new URL(currentUrl);
var searchParams = new URLSearchParams(url.search);
var params = {};
searchParams.forEach((value, key) => {
params[key] = value;
});
function initialize() {
// Create a new div element
var newDiv = document.createElement("div");
// Set the required attributes
newDiv.setAttribute("data-exp360-type", "player");
var contentId = params['contentid'] || '1513cf9a-d385-4793-b97e-d7626ab6c12a';
newDiv.setAttribute("data-exp360-id", contentId);
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
// Set the data-exp360-params attribute with the current window width and height
newDiv.setAttribute("data-exp360-params", `width=${windowWidth};height=${windowHeight};`);
// Append the new div to the body (or another desired parent element)
document.body.appendChild(newDiv);
}
window.onload = initialize;
</script>
</body>
</html>

7
version.php Normal file
View file

@ -0,0 +1,7 @@
<?php
defined('MOODLE_INTERNAL') || die();
$plugin->version = 2024070500; // The current module version (Date: YYYYMMDDXX)
$plugin->requires = 2021051700; // Requires this Moodle version
$plugin->component = 'mod_exp360'; // Full name of the plugin (used for diagnostics)

36
view.php Normal file
View file

@ -0,0 +1,36 @@
<?php
require_once(dirname(dirname(dirname(__FILE__))) . '/config.php');
require_once(dirname(__FILE__) . '/lib.php');
$id = optional_param('id', 0, PARAM_INT); // Course Module ID
$n = optional_param('n', 0, PARAM_INT); // exp360 instance ID
if ($id) {
$cm = get_coursemodule_from_id('exp360', $id, 0, false, MUST_EXIST);
$course = $DB->get_record('course', array('id' => $cm->course), '*', MUST_EXIST);
$exp360 = $DB->get_record('exp360', array('id' => $cm->instance), '*', MUST_EXIST);
} else if ($n) {
$exp360 = $DB->get_record('exp360', array('id' => $n), '*', MUST_EXIST);
$course = $DB->get_record('course', array('id' => $exp360->course), '*', MUST_EXIST);
$cm = get_coursemodule_from_instance('exp360', $exp360->id, $course->id, false, MUST_EXIST);
} else {
print_error('You must specify a course_module ID or an instance ID');
}
require_login($course, true, $cm);
$PAGE->set_url('/mod/exp360/view.php', array('id' => $cm->id));
$PAGE->set_title(format_string($exp360->name));
$PAGE->set_heading(format_string($course->fullname));
echo $OUTPUT->header();
$content_id = $exp360->content_id;
echo "<script
data-activity-id='$content_id'
src='/mod/exp360/script.js'>
</script>";
echo $OUTPUT->footer();

66
view_content.php Normal file
View file

@ -0,0 +1,66 @@
<?php
require_once(dirname(dirname(dirname(__FILE__))) . '/config.php');
require_once(dirname(__FILE__) . '/lib.php');
$id = required_param('id', PARAM_INT); // Course Module ID
$cm = get_coursemodule_from_id('exp360', $id, 0, false, MUST_EXIST);
$course = $DB->get_record('course', array('id' => $cm->course), '*', MUST_EXIST);
$exp360 = $DB->get_record('exp360', array('id' => $cm->instance), '*', MUST_EXIST);
require_login($course, true, $cm);
$content_id = $exp360->content_id;
?>
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
overflow: hidden;
}
</style>
</head>
<body>
<script src='https://cdn.exp360.com/embed/js/exp360-embed-3.8.59.js?v=3&d=d667dff2-97bb-437e-85d2-f7550d87a4d0&p=web'></script>
<script>
function startContent() {
exp360.openContent('<?php echo $content_id; ?>', {
popup: false,
autorotate: true,
autorotate_speed: 5,
autorotate_delay: 2500,
teleport_animation: false
});
}
var currentUrl = window.location.href;
var url = new URL(currentUrl);
var searchParams = new URLSearchParams(url.search);
var params = {};
searchParams.forEach((value, key) => {
params[key] = value;
});
function initialize() {
var newDiv = document.createElement('div');
newDiv.setAttribute('data-exp360-type', 'player');
newDiv.setAttribute('data-exp360-id', '<?php echo $content_id; ?>');
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
newDiv.setAttribute('data-exp360-params', `width=${windowWidth};height=${windowHeight};`);
document.body.appendChild(newDiv);
}
window.onload = initialize;
</script>
</body>
</html>