Coding in RISE

Question

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.&nbsp;
&nbsp;
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&nbsp; &lt;meta charset="UTF-8"&gt;&nbsp; &lt;title&gt;Jumping Frog&lt;/title&gt;&nbsp; &lt;style&gt;&nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; background-color: #cceeff;&nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; }
&nbsp; &nbsp; .frog {&nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; animation: jump 2s infinite;&nbsp; &nbsp; }
&nbsp; &nbsp; @keyframes jump {&nbsp; &nbsp; &nbsp; 0% &nbsp; { top: 0; }&nbsp; &nbsp; &nbsp; 50% &nbsp;{ top: -100px; }&nbsp; &nbsp; &nbsp; 100% { top: 0; }&nbsp; &nbsp; }&nbsp; &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&nbsp; https://upload.wikimedia.org/wikipedia/commons/6/62/Frog_icon.svg&lt;/body&gt;&lt;/html&gt;

nedim · Answer

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 &lt;img&gt; tag (not just a link) and that your HTML includes both the &lt;style&gt; and &lt;body&gt; sections properly.
For example, this version should work:
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Jumping Frog&lt;/title&gt;
  &lt;style&gt;
    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; }
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;img 
    src="https://upload.wikimedia.org/wikipedia/commons/5/59/Flexbox_Froggy_%E2%80%93_Frog-green.svg" 
    alt="Jumping Frog Icon" 
    class="frog"
  &gt;
&lt;/body&gt;
&lt;/html&gt;

Suggestion:I believe the&nbsp;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.

sarahlichy · Answer

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

judynollet · Answer

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.&nbsp;

sarahlichy · Answer

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

rashihonrao · Answer

Hi, I have pasted my HTML code in my sample RISE course but when I add the 'complete block directly above' continue block, it doesnot work even when someone has given the wrong answre to the HTML quiz. I have added the window.parent.postMessage({ type: 'complete'}, '*') code and also set the completion requirements toggle on.&nbsp;

Forum Discussion

Coding in RISE

6 Replies

Related Content

Rise 360: How to Use Code Block

Display Code Snippets in Rise 360

Rise 360: Create Custom Blocks

Rise 360: Deploy Content Rapidly with Quick Share

Creating Animations and Interactions in Storyline with Simple CSS and JavaScript (No Coding Required)

Learn

Connect

Discover

Community

Company

Trust Center