[ARCHIVED] [ARCHIVED] Create an Announcements Box on your Course Home Page

[kmeeusen]

Announcements 6/3/15

This announcements box is fully editable using the Rich Content Editor.

I stole this one from the old Community, and have adapted it to also use as scrollable sidebars on any Canvas page that includes an html editor. One of the few things I do not like about Canvas is that students have to navigate to another content are to view course announcements. I would much rather have them displayed right on my Home page. I surveyed my students after I started using this trick, and they unanimously approved!

Here is the code, and if I do this right, you should see an example to the right.

<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;"> </div>

</div>

[Shar]

Hi  @jmintz ,

When you are in your course announcements, click on the RSS feed button next to the +Announcement button in the upper right of the page. You'll be taken to the feed page, the URL in the location bar is the RSS feed url.

Good luck - Shar

[jmintz]

Perfect!

Sent from my iPhone

[nathan-swailes]

Hi ishar-uw ! I was wondering what browser you are using? I've been trying to get announcements on my Home Page for a while now and when I have tried a workaround like this the RSS feed never wants to display in Chrome or Firefox. Are you using a different browser or did you have to download and add-on or extension?

[Shar]

Hi  @nathan-swailes ​,

I use Firefox primarily; I have not downloaded any add-ons or extensions. I was informed that Chrome recently came out with an update that does not play well with some Canvas features. But if you've had problems before with the RSS feed, perhaps it's the feed itself.

I ran into an issue where the feed was unavailable for a couple of courses and I don't know if it's because the course end date came up or what, but the feed is blank except when I access it directly from the course announcements page. I've only had that blank feed happen on a couple of courses so I don't think it's anything specific that I'm doing and it's definitely not the browser as I've looked with Chrome, Safari, and even IE.

I wish I could offer more help,
Good luck - Shar

[nathan-swailes]

Thanks for your reply and the additional information ishar-uw​

I have had success in seeing the feed in IE but I get that same blank feed you describe whenever I use Chrome or Firefox. Interestingly, when I use Chrome to visit the FeedWind website (the site where you insert your RSS feed link and it churns out the Javascript and iframe code for you) and I input the link to my course RSS it does generate a preview of the feed on that site. So I am assuming that for this to happen Chrome is actually capable of displaying the RSS.

