cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
wakimsu
Community Participant

Creating star ratings on a page

Jump to solution

I provide students a list of web resources for the class and would like to add an option where students rate each of the links on the page.  I found the following source that has free html source for this: https://www.powr.io/users/me

I tried following their instructions by cutting and pasting the html code into the html editor. But, this doesn't seem to do anything in Canvas. Is there a way to do this? Is there a better way to do this?

Thanks!

1 Solution

Accepted Solutions

tl;dr: Use <iframe> rather than <html> to embed the ratings widget.

 @wakimsu ​, as you've discovered, the HTML code you harvested for the widget isn't working in a Canvas page, inasmuch as the Canvas Rich Content Editor (RCE) will strip out any code that is not listed in the Canvas HTML Editor Whitelist .In this case, I suspect that the <script> attribute is one of the offending elements.

Using the link you provided above, I was able to find <iframe> code that will work:

<iframe src="https://www.powr.io/plugins/reviews/view?unique_label=a9dc29be_1460797625287&external_type=iframe" width="100%" height="600" frameborder="0"></iframe>

This is how the page looks in teacher view:

ratings-widget-page-teacher-view.png

Notice the odd icon at the right side of the screen (it flashes Edit Me). In order to complete the embed process, you'll need to save the widget, and to accomplish that, you'll need to complete this login (which I didn't do):

ratings-widget-sign-in.png

Since I didn't create an account and save the widget, the Edit Me also appears in students' view of the page, which is not a desirable outcome. The widget creates not only a star rating system for the page, but also a comment box, so I was curious to see what happens to those comments. I logged in as a student to access the page. This is how the page (with the unsaved widget, and an unsaved rating and comment I typed in) looks to students:

ratings-widget-page-student-unsaved-view.png

When I tried to save my comment as a student, I was confronted with this:

ratings-widget-page-student-annotated-view.png

In short, this is a promising find! It's not quite ready for prime time--I don't know if students are likely to use the ratings system if they have to authorize an external service or create a new account to post a rating--but I hope you will find the time to play around with it and post your progress. In fact, this is such an interesting idea that, if you can get it working, I hope you will create a resource compiling your findings in the Instructional Designers​ space (and share it to other spaces as well!).

View solution in original post

6 Replies
chofer
Community Coach
Community Coach

Hi  @wakimsu ​...

The link you've provided just takes me to a sign-in page for POWr, so I'm unable to see what kind of content you are trying to embed inside of a Canvas page.  It is entirely possible that Canvas may strip out some of the embed code once you save the Canvas page.  There are some HTML elements that Canvas does not allow, and so what you'd hope to see after adding the embed code doesn't always work.  If you could maybe provide a sample of the embed code here to try out, that might help with troubleshooting.  Thanks!

wakimsu
Community Participant

Thanks for your help Smiley Happy

The code is:

<script src="//www.powr.io/powr.js" external-type="html"></script>

<div class="powr-reviews" id="d808a148_1460758009"></div>

And maybe a better link to the site is: https://www.powr.io/plugins/reviews

It's a widget that can be added to a website to allow people to rate things.  Below is a screenshot that might help. I'm not fully set on this particular tool, but I would like something that gives students the option to rate a list of links. So, if there's something better that Canvas already has, that would be great too.

179059_pastedImage_1.png

tl;dr: Use <iframe> rather than <html> to embed the ratings widget.

 @wakimsu ​, as you've discovered, the HTML code you harvested for the widget isn't working in a Canvas page, inasmuch as the Canvas Rich Content Editor (RCE) will strip out any code that is not listed in the Canvas HTML Editor Whitelist .In this case, I suspect that the <script> attribute is one of the offending elements.

Using the link you provided above, I was able to find <iframe> code that will work:

<iframe src="https://www.powr.io/plugins/reviews/view?unique_label=a9dc29be_1460797625287&external_type=iframe" width="100%" height="600" frameborder="0"></iframe>

This is how the page looks in teacher view:

ratings-widget-page-teacher-view.png

Notice the odd icon at the right side of the screen (it flashes Edit Me). In order to complete the embed process, you'll need to save the widget, and to accomplish that, you'll need to complete this login (which I didn't do):

ratings-widget-sign-in.png

Since I didn't create an account and save the widget, the Edit Me also appears in students' view of the page, which is not a desirable outcome. The widget creates not only a star rating system for the page, but also a comment box, so I was curious to see what happens to those comments. I logged in as a student to access the page. This is how the page (with the unsaved widget, and an unsaved rating and comment I typed in) looks to students:

ratings-widget-page-student-unsaved-view.png

When I tried to save my comment as a student, I was confronted with this:

ratings-widget-page-student-annotated-view.png

In short, this is a promising find! It's not quite ready for prime time--I don't know if students are likely to use the ratings system if they have to authorize an external service or create a new account to post a rating--but I hope you will find the time to play around with it and post your progress. In fact, this is such an interesting idea that, if you can get it working, I hope you will create a resource compiling your findings in the Instructional Designers​ space (and share it to other spaces as well!).

View solution in original post

Oh, and you might be interested in reading awilliams​'s thoughtful (archived) feature idea along with  @kona 's discussion Likes, Helpfuls, and Stars in Canvas?   And, this feature idea is currently open for voting, so add your feedback (and vote!):  

wakimsu
Community Participant

You're my hero! 

I'm still new to Canvas and really appreciate the help as I figure out how things work here. I will play around with this and will post my findings.

And thank you for the html document; that has been bookmarked.

wakimsu
Community Participant

I looked at the options for the site and give it a 3 star rating. Now, if only there was some way to do that here :smileysilly:

I don't know if it's worth posting this as a solution on the instructional designers page or not.  It is the only free source for reviews that I could find (I spent some more time looking). All the other free sources require a <script> tag and don't work within Canvas. But this one still has significant issues:

  • there is no way around the requirement for students to log in unless you upgrade to a pay option which allows for anonymous reviews. I tend to avoid having students log in to external sites for safety reasons and would feel particularly odd about requiring them to log in to a site I don't  know much about.
  • the gear icon appears in "student view" but not if I make the page publicly visible and visit it from a different browser (where I'm not logged in to Canvas).  So, I don't know what students would actually see.  See it in Canvas.
  • The size of the widget is a bit clunky. Even when I put it within the same <p> tags as the link, the widget still takes up a lot of space. The first appearance of the widget in the above link is a demo of that.

So, I think  "not ready for prime time" is spot on. If anyone really needs this functionality, it may be a duct-tape fix - but I'd rather wait for the Canvas developers to add this functionality to the LMS. Hopefully many folks vote for the idea!

Thank you for your help stefaniesanders​!