Doenet library demo

How was this page built?

In the <head>, this page includes

  <script src="https://unpkg.com/@doenet/beta"></script>
  <link rel="stylesheet" href="https://unpkg.com/@doenet/beta/dist/main.css">

in order to load the Doenet library.

When the DOMContentLoaded event is fired, we run

  let worksheet = new window.doenet.Worksheet();

to load the Doenet services. This triggers the GDPR consent form.

What happens when I click the button?

The handler for the click event on the button is:

let p = 0;
if (worksheet.progress > 0.0)
  p = worksheet.progress;

worksheet.progress = (1 + p)/2.0;

Setting worksheet.progress updates the green bar in the corner, and also sends these updates to the gradebook.

What happens when I type in the box or tick the checkbox?

When the checkbox state changes, we make the corresponding change to the worksheet.state, which synchronizes with the server.

      
let checkbox = document.getElementById("checkbox");
checkbox.addEventListener("input", function() {
  worksheet.state.checked = checkbox.checked;
});

Similarly when the <textarea> changes, we make the corresponding change to the worksheet.state. We do this in an ugly way just to demonstrate that you can also completely replace the worksheet.state and it will still sync with the server.

let textbox = document.getElementById("textbox");
textbox.addEventListener("input", function() {
  console.log(textbox.value);
  worksheet.state = { textbox: textbox.value, checked: checkbox.checked };
});

Finally, whenever the state changes on the server side, we make the corresponding change to the page.

worksheet.addEventListener( 'state', function(event, state) {
  if (state.textbox)
    textbox.value = state.textbox;
  checkbox.checked = state.checked;
});