As you suggested, it looks increasingly likely that the browsers are not playing well together when it comes to displaying RSS feeds. (As an FYI to anyone reading this I was using the following versions Chrome 51.0.2704.103 m and  Firefox 45.2.0 - so not too far behind the latest updates but I'll update and retry).

If that doesn't work then I think at this point I will have to give up and keep my fingers crossed that the Canvas development team can come up with a universal widget that does something similar to your solution. It certainly seems, from the popularity of this discussion, that there are plenty of people who would have use for it.

Thanks again for you help Sharmaine - much appreciated!

- N

[jkolsen]

I just put your feedwind solution on Canvas, running in Chrome. Works perfectly.

[rkelley1]

I wish I had read your post earlier!  For those that would like, here's some additional info to help you with using Feedwind (including a video walk through of the process): Adding Announcements to the Home Page

Robert

[Shar]

No worries  @rkelley1 ​, I really appreciate your write-up and video!

When I wrote my write up, Feedwind still only had version 1 of their feedbox and certainly did not have a way to create an account. Now that one can keep the widget on their account, it does make the code load easier on the Canvas side since you don't have to upload a file with the attributes or paste in large gobs of code. One line and simple!

Cheers - Shar

[gangeljm]

Thanks. I'm just figuring out how to work in CAnvas--transitioning from years of using Moodle.

[nathan-swailes]

Hi everyone,

After trying to find a solution that works and using some these excellent ideas for workarounds I was unable to find one that worked the way I wanted it to. I created an 'idea' to try and get the folks at Canvas to develop some kind of universal widget that would allow users to display the most recent announcement(s) (created using the announcement feature) on their homepage without having to create a rich text box and duplicate the announcement manually or have IT edit the global javascript or use RSS feed that don;t always display well/at all in browsers. My hope is that it will look the RSS feed does (as a bar or sidebar) like the workaround outlined by ishar-uw  which while a fantastic idea may not work for everyone because of browser compatibility issues. It appears that there is genuine interest in a feature/widget that displays the most recent announcement(s) on a custom created home page. So, even if you have had success with these workarounds, if you are still interested in being able to display important or most recent announcements on the first page your students see when they open your course (the home page) then I encourage you to vote up this idea: Display most recent announcements on a Page

Bill , Jane Mintz,  @anthonem ​ Nicole Misemer   Josh Blumberg  Ronald D Bowman,  Emily Frank

Thanks!

NS

[mtuten]

Hi all,

Just wanted to share a discovery I had with the announcement box that  @kmeeusen ​ shared. If you use the Overflow scrollbar on the announcement box (or any div for that matter), the scrolling function will not work in the mobile app. Anything not visible when you load the page will not be accessible to mobile users. It may be useful to put a dialog box with no corresponding link at the top of the announcement box that informs mobile users that they either should view this page in their browser app or scroll down below the box to see a copy of the information. This copy would also need to be in an unlinked dialog box. Dialog boxes are hidden from browser users until the corresponding link is clicked but are automatically shown in mobile.

Code for unlinked dialog box (replace content in bold):

<div class="enhanceable_content dialog" title="**Dialog Title**">

<p>**Dialog content**</p></div>

[Shar]

Hello  @mtuten ​,

Which mobile app are you using? I'm using the Android app on my phone and I am able to scroll in divs that allow it; the scroll bar doesn't show but the content contained within can scroll with a touch and drag gesture. And in the iOS app, the scroll bar will display once I start to touch-and-drag.

It's not obvious you can scroll unless you can see part of the next line of text or part of a picture that there is more to see when you scroll. Using your dialog box example, the message to mobile users could be to inform users to touch-and-drag for more content.

And another option to display content only to mobile users is to use class="hidden-desktop" in the container tab (p, div, et cetera) see https://community.canvaslms.com/message/29093#comment-24572 for more on these display classes.

Hope that helps,
Cheers - Shar

[mtuten]

I was using the Android App. Maybe the box I was working originally with was too small. Sorry for the false alarm and thanks for letting me know it works.

[jkolsen]

This is a really helpful discussion!  I can't implement JavaScript in my setting, but ishar-uw solution is perfect for my small program. Thanks much!

[djanccc]

This is fantastic!  I just added it to my class.

[danklosterman]

Has anyone been experiencing issues with the announcements no longer appearing on their home page with this hack since the most recent update?

[nathan-swailes]

Hi Daniel,

I love the innovative workaround of this hack but I could never get it to work reliably so it does not surprise me that it may be affected by updates. I'd much prefer Canvas developers to introduce a stable widget that can be simply added to the homepage to display your announcements (or the most recent updates). I created this as an 'idea' which you might be interested in as it would result in way more stability and less reliance on an outside site and/or browser incompatibility. You can add your vote and any comments that might help advance the development of a feature like this for your needs here

Thanks and happy Canvas-ing,

Nathan

[danklosterman]

Voted. Thanks for starting that up.

[Shar]

Hi danklosterman​,

I have found issues with how the URL for the feed is formed and whether it includes /course_ or /enrollment_ in the address.

If it has /enrollment_ it works, but /course_ does not

and I have very little idea as to what makes the difference in that URL. I looked at a few courses that were (seemingly) set up the same way and the URL was different. I thought it might have something to do with multiple sections, or start date, but could not nail down a correlation.

So now I've just given up trying to figure it out, and if an instructor is lucky enough to get /enrollment_ in their feed URL, then hurrah! Otherwise, I'm waiting for the feature idea to get approved for a built in Canvas widget.

Good luck,
Cheers - Shar

[danklosterman]

Ok, so what we found is that Admins in our account, such as myself, have problems viewing the announcements via the hack. However, students and faculty are not having this problem. They see it fine apparently.

[kmeeusen]

Daniel:

I'm an admin and see all of mine just fine!?!  I have them in many courses.

KLM

[kmeeusen]

Daniel:

I am in my second year of moving this via course copy from term section to term section without a single problem.

KLM

[Stef_retired]

Tangentially related, I just saw laurakgibbs​'s tweet about using Blogger to embed an announcements feed on a Canvas page. The description and instructions are here: OU Digital Teaching: Blogger Announcements as Canvas Homepage

[jeneen_hill]

I am following Shar's instructions, I have not used code much- so need a little help.  Your example code has iframe, and the code I had generated does not have the iframe code.  Do I need it to be iframe?

Also- could you explain this part of the directions?

The iframe src is the .html file URL without the ?wrap=1 part:

Thanks!

[Shar]

Hi  @jeneen_hill ​,

To insert the feed box you will need to use an iframe insert. You can either use the iframe code generated from feed.mikle.com (as per Bill Gibson's notes) or create your own iframe insert following the steps I listed to create your standalone html file with the code.

8. Head back to your homepage, edit and temporarily put the file onto the page (to get the file number) using the Insert file tab from the Content picker.

9. Switch to HTML editor, the inserted file will have src like /courses/#######/files/#########/download?wrap=1

10. The iframe src is the .html file URL without the ?wrap=1 part:

<iframe title="Course Announcements" src="/courses/#######/files/#########/download" width="100%" height="112"></iframe>

You can copy and paste the code shown in the line above, and replace that src="<filestuff>" with your file information and REMOVE the ?wrap=1 from the end.

Hope that helps,
Cheers - Shar

[sheldonj1]

This comment is not about "the box" but "the need for the box".

My particular college is "having a discussion" about the perceived, whether it is correct or not has yet to be determined, "swamping of the students" by "excessive e-mails".  This has been started by a nearby University and does not necessarily apply to our students, but there is "discussion" and I quite imagine that the college will "do something".

The "suggested fix" is that, in some way, there should be a "central portal" ....through which all "mass? " emails, except for those to "individual students", would be funneled.

If this is implemented then I would imagine one of two, or three or four, whatever, things might happen:

a) that the "e-mail to the student that an announcement has been posted" will go in the hopper and might be lost.

b) or, the college might decide to disable the "email to the student that an announcement has been posted" function in Canvas itself.

