Forum Discussion
Using the Code Block to allow course participants to enter their own text
I have found a way for course participants to be able to enter their own text during a course by way of reflection.
This is done by using the following code in the new Code Block:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
margin: 0;
padding: 0;
background: transparent;
}
.reflection-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
label {
display: block;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
textarea {
width: 100%;
min-height: 180px;
padding: 12px;
font-size: 1rem;
line-height: 1.5;
border: 1px solid #cfcfcf;
border-radius: 6px;
resize: vertical;
box-sizing: border-box;
}
textarea:focus {
outline: none;
border-color: #5b9cff;
box-shadow: 0 0 0 2px rgba(91, 156, 255, 0.2);
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.75rem;
position: relative;
}
.helper-text {
font-size: 0.875rem;
color: #666;
}
/* Styled button */
#copyButton {
background-color: #5b9cff;
color: #fff;
border: none;
border-radius: 4px;
padding: 6px 12px;
font-size: 0.875rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
#copyButton:hover:not(:disabled) {
background-color: #4a8ae6;
}
#copyButton:disabled {
background-color: #a8c4f5;
cursor: default;
}
/* Temporary Copied message */
.copied-message {
position: absolute;
top: -1.8rem;
right: 0;
font-size: 0.875rem;
color: #28a745;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.copied-message.show {
opacity: 1;
}
</style>
</head>
<body>
<div class="reflection-container">
<label for="reflection">Reflection</label>
<textarea
id="reflection"
placeholder="Type your response here..."
></textarea>
<div class="controls">
<div class="helper-text">
This space is for personal reflection and is not saved.
</div>
<div>
<span id="copiedMessage" class="copied-message">Copied to clipboard!</span>
<button id="copyButton" disabled>Copy text</button>
</div>
</div>
</div>
<script>
const textarea = document.getElementById("reflection");
const copyButton = document.getElementById("copyButton");
const copiedMessage = document.getElementById("copiedMessage");
let messageTimer;
// Enable/disable button based on text
textarea.addEventListener("input", () => {
copyButton.disabled = textarea.value.trim().length === 0;
});
function copyToClipboard(text) {
const temp = document.createElement("textarea");
temp.value = text;
document.body.appendChild(temp);
temp.select();
try {
const successful = document.execCommand('copy');
document.body.removeChild(temp);
return successful;
} catch (err) {
document.body.removeChild(temp);
return false;
}
}
// Copy text and show temporary message
copyButton.addEventListener("click", () => {
if (textarea.value.trim().length === 0) return;
// Try Clipboard API first
let success = false;
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(textarea.value).then(() => {
success = true;
}).catch(() => {
success = copyToClipboard(textarea.value);
}).finally(showMessage);
} else {
success = copyToClipboard(textarea.value);
showMessage();
}
function showMessage() {
copiedMessage.classList.add("show");
clearTimeout(messageTimer);
messageTimer = setTimeout(() => {
copiedMessage.classList.remove("show");
}, 1500);
}
});
</script>
</body>
</html>
Participants can use the Copy text button that is included to copy all of the text they have entered and paste it into a separate file. [e.g. Word, Notepad, Excel, PowerPoint]
A Copied to clipboard message is displayed once the text they have entered has been copied to the clipboard after clicking the Copy text button.
All of the text they have entered will automatically be cleared once they come out of the course.
2 Replies
AdrianRowe​ Thank you for sharing the step-by-step breakdown here! Do you happen to have a working example you can share so we can see it in action?
Also, I want to make sure you saw that we are doing a Code Block Build-a-thon in a few weeks. It's a great opportunity to experiment more with code blocks!
Hi Katie
Please follow this link to access and view a working example:
Using the Code Block to allow course participants to enter and save their own text
Best regards
Adrian
