Forum Discussion
Reflection blocks
I have seen different variations of notes blocks being created using the code block. All fantastic work!
Here's my variation. In our courses we prompt learners to reflect on different questions throughout a course. These reflection blocks enable learners to save their reflections, view previously saved reflections with the associated prompt question. Then at the end of the course they can print or email the entirety of their comments associated with the course all neatly packaged under each unique prompt. .
I'm not a coder so relied on vibe coding with Gemini. Hope it's useful for others to use and adapt
https://share.articulate.com/hmBmSQUpD5vvRNAR-v_Fa
20 Replies
Just wondering what others are doing regarding privacy and reflection blocks? Learners who use the courses we build sometimes use a shared device. The courses are hosted on moodle, and so far, responses are NOT copied across from one learner to another in testing, but not sure how to provide a safeguard for this?
I have not tried this, but as the reflections are stored in the cache, I asked AI if it was possible to create a "delete my reflections" button: It might also be possible to do it "automatically" on completing a course - but then if someone doesn't complete their data will be there.
Here is the AI Answer:
🔍 How User Input is Stored
Storage Mechanism: localStorage
The user input is stored using the browser’s localStorage API. Here’s the key detail:
javascript
const REFLECTION_POINT_KEY = "ClaireB_Test_CourseID_Reflection_01";
When the user clicks Save, the following happens:
javascript
localStorage.setItem(REFLECTION_POINT_KEY, JSON.stringify(data));
The data is saved as a JSON string under the key "ClaireB_Test_CourseID_Reflection_01", structured like this:
json
{ "question": "Question 1?", "reflections": [ "First reflection the user typed...", "Second reflection the user typed..." ] }
📌 Key characteristics of this storage:
Property Detail Scope Per browser + per domain (origin) Persistence Survives page refresh and browser close Capacity ~5MB per origin Cleared by Manual code, browser settings, or incognito mode 🧹 Erase Button — Standalone Code Snippet
Yes! You can absolutely create a separate tool to wipe it. Here’s a self-contained HTML snippet with an “Erase my answers from the cache” button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Erase Reflection Data</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
html, body {
margin: 0; padding: 0;
font-family: 'Poppins', sans-serif;
background-color: transparent;
box-sizing: border-box;
}
.erase-container {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px;
box-sizing: border-box;
}
.erase-label {
font-size: 15px;
color: #555;
margin: 0;
}
.erase-btn {
background-color: #c0392b; /* Red to signal a destructive action */
color: white;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
border: none;
border-radius: 20px;
padding: 12px 24px;
cursor: pointer;
width: fit-content;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.erase-btn:hover {
background-color: #96281b;
transform: translateY(-2px);
}
.erase-btn:focus-visible {
outline: 3px solid #c0392b;
outline-offset: 2px;
}
#eraseMessage {
font-size: 14px;
font-weight: 500;
color: #09555c;
display: none;
}
</style>
</head>
<body>
<div class="erase-container">
<p class="erase-label">
This will permanently remove your saved reflection answers from this browser.
</p>
<button class="erase-btn" id="eraseBtn">🗑️ Erase my answers from the cache</button>
<p id="eraseMessage">✅ Your answers have been erased successfully.</p>
</div>
<script>
// ⚠️ Must match the key used in the Reflection Save Tool exactly
const REFLECTION_POINT_KEY = "ClaireB_Test_CourseID_Reflection_01";
document.getElementById('eraseBtn').addEventListener('click', () => {
const existing = localStorage.getItem(REFLECTION_POINT_KEY);
if (existing) {
localStorage.removeItem(REFLECTION_POINT_KEY);
document.getElementById('eraseMessage').textContent = "✅ Your answers have been erased successfully.";
} else {
document.getElementById('eraseMessage').textContent = "ℹ️ No saved answers were found to erase.";
}
document.getElementById('eraseMessage').style.display = 'block';
});
</script>
</body>
</html>
⚠️ Important Notes
- 🔑 The key must match exactly — "ClaireB_Test_CourseID_Reflection_01" — otherwise the erase won’t target the right data.
- 🌐 Both pages must be on the same domain/origin — localStorage is origin-scoped, so this eraser only works if it’s served from the same URL as the reflection tool.
- 🧩 You can embed this snippet directly into the same course page, or place it on a dedicated “settings” or “reset” page within your LMS.
- 🔄 If you ever want to erase all reflections across multiple keys, you could use localStorage.clear() instead — but use that with caution as it wipes everything stored by that origin.
Yes mine saves locally too - sounds very similar. But good advice to have that info block. I'd actually love something like this as standard block from Articulate 🤞
Hi Claire - this looks very similar to my solution as well - Claude helped me with mine. Does your solution store the information locally on their their device? I've added an information block at the beginning of the course to let learners know they shouldn't clear cache or switch devices before completing the course, or they'll lose their responses.
I'd love to know if your solution does anything differently.This is great, thanks for sharing it!
Thank you so much for sharing your learning and this code in such an easy to use format. You are the cats pyjamas (bad pun, I know, but I loved your cute cat in the example)! It was exactly what I've been looking at doing for years, and have never known where to start. I've applied it to a course, and have had such amazing feedback. I don't know how to thank you enough for sharing this amazing/interactive piece of code. It has really elevated the course I'm currently designing.
Wondering if someone has used this as a code block to get feedback from the learners.
That's an interesting idea - but not sure it would work with this specific code as the learners notes save locally to their computer.
I am working on a different code block that creates a skin over a google form - so you do get feedback, but it looks more integrated into the course rather than an embedded google form. Just got too many actual courses in production at the moment to refine and post it!I have previously used a MS Form to get feedback from within a course. It works well and integrates nicely.
I have created something similar, tweaking your code a bit and adding the option for the learner to add a final reflection at the end of the course. thank you!
Brilliant! I'm actually doing something similar in a course I'm working on too. 😃
this is the best one of these that I've seen and was exactly what I was looking for. I'd give you 1 million dollars if I could.
Ha ha - that would be nice! Glad you like it 😃
Hi again Claire
I have received positive feedback from users who are testing the e-learning I am working on. Do you plan to (or have you already) shared this on LinkedIn? I want to share there and want to make sure that you get the credit.
Thanks Ian_Blake - I haven't shared on LinkedIn but please tag me in as I'd love to connect and see how you've adapted it. And great news that you're getting positive feedback. 🎉
Thank you Claire for sharing! This gives me a great idea on how I could include something similar in a course I'm currently developing! I'm always trying to find a way to bring in some reflection into my courses or some higher thinking.
