Using Code block for reflection - unable to print

Question

Hi everyone,
Trying out the code block with some help from my coder colleague.&nbsp; We created this html and it works great in chrome if I just launch it.&nbsp;
I paste it into the code block for RISE and the download button will not work.&nbsp; Any coders (I am not one) have thoughts?
&nbsp;
this is what happens in RISE
https://360.articulate.com/review/content/8445e878-246b-4980-b2b6-33216b6c313d/review&nbsp;
&nbsp;
I have also attached the code if you launch in Chrome it works as expected.

teresavanderpos · Answer

Hi Chris, thank you.&nbsp; Funny thing this is how I do it now...but I now really wanted to save time and not have to build in Storyline... thank you for the code though, I will hold on to it as I will be curious of how it may work differently from mine.&nbsp; Just to share here is a copy of my code from storyline that I use and how when executed will open up a window to select a button to print notes. And a sample storyline file (not using this code but an example)
Hmmm why in the community can I not upload a .txt file.&nbsp; I tried to send to you.
But either way this storyline file has a basic example of what I do now.

ericsantos · Answer

Hi TeresaVanderpos,
Thanks so much for sharing your code! It looks like your post was briefly held by our automatic filters, but it’s visible now. We really appreciate you taking the time to post such a detailed example, this will be a helpful reference for others exploring custom code approaches in Rise 360.
Glad to have your contribution in the community.

teresavanderpos · Answer

I keep trying to add the .txt file it shows success, but not seeing it, please let me know if you can see the code attachment file.

chris-hurst · Answer

I had issues around this too, so ended up using JavaScript in a Storyline block, then embedding this Storyline block in Rise. This code downloads a Word doc with the users comments, here's the code, I hope it helps!
// === STORYLINE: SAVE THIS BLOCK'S 5 ENTRIES TO LOCALSTORAGE ===
var player = GetPlayer();

// Give this Storyline block a unique part id:
var partId = "Design"; // change in each embedded Storyline: part-1, part-2, ...

// Fill in the 5 prompts and the corresponding Storyline variable names for THIS block
// (Use your exact on-screen copy as labels, and exact variable names)
var fields = [
  { label: "Write clear learning objectives", value: player.GetVar("Entry_Analyse") || player.GetVar("D1TextEntry1") || "" },
  { label: "Choose format (course, workshop, job aid, etc.)",                                        value: player.GetVar("Entry_Design")  || player.GetVar("D1TextEntry2") || "" },
  { label: "Map content flow (topics in order)",                           value: player.GetVar("Entry_Develop") || player.GetVar("D1TextEntry3") || "" },
  { label: "Select active learning methods",                       value: player.GetVar("Entry_Implement")|| player.GetVar("D1TextEntry4")|| "" },
  { label: "List supporting media",                                       value: player.GetVar("Entry_Evaluate")|| player.GetVar("D1TextEntry5") || "" }
];

// Optional: include a short title for this block (e.g., "Analyse", "Design", etc.)
var blockTitle = "Design";

// Save payload
var payload = {
  id: partId,
  title: blockTitle,
  savedAt: new Date().toISOString(),
  fields: fields
};

// Use a shared collection key in localStorage
var KEY = "RiseCombinedNotes__parts";
var parts = [];
try { parts = JSON.parse(localStorage.getItem(KEY) || "[]"); } catch(e){ parts = []; }

// Replace if this part already exists; otherwise append
var idx = parts.findIndex(p =&gt; p &amp;&amp; p.id === partId);
if (idx &gt;= 0) { parts[idx] = payload; } else { parts.push(payload); }

// Persist
localStorage.setItem(KEY, JSON.stringify(parts));

// (Optional) quick feedback back into Storyline via a variable:
try { player.SetVar("NotesSavedOK", true); } catch(e) {}

&nbsp;

teresavanderpos · Answer

Just figured out how to add my code thanks IvanGroe​&nbsp;
This is my code that I want to tweak to be able to print
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Text Input Activity&lt;/title&gt;
    &lt;style&gt;
        * {
            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;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;div class="question-section"&gt;
            &lt;h2&gt;Reflection Activity&lt;/h2&gt;
            &lt;div class="question-text"&gt;
                &lt;strong&gt;Question:&lt;/strong&gt; What topics would you cover when discussing confidentiality with youth?
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class="input-section"&gt;
            &lt;label for="userInput"&gt;Your Response:&lt;/label&gt;
            &lt;textarea 
            id="userInput" 
            placeholder="Type your answer here..."
            maxlength="1000"
            &gt;&lt;/textarea&gt;
            &lt;div class="char-count"&gt;
                &lt;span id="charCount"&gt;0&lt;/span&gt; / 1000 characters
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class="button-container"&gt;
            &lt;button class="btn-reveal" id="revealBtn" onclick="toggleAnswer()"&gt;
                Show Feedback
            &lt;/button&gt;
            &lt;button class="btn-copy" id="copyBtn" aria-label="Copy your response and feedback to clipboard"&gt;
                Copy Feedback to Clipboard
            &lt;/button&gt;
        &lt;/div&gt;

&lt;div id="copyMsg" role="status" aria-live="polite"&gt;&lt;/div&gt;
        
        &lt;div class="answer-section" id="answerSection"&gt;
            &lt;div class="answer-content" id="answerContent"&gt;
                &lt;h2&gt;Feedback&lt;/h2&gt;
                &lt;p&gt;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.&lt;/p&gt;
                &lt;p&gt;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:&lt;/p&gt;
                &lt;ul&gt;
                    &lt;li&gt;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.&lt;/li&gt;
                    &lt;li&gt;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.&lt;/li&gt;
                    &lt;li&gt;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).&lt;/li&gt;
                &lt;/ul&gt;
                &lt;p&gt;In this conversation, the clinician can also obtain consent to include a parent or other caregiver in certain parts of the appointment.&lt;/p&gt;
                &lt;p&gt;Physicians must be aware of their province's or jurisdiction’s policies for protecting patient health information because they may vary.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

&lt;div class="note"&gt;
            &lt;strong&gt;💡 Tip:&lt;/strong&gt; 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.
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script&gt;
        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 &amp;&amp; window.isSecureContext) {
                navigator.clipboard.writeText(content).then(() =&gt; {
                    showCopyMessage("✅ Your response and feedback have been copied! You can now paste into a document to save it.");
                }).catch(() =&gt; {
                    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(() =&gt; {
                copyBtn.textContent = "Copy Feedback to Clipboard";
            }, 2000);
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

&nbsp;

Forum Discussion

Using Code block for reflection - unable to print

7 Replies

Related Content

Rise 360: How to Use Code Block

AI Assistant: Creating Images Using Prompts

Unable to sign in

Using Sliders in Storyline

Using Characters in Rise 360

Learn

Connect

Discover

Community

Company

Trust Center