- Link to another blog post for guidance to implement this feature.
1) Ensure that the required files are downloaded in a "lib" folder in the file.
Download the balancing model to obtain the files containing "lib". |
2) Link the 2 external files to Custom by right-clicking the Custom tabs for more options.
Follow the purple bubbles to open up the options in EJSS. Under User files, include the file "lib" with the [✓] button. |
4a) Code for import tab:
async function attemptLoadGraph() {
const graphResponse = await fetch("records.json");
const graphSettings = await graphResponse.json();
return graphSettings;
}
4b) Code for export tab:
async function exportGraph(exportObject, filename="export.zip") {
// Get the zipped export template
const exportTemplatePath = "export-template.zip";
const graphFileName = "records.json";
//const IS_TESTING_EXPORT = true;
let exportZip;
//if (IS_TESTING_EXPORT) {
// exportZip = new JSZip();
//} else {
exportZip = await getZipFromPath(exportTemplatePath);
//}
exportZip.file(graphFileName, JSON.stringify(exportObject));
exportZip.generateAsync({type: "blob"}).then(blob => saveAs(blob, filename));
}
function onGraphExportComplete() {
alert("Export complete");
}
async function getZipFromPath(path) {
return await JSZip.loadAsync(await (await fetch(path)).blob());
}
function saveBlob(blob, filename) {
var elem = window.document.createElement("a");
var objectUrl = window.URL.createObjectURL(blob);
elem.href = objectUrl;
elem.download = filename;
elem.click();
// Cleanup allocated objects to avoid memory leaks
// These objects do not get GCed
setTimeout(function(elem, objectUrl) {
elem.remove();
window.URL.revokeObjectURL(objectUrl);
}, 1_000, elem, objectUrl);
}
5) Create a boolean variable to edit (In this case, we shall let "editing" be the variable).
Set the variable "editing" to false to generate a student version.
6) Initialise the variables to import.
Create an "import" tab under Initialisation. Copy the rest & add the necessary variables in the same format as in the blue box. |
7) Create a download button.
Create a download button under HtmlView. Copy the rest & add the necessary variables in the same format as check3a and check3b in OnClick. |
8) Export & rename the file to "export-template.zip"
Follow the icon circled in purple to export to ...\ EJSworkspace \ export. Rename the model file to "export-template.zip". |
9) Set the variable "editing" to true to generate a teacher version.
10) Export, extract all & move the previous file into the extracted file.
1) Export the model file 2) Extract the model file 3) Move the previous file "export-template.zip" into the model file |
11) Command prompt line (1/2)
Run CMD & install the live-server package globally to develop & test web applications. Enter: npm install -g live-server |
Update the package if necessary. |
12) Command prompt line (2/2)
Change the directory to where the model file is located. Enter: cd <file location> Start the server in the directory. Enter: live-server |
13) Current view
14) The download feature in the simulation should work.
Check the records.json file (after downloading) to ensure that the correct variables are recorded.
- End -
No comments:
Post a Comment