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
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.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 🤞
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.
