Forum Discussion

SarahLichy's avatar
SarahLichy
Community Member
6 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. 

 

<!DOCTYPE html>
<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>
  https://upload.wikimedia.org/wikipedia/commons/6/62/Frog_icon.svg
</body>
</html>

instructional design
  • SarahLichy's avatar
    SarahLichy
    3 days ago

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

4 Replies

  • SarahLichy's avatar
    SarahLichy
    Community Member
    3 days ago

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

    • JudyNollet's avatar
      JudyNollet
      Super Hero
      3 days ago

      If the issue is still going on, this post shouldn't be marked as SOLVED. The "Mark as Solution" option should be used to indicate which reply answers the question. If none do, then none should be marked as the solution. 

      • SarahLichy's avatar
        SarahLichy
        Community Member
        3 days ago

        Sorry, I just marked as solved as I moved over into the products discussion forum. 

  • Nedim's avatar
    Nedim
    Community Member
    4 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.