@defikitdotnet/education-module-ai
Version:
AI Education Module using Agent Framework
239 lines (238 loc) • 18.4 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var router_1 = require("next/router");
var dynamic_1 = __importDefault(require("next/dynamic"));
// Import H5P-Editor dynamically to avoid server-side rendering issues
var H5PEditor = (0, dynamic_1.default)(function () { return Promise.resolve().then(function () { return __importStar(require("../components/H5PEditor")); }); }, {
ssr: false,
loading: function () { return ((0, jsx_runtime_1.jsx)("div", { className: "h-96 flex items-center justify-center bg-gray-100 rounded-lg", children: (0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" }) })); },
});
var H5PEditorPage = function () {
var router = (0, router_1.useRouter)();
var _a = (0, react_1.useState)(""), contentTitle = _a[0], setContentTitle = _a[1];
var _b = (0, react_1.useState)(""), contentType = _b[0], setContentType = _b[1];
var _c = (0, react_1.useState)(""), subject = _c[0], setSubject = _c[1];
var _d = (0, react_1.useState)("beginner"), level = _d[0], setLevel = _d[1];
var _e = (0, react_1.useState)(false), loading = _e[0], setLoading = _e[1];
var _f = (0, react_1.useState)(null), error = _f[0], setError = _f[1];
var _g = (0, react_1.useState)(null), success = _g[0], setSuccess = _g[1];
var _h = (0, react_1.useState)(null), h5pContentId = _h[0], setH5pContentId = _h[1];
var editorRef = (0, react_1.useRef)(null);
// Subject options
var subjects = [
{ value: "mathematics", label: "Mathematics" },
{ value: "science", label: "Science" },
{ value: "history", label: "History" },
{ value: "language_arts", label: "Language Arts" },
{ value: "computer_science", label: "Computer Science" },
{ value: "physics", label: "Physics" },
{ value: "chemistry", label: "Chemistry" },
{ value: "biology", label: "Biology" },
];
// Educational level options
var levels = [
{ value: "beginner", label: "Beginner" },
{ value: "elementary", label: "Elementary" },
{ value: "middle_school", label: "Middle School" },
{ value: "high_school", label: "High School" },
{ value: "undergraduate", label: "Undergraduate" },
{ value: "graduate", label: "Graduate" },
{ value: "professional", label: "Professional" },
];
// H5P content type options
var h5pContentTypes = [
{ value: "H5P.Accordion", label: "Accordion" },
{ value: "H5P.Agamotto", label: "Agamotto (Image Blender)" },
{ value: "H5P.AudioRecorder", label: "Audio Recorder" },
{ value: "H5P.Blanks", label: "Fill in the Blanks" },
{ value: "H5P.CoursePresentation", label: "Course Presentation" },
{ value: "H5P.Dialogcards", label: "Dialog Cards" },
{ value: "H5P.Documentation", label: "Documentation Tool" },
{ value: "H5P.DragQuestion", label: "Drag and Drop" },
{ value: "H5P.DragText", label: "Drag Text" },
{ value: "H5P.Essay", label: "Essay" },
{ value: "H5P.Flashcards", label: "Flashcards" },
{ value: "H5P.ImageHotspots", label: "Image Hotspots" },
{ value: "H5P.ImageSequencing", label: "Image Sequencing" },
{ value: "H5P.InteractiveVideo", label: "Interactive Video" },
{ value: "H5P.MarkTheWords", label: "Mark the Words" },
{ value: "H5P.MemoryGame", label: "Memory Game" },
{ value: "H5P.MultiChoice", label: "Multiple Choice" },
{ value: "H5P.Questionnaire", label: "Questionnaire" },
{ value: "H5P.QuestionSet", label: "Question Set" },
{ value: "H5P.SingleChoiceSet", label: "Single Choice Set" },
{ value: "H5P.Summary", label: "Summary" },
{ value: "H5P.Timeline", label: "Timeline" },
{ value: "H5P.TrueFalse", label: "True/False Question" },
];
var apiBaseUrl = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:3009";
var agentId = "teacher-1"; // This would come from authentication
// Handle saving H5P content
var handleSaveContent = function () { return __awaiter(void 0, void 0, void 0, function () {
var h5pContent, saveH5PResponse, saveH5PData, createContentResponse, err_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!contentTitle) {
setError("Please enter a title for your content");
return [2 /*return*/];
}
if (!contentType) {
setError("Please select an H5P content type");
return [2 /*return*/];
}
if (!subject) {
setError("Please select a subject");
return [2 /*return*/];
}
setLoading(true);
setError(null);
setSuccess(null);
_a.label = 1;
case 1:
_a.trys.push([1, 8, 9, 10]);
if (!editorRef.current) return [3 /*break*/, 6];
return [4 /*yield*/, editorRef.current.getContent()];
case 2:
h5pContent = _a.sent();
if (!h5pContent) {
throw new Error("Failed to get H5P content from editor");
}
return [4 /*yield*/, fetch("".concat(apiBaseUrl, "/api/h5p/save"), {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
h5pContent: h5pContent,
contentType: contentType,
title: contentTitle,
}),
})];
case 3:
saveH5PResponse = _a.sent();
if (!saveH5PResponse.ok) {
throw new Error("Failed to save H5P content");
}
return [4 /*yield*/, saveH5PResponse.json()];
case 4:
saveH5PData = _a.sent();
setH5pContentId(saveH5PData.contentId);
return [4 /*yield*/, fetch("".concat(apiBaseUrl, "/api/educational-contents/").concat(agentId), {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
title: contentTitle,
content: "Interactive H5P content: ".concat(contentTitle),
type: "h5p_content",
subject: subject,
level: level,
h5pContentId: saveH5PData.contentId,
}),
})];
case 5:
createContentResponse = _a.sent();
if (!createContentResponse.ok) {
throw new Error("Failed to create educational content record");
}
setSuccess("Your H5P content has been saved successfully!");
// Redirect to content list after a short delay
setTimeout(function () {
router.push("/teacher-dashboard");
}, 2000);
return [3 /*break*/, 7];
case 6: throw new Error("H5P editor not initialized");
case 7: return [3 /*break*/, 10];
case 8:
err_1 = _a.sent();
console.error("Error saving H5P content:", err_1);
setError(err_1.message || "An error occurred while saving content");
return [3 /*break*/, 10];
case 9:
setLoading(false);
return [7 /*endfinally*/];
case 10: return [2 /*return*/];
}
});
}); };
// Handle cancel
var handleCancel = function () {
if (confirm("Are you sure you want to cancel? All unsaved changes will be lost.")) {
router.push("/teacher-dashboard");
}
};
return ((0, jsx_runtime_1.jsxs)("div", { className: "min-h-screen bg-gray-50", children: [(0, jsx_runtime_1.jsx)("header", { className: "bg-blue-600 text-white shadow-md", children: (0, jsx_runtime_1.jsxs)("div", { className: "container mx-auto px-4 py-4 flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold", children: "H5P Content Editor" }), (0, jsx_runtime_1.jsx)("button", { onClick: function () { return router.push("/teacher-dashboard"); }, className: "text-sm bg-blue-700 hover:bg-blue-800 px-4 py-2 rounded", children: "Back to Dashboard" })] }) }), (0, jsx_runtime_1.jsxs)("main", { className: "container mx-auto px-4 py-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg shadow-md p-6 mb-6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold mb-4", children: "Create Interactive H5P Content" }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "block sm:inline", children: error }), (0, jsx_runtime_1.jsx)("button", { className: "absolute top-0 bottom-0 right-0 px-4 py-3", onClick: function () { return setError(null); }, children: (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "\u00D7" }) })] })), success && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "block sm:inline", children: success }), (0, jsx_runtime_1.jsx)("button", { className: "absolute top-0 bottom-0 right-0 px-4 py-3", onClick: function () { return setSuccess(null); }, children: (0, jsx_runtime_1.jsx)("span", { className: "text-green-500", children: "\u00D7" }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contentTitle", className: "block text-sm font-medium text-gray-700 mb-1", children: "Content Title" }), (0, jsx_runtime_1.jsx)("input", { id: "contentTitle", type: "text", value: contentTitle, onChange: function (e) { return setContentTitle(e.target.value); }, placeholder: "Enter a title for your content", className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500", disabled: loading })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contentType", className: "block text-sm font-medium text-gray-700 mb-1", children: "H5P Content Type" }), (0, jsx_runtime_1.jsxs)("select", { id: "contentType", value: contentType, onChange: function (e) { return setContentType(e.target.value); }, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500", disabled: loading, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select H5P Content Type" }), h5pContentTypes.map(function (type) { return ((0, jsx_runtime_1.jsx)("option", { value: type.value, children: type.label }, type.value)); })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "subject", className: "block text-sm font-medium text-gray-700 mb-1", children: "Subject" }), (0, jsx_runtime_1.jsxs)("select", { id: "subject", value: subject, onChange: function (e) { return setSubject(e.target.value); }, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500", disabled: loading, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select a subject" }), subjects.map(function (subj) { return ((0, jsx_runtime_1.jsx)("option", { value: subj.value, children: subj.label }, subj.value)); })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "level", className: "block text-sm font-medium text-gray-700 mb-1", children: "Educational Level" }), (0, jsx_runtime_1.jsx)("select", { id: "level", value: level, onChange: function (e) { return setLevel(e.target.value); }, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500", disabled: loading, children: levels.map(function (lvl) { return ((0, jsx_runtime_1.jsx)("option", { value: lvl.value, children: lvl.label }, lvl.value)); }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white rounded-lg shadow-md overflow-hidden", children: contentType ? ((0, jsx_runtime_1.jsx)(H5PEditor, { ref: editorRef, contentType: contentType, apiUrl: "".concat(apiBaseUrl, "/api/h5p") })) : ((0, jsx_runtime_1.jsx)("div", { className: "p-8 text-center text-gray-500", children: (0, jsx_runtime_1.jsx)("p", { children: "Select an H5P content type above to load the editor" }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end mt-6 space-x-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleCancel, className: "px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2", disabled: loading, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleSaveContent, className: "px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", disabled: loading || !contentType, children: loading ? "Saving..." : "Save Content" })] })] })] }));
};
exports.default = H5PEditorPage;