The Javascript Glue

The steps

These were the building blocks that eventually worked for me:

Making a button clickable
Make it print the userinput when pressed in the console log
Make the button return a simple console log print from a simple WASM program
Input user text into the wasm program and return
Process the user data with the wasm
Print that data back out to the browser console log
Convert it to a csv
Make the csv downloadable
Timestamp the csv

The code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
window.onload = function() {
    const go = new Go(); // Defined in wasm_exec_tiny.js
    let result;
  
    WebAssembly.instantiateStreaming(fetch("main2.wasm"), go.importObject)
      .then(res => {
        console.log("Module loaded!", res.module);
        console.log("Instance:", res.instance);
        console.log("Exports:", res.instance.exports);
  
        // Store the result for later use
        result = res;
        document.getElementById("runButton").disabled = false;
      })
      .catch(err => {
        console.error(err);
      });
  
    // Get the button, textarea, and outputArea elements
    const runButton = document.getElementById("runButton");
    const userInput = document.getElementById("userInput");
    const outputArea = document.getElementById("outputArea"); // New line
  
    // Add a click event listener to the button
    runButton.addEventListener("click", () => {
      // Start the WebAssembly binary
      go.run(result.instance);
  
      // Get the text from the textarea
      const text = userInput.value;

      // Call the RunMain function with the text and log the returned CSV data
      const csvData = window.RunMain(text);

      console.log(csvData);

      // Print the CSV data to the outputArea
      outputArea.textContent = csvData; // New line

      // Create a Blob from the CSV data
      const csvBlob = new Blob([csvData], {type: "text/csv"});

      // Create a URL for the Blob
      const csvUrl = URL.createObjectURL(csvBlob);

      // Get the current date and time
const now = new Date();

// Format the date and time
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed in JavaScript
const day = String(now.getDate()).padStart(2, '0');
const hour = String(now.getHours()).padStart(2, '0');
const minute = String(now.getMinutes()).padStart(2, '0');

// Construct the filename
const filename = `${year}_${month}_${day}_Brightspace_Formatted_Questions_${hour}_${minute}.csv`;

// Create a download link and click it
const downloadLink = document.createElement("a");
downloadLink.href = csvUrl;
downloadLink.download = filename; // Use the new filename
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
    });
  }