cancel
Showing results for 
Search instead for 
Did you mean: 

Laura's Widget Warehouse: Canvas-Friendly Javascripts

CommunityTeam
Community Participant
13 17 1,223
17 Comments
biray
Community Champion

Be sure to watch the entire "Connected Learning with Cats" series, hosted and developed by laurakgibbs‌ to claim the badge (below).

240402_pastedImage_1.png

Go to your PROFILE > REWARDS > scroll and click "Available Quests" tab to learn more about completing this quest!

(What is the Canvas Community Reward System?‌)

laurakgibbs
Community Champion

I also made a kind of personal challenge to go with the official Quest... details here:

https://community.canvaslms.com/people/laurakgibbs/blog/2017/07/04/connected-learning-with-cats-make... 

🙂

bcrook
Community Advocate
Community Advocate

This is such a great resource!  Thank you!

laurakgibbs
Community Champion

Let me know if you have any questions or want to brainstorm ideas! I just created a whole bunch of new javascripts for my Aesop's fables projects this summer. I love to make new ones: it still feels like magic every time. 🙂

Bobby2
Community Coach
Community Coach

laurakgibbs‌ oh boy you have blown me away again. This makes it worth getting over my fear of HTML.

laurakgibbs
Community Champion

Yay  @Bobby2 ‌ the time taken to learn a little HTML is time well spent because just a little HTML goes a loooooooooong way! 🙂

That was my request to my student years ago: I asked him to build me a randomizer that let me use HTML but did require me to write any javascript. And it works! Both javascript and HTML are still going strong 10+ years later. 

wwolf
Community Participant

I ended up watching all of the videos you had in the Connected Learning With CATS Quest.  I came for the Quest and stayed for the learning.  You have presented me with some amazing tools, and I plan to get started as soon as possible by building them into some of the courses I use with my teachers.  I want to grow this organically by having them in my teacher classes to develop interest for their own classes.  Thanks again, laurakgibbs‌!

jessica_henders
Community Member

These videos have been so helpful, laurakgibbs! You mentioned doing your coding by hand in a Google Sheet. Do you have any resources on that? Would you simply set up the chart and then export as .html file or are there additional steps? Thanks!!!

laurakgibbs
Community Champion

Hi  @jessica_henders ‌! It's ridiculously simple... when you copy-and-paste from a spreadsheet, there are tabs separating the cells, but those tabs just get translated into trailing space in the HTML file so, while it looks ridiculous, it doesn't matter; it processes just fine as HTML. So, for example, when I am making the randomizer for the growth mindset cats, I have a spreadsheet; when I make a new cat post, I just add a new row to the spreadsheet:

spreadsheet screenshot

Each row has three distinctive things that come from the new blog post:

the image URL

the blog post URL

the growth mindset quote

The other columns are the HTML blah blah blah that is the same every time, and I can copy that on down the column. I can move the columns around and change the HTML to repurpose the same data for different purposes, changing the image widget, generating an HTML unordered list instead of a table, etc. I change the HTML; I never change the underlying data that comes from the blog post. I color the HTML columns yellow so I don't get mixed up.

So, I just copy and paste the rows, and then paste them between a <table></table> pair of tags, and I'm done (or between an <ul></ul> pair if I am making a list).

You can see what an HTML file looks like here:

http://widgets.lauragibbs.net/gmcats/growth400.html 

Here is an example of the same data repurposed as a list that I put into a blog post:

Growth Mindset Resources: Cat Index 

So, the spreadsheet is like a simple-minded database which I use to generate HTML reports by jiggling the HTML in the columns. It's weird, but it's super-fast, and I'm always in a hurry because there are always other things I want to work on too, like everybody. Too much good stuff to explore and share! 🙂

laurakgibbs
Community Champion

I am so glad that was helpful,  @wwolf ‌ .... and that is the great thing about leaving a digital trail! You never know who it will be useful to in the future!

The Canvas Community has been a great place for me to connect with other teachers, and I am here a lot, so ping me anytime with questions, and I am also glad to brainstorm. Tools like blogs, Padlet, Inoreader, etc. are so flexible and can be used in so many different ways, and if my experience using them in my own way can help give people new ideas, that is the idea here: I design the applications to suit my own classes, but that can hopefully give other people ideas about how to use these flexible tools in new ways for their own classes. 

jessica_henders
Community Member

Love this, laurakgibbs‌! Thank you so much. I can't wait to try it! 

laurakgibbs
Community Champion

It works great for me; I use it for tons of stuff. If you run into any snags, let me know. If you use Google for Sheets, you can always share a sheet with me and I would be glad to help you troubleshoot: laurakgibbs@gmail.com

jayoder
Community Advocate
Community Advocate

Thanks for the tip! The warehouse is great! Is there a way I can center it on the page or add something to the right so there is not so much negative space? Also, if I wanted to create the memes in Spanish do you have a meme generator you like? What would be the most efficient way to do that? As you can tell by my post times...I get my personal exploration time after my kids are in bed and before they wake up! Smiley Happy

268504_pastedImage_1.png

laurakgibbs
Community Champion

Ohhhhh, doing Spanish memes would be fabulous! I use cheezburger to do mine, but there are so many great meme generators out there. Get your students to do that too!

Re: layout, the trick is either to use tables for layout (I know, so old-school! and not mobile-friendly) or to use some CSS to do some divs on the page. The way I did it in the Warehouse was with tables, but I've also use the divs successfully.

The real white space problem is not the left-right (because that is easy to fix with tables or CSS divs) but the height thing; with images, you often cannot predict what the height will be, so you need to make the iframe as high as the highest images, which can lead to white space below.

nbiddinger-c
Community Participant

I am loving the ideas of using radomizers!  What a engaging element to include in a course - thank you!

nbiddinger-c
Community Participant

I also shake & shiver at the thought of opening HTMLs and playing in there - but the more I learn, the more I know I need to get over myself and jump in.

laurakgibbs
Community Champion

 @nbiddinger-c  A little HTML goes a looooooong way. It really does give you a sense of control in a way that the regular editor does not.

And there are lots of people here at the Community who can answer questions and help if you run into any snags or problems! 

Feel free to ping me anytime; when you use the @ sign here it lets you ping a person, and you can type their first name and then _ between the first name and last name to search all the people's names. 🙂