Forum Discussion

Vincent25's avatar
Vincent25
Community Member
9 days ago

Saving code block responses between sessions

Hello,

I created a code block with a form inside it and a bunch of radio buttons. I was wondering if there is a way to save the user's response progress across sessions. 

For example, in the following code, I would like to save the user's selections if they exit the training and then go back in to finish the content. When I tested it, the radio buttons previously completed were blank when I relaunched the course.

<form id="multi-select-form">
  <table class="form-table">
    <thead>
      <tr>
        <th>Complete </th>
        <th >N/A </th>
        <th>Item </th>
      </tr>
    </thead>
    <tbody>
     <tr>
      <td class="option"><input type="radio" name="item1" value="complete" required /></td>
      <td class="option"><input type="radio" name="item1" value="na" required /></td>
      <td>Lorem Ipsum</td>
    </tr>
     <tr>
      <td class="option"><input type="radio" name="item2" value="complete" required /></td>
      <td class="option"><input type="radio" name="item2" value="na" required /></td>
      <td>Sit Amet</td>
    </tr>
    </tbody>
  </table>
</form>
<script>
    // Function to check if every radio group has a selection
  const checkCompletion = () => {
    // Creates a unique list of all radio button group names
    const radioGroups = [...new Set(
      Array.from(document.querySelectorAll('#multi-select-form input[type="radio"]'))
      .map(radio => radio.name)
    )];

    // Checks if every group has a checked input
    const allSelected = radioGroups.every(name =>
      document.querySelector(`input[name="${name}"]:checked`)
    );

    // If all groups have a selection, post the message
    if (allSelected) {
      console.log("All items selected. Posting message to parent.");
      window.parent.postMessage({ type: 'complete' }, '*');
    }
  };

  // Add an event listener to the form that triggers on any change
  document.getElementById("multi-select-form").addEventListener("change", checkCompletion);
</script>

 

No RepliesBe the first to reply