[ARCHIVED] Is it possible to put javascript in pages?

[harris60]

I am an instructor so I have 'teacher' level of access on my courses.

I would like to make sure my students see a message. What I would like to do is add a javascript prompt to the home page of my course.

<script>

var MessageRead= "";

do

{

  var MessageRead=prompt("You must schedule your first group meeting with your teammates before September 1. Go to Modules for details.\n\nType yes in the box below to indicate you have read this message.");

}while(MessageRead!="yes");

</script>

I know that the html tool in pages strips out script tags. Is there any way to add my own javascript to a page?

Thanks,

Michael

[MattHanes · Accepted solution]

That is not possible unless you have admin rights to add custom javascript to a particular sub-account.

You can use the following code to add an attention-grabbing box to the top of the home page:

<div class="img-rounded" style="float: right; background-color: #fffbcf; width: 315px; height: 260px; border: 1px solid black; margin: 10px;">
     <h3 style="color: #ffffff; background-color: #2a4e57; text-align: center; margin: 0px; padding: 0px;">
          Announcements
     </h3>
<div id="cc-homepage-announcements" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;">
     <p>
          You must schedule your first group meeting with your teammates before September 1st. Go to Modules for details.
     </p>
</div>
</div>

If you want a confirmation they have read that particular requirement, you can create an assignment or quiz that requires them to respond. Then you will know who has or has not seen it based on the gradebook.

[harris60]

Mathew,

Thanks for the tip. That box does stand out and it looks nice on the page also.

Michael

[kmeeusen]

Yep, Matthew, that box works great! I use it in all my courses.

We have a CanvasHacks Demo Course in Instructure Resources that was built by a few of us in the Community that includes many more HTML ticks you can try out.

If you are interested, send me your email address and I will get you enrolled. You can enroll as a teacher and contribute hacks, or as a student and use the hacks in there. However, even a student can contribute using a discussion included in the course.

Just let me know.

[harris60]

 @kmeeusen ​ So just showing how far behind the times I am, I just saw your note, and I can't figure out how to email you in order to give my email?

Thanks,

Michael

[kmeeusen]

Michael:

I understand. I am so far behind that if I turn around, I can start over again (obscure geometry humor).

If you follow me, you can then see my contact info, and/or privately message me with your email address.

KLM

[harris60]

Please add me to the CanvasHacks Demo Course as a teacher. I want to see what everyone else has done, but I will probably also have a few things to add.

However, I’m still learning Jive. I am now following you. How do I send you a message in Jive? How did you send me one?

Michael

[kona]

If you hover above Kelley's name in this discussion you'll get a pop-up option to message him - this is probably the easiest way!

[kmeeusen]

Michael:

If you follow me, you can send me a private message in Jive, and include your email address so I can use it to enroll you.

Hover over my name next to my avatar to see my brief bio, and click follow. After I acknowledge your follow request, hover over my name and choose message, or click the message option in the top menu bar.

I hope this helps,

Agent K

[olexar]

Hi  @kmeeusen ​, I came across this thread, and would love to participate in the CanvasHacks Demo Course. I tried your profile, but can't seem see your contact information. Please let me know how I could go about getting into the course. Thank you!

[kmeeusen]

Richard:

If you follow me, you can send me a private message in Jive, and include your email address so I can use it to enroll you.

Hover over my name next to my avatar to see my brief bio, and click follow. After I acknowledge your follow request, hover over my name and choose message, or click the message option in the top menu bar.

I hope this helps,

Agent K

[harris60]

In case it helps anyone else, I reversed engineered a number of other pieces of code. The following will popup an alert message when you load a page.

This pops up an alert on top of the page with a Cancel button.

<div id="closethis" class="ui-dialog ui-widget ui-widget-content dialog" style="position: absolute; left: 20%; top: 20%; padding: 5px;">

<div>This is my important message.</div>

<a class="element_toggler Button Button-small" style="float: right; margin: 2px;" aria-controls="closethis" aria-expanded="true">Cancel</a></div>

</div>

This does the same, but it first covers all of the underlying content in gray. Then it puts the popup alert on top of the gray.

***************************

Note there is a warning with this second option. If you make a mistake the gray box will hide the buttons when you view the page and the cancel button will not clear the gray box. This means you will not be able to edit the page. In this case, go to the page URL and type /edit at the end of the URL.

***************************

<div id="closethis" style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: gray;">

<div class="ui-dialog ui-widget ui-widget-content dialog" style="position: absolute; left: 20%; top: 20%; padding: 5px;">

<div>This is my important message.</div>

<a class="element_toggler Button Button-small" style="float: right; margin: 2px;" aria-controls="closethis" aria-expanded="true">Cancel</a></div>

</div>

[laurakgibbs]

I just published a post at my Canvas blog about how I do javascript in Canvas pages. It's a solution that works great for any faculty at my school since we have a Domain of One's Own project that gives faculty access to web hosting at Reclaim Hosting. Highly recommended as a way to get the most out of Canvas! Here's the post:

Become a Javascript Wizard in Canvas: HTTPS is the key

 @kmeeusen ​ The CanvasHacks course sounds very interesting; can you enroll me? I have a demo course of some dynamic content that I guess would fall into the category of hacks, and I would like to share and also get more ideas to experiment with. Here's the course: Canvas Growth Mindset: Dynamic Content.

http://Canvas.MythFolklore.net

It would be nice to content with others who are experimenting with things like this. My school just started a soft roll-out of Canvas this semester but we are going campus-wide next year, and I'm trying to learn useful tips to share with other faculty at my school. We've been with D2L for over 10 years, so it's a huge change. 🙂