Forum Discussion
Vincent25
9 days agoCommunity Member
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
Related Content
- 4 months ago
- 6 months ago
- 8 months ago