Forum Discussion
Embed HTML code into Rise
Hi! I'm rather new to the Rise experience, and loving it so far! Do any of you know how to embed html code into Rise? I want to embed an image of an ECT graph so that I can see only parts of it at the time and scroll back and forth to examine different parts of the graph. A helpful colleague provided me with this code, which works wonders in another, more basic elearning authoring tool, but does not seem to be doing anything in Rise. I have tried to simply paste the code into the embed block and I have tried putting it in an iframe in the same block. No luck. Any ideas on how to procede?
Here is the code in question:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scroll-container {
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: 0px;
}
div.scroll-container img {
padding: 0px;
}
</style>
</head>
<body>
<div class="scroll-container">
<img src="https://ctgutbildning.se/images/Overvakning/2_3_6.png" alt="CTG" width="1920" height="200">
</div>
</body>
</html>
Thanks in advance!
- Mattias Jahr
Hi Mattias Jahr,
- Upload the attached file as a multimedia attachement.
- Open that file in a new tab so you can copy the url.
- Go to iframe-generator.com and paste in that url.
- Adjust the height to 150 px
- Generate the code, copy the code
- Back in Rise you can add an embed block and insert the code in there.
Those are the steps for next time.
Here is the code you can add to an embed block.
<iframe src="https://articulateusercontent.com/rise/courses/976OeHLv1D3V8vWSzaBliKb7ekEnPhMV/6jduG8d6jmJ3qMgV-code.html" name="ecg" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="150px" width="600px" allowfullscreen></iframe>
Thank you so much! After racking my brain and twisted it into new shapes, to reproduce this with other images, everything turned out perfectly.
Great to hear!
