Forum Discussion
Reflection blocks
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.
