Pages

Tuesday, March 26, 2024

EJSS - Implementing a Download Feature Step-By-Step Guide

We will use an example to demonstrate how to implement the download feature - LOL Energy Diagram (link to simulation & Joomla).
- 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. 

Left - FileSave.js | Right - jszip.js

3)    Enable EJSS to read external files.
Follow the purple bubbles to open up the options in EJSS.
Under User files, include the file "lib" with the [✓] button.


4)    Create import & export functions under Custom.
Import & Export functions to copy & paste.
    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. 
Create a boolean variable & set it to false.

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. 
Reset the "editing" variable to true.

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
Simulation should be opened in the default web browser.


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