cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

Is it possible to put javascript in pages?

Jump to solution

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

Tags (1)
12 Replies
Highlighted
Community Member

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

kelley.meeusen@cptc.edu​ 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. 🙂

Highlighted

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

Highlighted

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

Highlighted

Hi kelley.meeusen@cptc.edu​, 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!

Highlighted

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!

Highlighted

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

Highlighted

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

Highlighted

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>

Highlighted

kelley.meeusen@cptc.edu​ 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

Highlighted

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.