Forum Discussion

Nandhakumar_S's avatar
Nandhakumar_S
Community Member
2 days ago

The window.print() method is not working in the Rise code block.

I used a code block in the Rise course to print the page, but Rise does not allow the page to be printed.
Before integrating it into Rise, I tested the code in Visual Studio Code, and it worked well.

Here’s the code for your reference.

Thank you for your assistance.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Print Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
      padding: 40px;
      text-align: center;
    }

    #content {
      background: #ffffff;
      padding: 20px;
      border-radius: 10px;
      max-width: 600px;
      margin: 20px auto;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      text-align: left;
    }

    button {
      background-color: #57A9F5;
      color: #000;
      font-weight: bold;
      border: none;
      padding: 12px 30px;
      border-radius: 30px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #3b93e0;
    }

    /* Hide the print button when printing */
    MeDia print {
      button {
        display: none;
      }
      body {
        background: none;
      }
    }
  </style>
</head>
<body>

  <h2>Print Page Example</h2>

  <div id="content">
    <h3>Printable Section</h3>
    <p>This is the content you can print using the button below.</p>
    <p>You can add text, images, tables, or any HTML elements here.</p>
  </div>

  <button onclick="printContent()">🖨️ Print This Page</button>

  <script>
    function printContent() {
      window.print();
    }
  </script>

</body>
</html>

 

rise 360

1 Reply

  • EricSantos's avatar
    EricSantos
    Staff
    8 hours ago

    Hi Nandhakumar_S,

    Thanks for sharing your code example! In Rise 360, the Code Block (Beta) can run HTML, CSS, and JavaScript inside its own self-contained environment, but it’s sandboxed for security and stability. That means it can’t access global browser features like window.print() or interact with the rest of the Rise course.

    If you’d like learners to actually trigger printing or other browser actions, the best workaround would be to embed the interaction in a Storyline block and then add that Storyline course to Rise. Storyline gives you full control over JavaScript execution and can access browser functions as expected.

    Here’s more detail in our documentation about how the Code Block works: Rise 360: How to Use the Code Block (Beta)

    Hope this helps clarify how Code Blocks work in Rise! If you find a creative workaround, feel free to let the community know.