I have been perusing the content in this course, and it's fantastic! I have a few thoughts, but they can wait.
How about a Big Ask?
I was wondering about the possibility of adding support for
CodePen - Front End Developer Playground & Code Editor in the Browser
This would allow embedding inline examples of HTML and CSS,
keeping the majority of the content area for the example, and separating the code into something readable.
I'm not sure what the environment is like on resources.instructure, however
This works on our test environment, at the sub account level themes for my workroom...
...injecting a new script tag for codepen.io
...and trying to limit it to wiki pages, maybe only this course too?
...and readable to all users.
Added as a teacher
// enable codepen embed
(function() {
try {
// if the user has read permissions to the wiki page
if (typeof ENV.WIKI_RIGHTS !== 'undefined' && ENV.WIKI_RIGHTS.read == true) {
!(function(s, d, url, e, p) {
(e = d.createElement(s)), (p = d.getElementsByTagName(s)[0]);
e.async = 1;
e.src = url;
p.parentNode.insertBefore(e, p);
})("script", document, "//assets.codepen.io/assets/embed/ei.js");
}
} catch (e) {
console.log(e);
}
})();I'm open to suggestions and edits.
This is not a mockup
While the RCE contains
<p><a href="#">a link</a></p>
<p><a style="padding: 3px; border: 2px solid blue;" href="#">a styled link</a></p>
<hr />
<p class="codepen" data-height="300" data-slug-hash="YjRegP" data-default-tab="html,result" data-user="robert-carroll" data-embed-version="3">The CodePen<a href="https://codepen.io/robert-carroll/pen/YjRegP/"></a></p>Anonymous Pens cannot be embedded, so users would need to create an account.
If not, we can use links
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.