cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
harris60
Community Contributor

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)
1 Solution

Accepted Solutions
MattHanes
Community Champion

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.

View solution in original post

12 Replies
MattHanes
Community Champion

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.

View solution in original post

harris60
Community Contributor

Mathew,

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

Michael

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
Community Contributor

 @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

harris60
Community Contributor

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>

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
Community Contributor

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
Community Coach
Community Coach

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!

olexar
Community Contributor

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!