IF the college chooses to disable the "announcement e-mail" function then THIS ANNOUNCEMENT BOX WILL ASSUME GREATER IMPORTANCE.

I have the box enabled on my instructor page and have been fiddling with it.

IN ORDER TO ATTRACT THE ATTENTION OF THE STUDENT TO THE BOX:

The background colour of the box may be changed by invoking edit/HTMLeditor/

The very first line:

code:

<div class="img-rounded" style="float: right; background-color: #800000; width: 315px; height: 260px; border: 1px solid black; margin: 10px;">

break code

Using a browser  search engine ----  search for something similar to this: " HTML colors" without the quotes.

There are a variety of such sites, pick one which displays various colours which are applicable, one can also use the link provided below.

It is suggested that one choose a relatively light colour such as  #a6f7f3 which will produce a pale blue.

Then the next time use another colour such as pale pink.

To ease use, it is suggested that the instructor make a "collection" of the HTML colors in a text document, with the appropriate names, so that one does not need to navigate to the web page all the time.  Merely copy and paste from the document.

In the above line of HTML select and delete #800000 and replace it with the code: Xa6f7f3.

Save.

I provide a link to a very easy use site, just adjust the slider and copy the code at the top left.

http://htmlcolorcodes.com/ 

My compliments to the develolpers and to the commenters to the OP.

James Sheldon

[dhulsey]

Hi, James. The people having this discussion know that students can adjust their notifications, right? That is, if a student gets too many emails, she can opt out of particular kinds of notifications or have them condensed into a daily digest.

As as an instructor, I opt out of many of the notifications as well. Funneling the notifications a student chooses to receive would not be ideal because some students do appreciate some notifications. A better solution might be to educate students on how to choose what notifications they get and how, but that is simply my two cents.  

https://community.canvaslms.com/docs/DOC-1286 

