Forum Discussion
Using Code block for reflection - unable to print
Hi everyone,
Trying out the code block with some help from my coder colleague. We created this html and it works great in chrome if I just launch it.
I paste it into the code block for RISE and...
Hmmm my last post did not save. I wanted to post the code that I couldn't before and thanks to IvanGroe for helping.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Input Activity</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
background: #F1EAF4;
border-radius: 5px;
padding: 40px;
max-width: 700px;
width: 100%;
}
.question-section {
margin-bottom: 30px;
}
h2 {
color: #6E298D;
margin-bottom: 15px;
font-size: 2em;
}
.question-text {
color: #333;
font-size: 1.063em;
line-height: 1.6;
margin-bottom: 20px;
}
.input-section {
margin-bottom: 25px;
}
label {
display: block;
color: #555;
font-weight: 600;
margin-bottom: 10px;
font-size: 1em;
}
textarea {
width: 100%;
min-height: 150px;
padding: 15px;
font-size: 1em;
font-family: inherit;
border: 2px solid #e0e0e0;
border-radius: 5px;
resize: vertical;
transition: all 0.3s ease;
}
textarea:focus {
outline: none;
border-color: #6E298D;
box-shadow: 0 0 0 3px rgba(110, 41, 141, 0.1);
}
.char-count {
text-align: right;
color: #999;
font-size: 0.9em;
margin-top: 5px;
}
.button-container {
display: flex;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
button {
flex: 1;
padding: 15px 30px;
font-size: 1em;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #6E298D;
color: white;
transition: background-color 0.2s ease;
}
/* Remove shadows and animations */
.btn-reveal:hover,
.btn-copy:hover {
background-color: #5b2076;
transform: none;
box-shadow: none;
}
.btn-reveal:disabled,
.btn-copy:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.answer-section {
background: #f8f9ff;
border-left: 4px solid #6E298D;
padding: 25px 25px 30px 25px;
border-radius: 5px;
margin-top: 25px;
display: none;
animation: slideDown 0.4s ease;
}
.answer-section.show {
display: block;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* FIXED SPACING BELOW */
.answer-content h2 {
margin-bottom: 15px;
color: #6E298D;
}
.answer-content p {
margin-bottom: 18px;
line-height: 1.7;
color: #444;
}
.answer-content ul {
margin: 15px 0 20px 25px;
padding-left: 15px;
}
.answer-content li {
margin-bottom: 10px;
}
.note {
background: #fff9e6;
border-left: 4px solid #ffc107;
padding: 15px;
border-radius: 5px;
margin-top: 20px;
font-size: 0.95em;
color: #666;
}
.note strong {
color: #333;
}
#copyMsg {
font-size: 0.95em;
color: #333;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="question-section">
<h2>Reflection Activity</h2>
<div class="question-text">
<strong>Question:</strong> What topics would you cover when discussing confidentiality with youth?
</div>
</div>
<div class="input-section">
<label for="userInput">Your Response:</label>
<textarea
id="userInput"
placeholder="Type your answer here..."
maxlength="1000"
></textarea>
<div class="char-count">
<span id="charCount">0</span> / 1000 characters
</div>
</div>
<div class="button-container">
<button class="btn-reveal" id="revealBtn" onclick="toggleAnswer()">
Show Feedback
</button>
<button class="btn-copy" id="copyBtn" aria-label="Copy your response and feedback to clipboard">
Copy Feedback to Clipboard
</button>
</div>
<div id="copyMsg" role="status" aria-live="polite"></div>
<div class="answer-section" id="answerSection">
<div class="answer-content" id="answerContent">
<h2>Feedback</h2>
<p>During the first session with a young patient, the clinician must obtain informed consent from them to proceed with the interview. The clinician can begin by explaining that the conversation will take place between just the two of them and that anything the youth tells the clinician will remain private.</p>
<p>The clinician should also explain that although personal health information cannot be disclosed without the patient's consent, there are certain situations in which they may need to breach confidentiality. The College of Physicians and Surgeons of Ontario (2024) lists the following situations in which physicians have a duty to report:</p>
<ul>
<li>Report to the Children’s Aid Society when there is a risk of or experience of abuse or neglect in a child under age 16.</li>
<li>Report to police if there are reasonable grounds that disclosure is necessary to eliminate/reduce significant and imminent risk of serious harm to a person or group of people.</li>
<li>Report to the Ministry of Transportation if a patient aged 16 or older has a medical condition or impairment that may make it dangerous to drive (e.g., substance use disorder).</li>
</ul>
<p>In this conversation, the clinician can also obtain consent to include a parent or other caregiver in certain parts of the appointment.</p>
<p>Physicians must be aware of their province's or jurisdiction’s policies for protecting patient health information because they may vary.</p>
</div>
</div>
<div class="note">
<strong>💡 Tip:</strong> Try writing your own response before viewing the suggested answer. There's no single "correct" answer – this is about reflecting on your own knowledge and comparing it with other perspectives.
</div>
</div>
<script>
const userInput = document.getElementById('userInput');
const charCount = document.getElementById('charCount');
const revealBtn = document.getElementById('revealBtn');
const answerSection = document.getElementById('answerSection');
const answerContent = document.getElementById('answerContent');
const copyBtn = document.getElementById('copyBtn');
const copyMsg = document.getElementById('copyMsg');
let answerRevealed = false;
// Character counter
userInput.addEventListener('input', function() {
charCount.textContent = this.value.length;
});
// Toggle feedback visibility
function toggleAnswer() {
answerRevealed = !answerRevealed;
if (answerRevealed) {
answerSection.classList.add('show');
revealBtn.textContent = 'Hide Feedback';
} else {
answerSection.classList.remove('show');
revealBtn.textContent = 'Show Feedback';
}
}
// Clipboard copy handler (Rise-safe)
copyBtn.addEventListener('click', function() {
const userText = userInput.value.trim();
const feedbackText = answerContent.innerText.trim();
const questionText = 'What topics would you cover when discussing confidentiality with youth?';
const content = `REFLECTION ACTIVITY FEEDBACK
========================================
QUESTION:
${questionText}
YOUR RESPONSE:
${userText || "(No response entered)"}
----------------------------------------
SUGGESTED FEEDBACK:
${feedbackText}
========================================
Copied: ${new Date().toLocaleString()}
`;
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(content).then(() => {
showCopyMessage("✅ Your response and feedback have been copied! You can now paste into a document to save it.");
}).catch(() => {
fallbackCopy(content);
});
} else {
fallbackCopy(content);
}
});
// Fallback method for Rise 360
function fallbackCopy(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.opacity = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
showCopyMessage("✅ Your response and feedback have been copied! You can now paste into a document to save it.");
} else {
showCopyMessage("❌ Copy failed. Please select and copy manually.");
}
} catch (err) {
showCopyMessage("❌ Copy not supported. Please select and copy manually.");
}
document.body.removeChild(textArea);
}
// Display message
function showCopyMessage(msg) {
copyMsg.innerText = msg;
copyBtn.textContent = "✅ Copied!";
setTimeout(() => {
copyBtn.textContent = "Copy Feedback to Clipboard";
}, 2000);
}
</script>
</body>
</html>