CanvasHacks Classroom

[kmeeusen]

8/15/2018 Update:  To sign up as a student, use this link:

This course has enabled open enrollment. Students can self-enroll in the course once you share with them this URL:https://resources.instructure.com/enroll/8R9H7B. Alternatively, they can sign up at https://resources.instructure.com/register and use the following join code: 8R9H7B

 @chofer ,  @G_Petruzella  stefaniesanders, awebster

Hi folks, it looks like Scott the Magnificent has already created us a CanvasHacks public classroom to play in, and enrolled us as teachers.

Any thoughts on structure? I have a similar course that is mostly complete that I am preparing for my faculty that I could upload to provide a bit of structure. It is intended for non-coders, and has the following module structure:

• About HTML and the HTML Editor - DO NOT FEAR THE CODE!
• Beginning Users
• Intermediate users
• Advanced users
• Sharing (sharing has a discussion and links to external resoursces

However, I am not a pushy sort, so whatever anybody else wants, I am more than happy to go along with. I can always upload stuff a piece at a time and fit it where I can.

My "lessons" are all one page, and include:

• A brief description
• The code snippet
• Anatomy of the code snippet where I identify those components that are easy to modify by novices like myself
• Instructions for use
• Troubleshooting, and
• Sometimes some obvious variations based on changes to parts of the code (colors, sizes, positions etc. - the minor stuff)

Let me know what your think!

Oh yah, and I also have a hokey Home page, because that's just the kind of guy I am:)

[mmoore1]

Great Resource.  Thanks!

[jacobtowne7]

This is outstanding information, well done.

[cblanos]

 @scottdennis ‌, thank you!

[scottdennis]

Great idea,  @cblanos !  

Done.

[cblanos]

 @kmeeusen ‌, I love this and am glad to have stumbled upon it, just wish the url wasn't in a graphic. Looking forward to learning about all the hacks everyone is doing in Canvas. Thank you!

[pimmel2]

I'm following the link at the top of the post and it asks for a login.  I try signing in as a new member, I fill out the form, click submit and nothing happens.  I thought I made an account at instructureCARN but it doesn't seem to be working.  Any help would be appreciated!

Thanks,

Pat

[robotcars]

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

Canvas CodePen Example - A Pen by Robert Carroll 

[orwinr]

Please add me as a teacher too 🙂

[scottdennis]

Please feel free to!

[robotcars]

Thanks Scott!

I missed reading that we can do this for our own people once we're instructors.