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

Any way to annotate a Page in Canvas?

Jump to solution

Hi everybody,

I am looking for a way to annotated the text in a Canvas Page. Basically, we would like to add a reading with highlighted areas that are clickable inside a Page. When the student clicks or mouses-over the area they will see a pop-up with some additional info.

Is there a way to do this on Canvas at the moment?

Any tips and ideas are welcome.

Many thanks,

Maya

1 Solution

Accepted Solutions
chofer
Community Coach
Community Coach

HelpText.jpgHi ctmaya​...

I'm wondering if something like this might work for you.  Check out my screen shot on the right.  it's just a link to a website, but when you hover over it, you get additional information.  The HTML code to do this would be:

<a href="http://www.google.com" title= "Click here to check your site's links!">Link Check</a>

I tested it out in my own course, and it seemed to work just fine.

View solution in original post

9 Replies
chofer
Community Coach
Community Coach

HelpText.jpgHi ctmaya​...

I'm wondering if something like this might work for you.  Check out my screen shot on the right.  it's just a link to a website, but when you hover over it, you get additional information.  The HTML code to do this would be:

<a href="http://www.google.com" title= "Click here to check your site's links!">Link Check</a>

I tested it out in my own course, and it seemed to work just fine.

View solution in original post

ctmaya
Community Member

Hi Chris,

Thanks for the prompt reply. Good idea! I tried it out with the content I have in mind; It does the job but I'm worried that it is a bit too small and the readers might miss it. The other issues is that it creates a hyperlink where there isn't one so it might be a bit confusing to some. But good back up strategy.

Thanks,

Maya

chofer
Community Coach
Community Coach

I agree that students might not know that there is helpful text to read if they hover over the link.  That was the simplest thing I could think of, though.  Also, if you remove part of the code so that it doesn't reference a website:

<a title= "Click here to check your site's links!">Link Check</a>

You'll still have underlined text with the help text...there just won't be anything for the students to click on.

ctmaya
Community Member

Thanks Chris,

Yes, I removed the linked already. But as you said the issue is more about the small text. Will think about it and continue to investigate. Will let you know if I find a better solution.

Thanks,

Maya

Stefanie
Community Team
Community Team

ctmaya​, you can insert this HTML code anywhere in the text to create a tool tip:

<a class="ui-tooltip" title="This is the text that will display upon hover"><span style="cursor: help;">Students hover their mouse here.</span></a>

and it will look like this:

tool-tip-hover-text.png

This code even generates that cool little question mark! Smiley Happy

The size of the text, if I'm not mistaken, is dictated by the global CSS, which means you won't be able to change it in the HTML for the page. The hover text looks the same in Firefox, Chrome, and Internet Explorer, but it won't work in a mobile browser.

Hope this helps!

ctmaya
Community Member

Hi Stefanie,

Thanks for the suggestion. I is what Chris suggested above as well. I tried it out and it does the job to a degree but it it is very small on the screen and the information in the pop up needs to draw the attention. It is certainly a back up option.

Thanks,

Maya

Renee_Carney
Community Team
Community Team

Awesome work  @chofer ​ and stefaniesanders

We'll mark this question as answered for now, but do come back and let us know if you find a way to make the text larger!

mpoole
Surveyor

This isn't at all what you were looking for, but is the text going to be static?  I was thinking you could create an image of the text and add hotspots (like with Thinglink) and then embed the enhanced image back in the page so it seems to the students that they are reading a text page with hotspots.

Totally won't work if the text needs to be editable, but would at least potentially solve the size of the text issue.  And you could incorporate video or images as well as text into the popouts.

ctmaya
Community Member

Interesting idea Melissa. The text is static in this case, so I will definitely try this suggestion. Will let you know if it works out. Thanks a lot!