Forum Discussion

SarahLichy's avatar
SarahLichy
Community Member
7 days ago
Solved

Coding in RISE

I went to CoPilot and typed in HTML code for frogs jumping. I go into RISE and upload under code- add code. When I insert, the block is blank.. Do you know why this is? Here's the code.    <!DOCT...
instructional design
  • SarahLichy's avatar
    SarahLichy
    4 days ago

    This code is still showing up blank in my RISE course.  I just posted in the products channel. 

Nedim's avatar
Nedim
Community Member
5 days ago

It looks like the block appears blank in Rise because Rise doesn’t automatically show animation or external images when you just paste plain HTML text. You’ll need to make sure the frog image is inside an <img> tag (not just a link) and that your HTML includes both the <style> and <body> sections properly.

For example, this version should work:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jumping Frog</title>
  <style>
    body {
      background-color: #cceeff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .frog {
      width: 100px;
      position: relative;
      animation: jump 2s infinite;
    }

    @keyframes jump {
      0%   { top: 0; }
      50%  { top: -100px; }
      100% { top: 0; }
    }
  </style>
</head>
<body>
  <img 
    src="https://upload.wikimedia.org/wikipedia/commons/5/59/Flexbox_Froggy_%E2%80%93_Frog-green.svg" 
    alt="Jumping Frog Icon" 
    class="frog"
  >
</body>
</html>

Suggestion:
I believe the Discuss Articulate Products section would be a more appropriate place to get answers to product-specific questions. It's where members often go to find detailed solutions related to how the software works, and where those of us who regularly answer those types of questions spend more of our time. This section, on the other hand, is intended for general questions about eLearning.