[sheldonj1]

Lol

thanks for the very germain question!   I do not know, from the "blasts" that have been sent out it is a lot of people "with concerns".  The University does not use Canvas they use that "other one".

I, personally, do not send out that many e-mails and when I do they are for a very targeted reason, and, by and large, I don't think that the other teachers at my college do either.  Canvas was just deployed 'in earnest" last semester and I am one of the early adopters.

Sooo, yes the staff in online help probably "know" but, since they don't actually "have classes" i don't know if they really KNOW, for them, at this stage it may be that they know intellectually but not have a real handle on the how and why and all that.

Findamentally, if the university sneezes the colleges get a cold, so how far this will go is beyond my pay grade.

But, the point is that this kind of announcement will probably assume more importance nationwide, because if it is perceived as being a problem here it is probably so being in other areas.

Or, it may be that we DO NOT have all that many going out and it is a prophylactic as it were.

dunno, i'm just a simple guy!

james

[kmeeusen]

Hi James:

Your advice about adjusting the colors is spot-on! In fact, I have created a Style Guide in word for all the HTML hacks I routinely use, and it includes my favorite color palette.

I have also created some standard Banners that I use - such as for professional development courses, and record their HTML snippets in my Style Guide. Very handy tool.

As for the Notifications issue, I agree with  @dhulsey  that students need to be trained in how to set their Notification preferences. Also, there are many feature ideas open for voting to improve the Notifications feature that you might be interested in including:

• https://community.canvaslms.com/ideas/7356-notifications-for-student-participation 
• https://community.canvaslms.com/ideas/7371-notifications-to-remind-user-to-submit-assignment-by-toda... 
• https://community.canvaslms.com/ideas/7586-silence-notifications-for-discussions 
• https://community.canvaslms.com/ideas/7271-email-read-notification 
• https://community.canvaslms.com/ideas/7318-global-announcements-should-generate-notifications , and my personal favorite
• https://community.canvaslms.com/ideas/3663-notifications-by-course 

KLM

[sheldonj1]

Ecccctualllyyy.....this has all worked out to be somewhat like what I did in "that other IMS". I have the "formal announcement" box at the top of the page, and animated gif in the banner and the announcement box in this page below.

For those not familiar with HTML

Navigate to the Home page, click edit, click HTML  Search down through the HTML code, and look for "<p> and </p>  About maybe two inches or so down, maybe 20 lines, depending on your setup you will find the following.

<div class="img-rounded" style="float: left; background-color: #3b6cee; width: 800px; height: 100px; border: 1px solid black; margin: 10px;">
<h3 style="color: #ffffff; background-color: #3bee43; text-align: center; margin: 0px; padding: 0px;">Quick Announcement</h3>
<div id="cc-homepage-announcements" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;">this is merely a test</div>
</div>

I have changed the "background-color" which will change the color IN THE TEXT BOX - the text "can" be entered here but it is easier to enter it just in regular box.

The width and the height have been changed to 800px (pixels) and height 100px.  This makes it wide and not so high and just below the banner box.

The next background color box is the top title box.

I changed the word "announcement" to "Quick Announcement" to differentiate from a "regular formal announcement".

It would be BEST to actually COPY all of the above code that is the original configuration into a text editor or wordprocessor, and SAVE. that way if you mess something up you can just delete all the above(with the changed stuff) and paste the original back in.

Be sure to SAVE, or it all goes away.

if anyone among the devs, or others has comments please so post.

james

[sheldonj1]

LOL I forgot to mention that this will make a "wide" and "not as tall" box instead of square.

The box can be "moved left" , the float left, or moved right, or floated right, but not "centered".

sorry

james

[michelle_cicca1]

This is great! I found an older way of doing this which did not look as good or work as well: I LOVE this one! Thank-you so much for sharing!!!

[kmeeusen]

Thanks Michelle!

I actually gussied up that old one, and others in this thread have included more tips for gussying it up.

It works well, and I still use it despite Canvas having developed a way to display announcements on the home page. I just prefer this very flexible little box.

KLM