Celebrate Excellence in Education: Nominate Outstanding Educators by April 15!
Found this content helpful? Log in or sign up to leave a like!
Added as a teacher
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.
// 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
