Whether image embeds properly in Quiz answer box seems to depend on where it's copied from?

[jrs294]

Hello,

This is a bit of a long question on a very narrow topic...

The quizzes I'm designing for my students prompts them to embed images as their answers. I want to do it this way because when I've had students upload images in the past, students have often submitted answers before the file finished uploading.

I have a web-based app that creates URLs for embedding images. Pasting them into the Quiz answers box automatically embeds the image. (Using the "embed" feature from the menu does the same thing.) Strangely, whether the embed works or not seems to depend on what the URL was copied from. That is , when I highlight the URL in the app that creates the image, click Control+C, and then paste into the Quiz answer box, I see the URL rather than an image preview:

When I use the "COPY URL" button, for the embed URL, in the app creating the image, pasting this into the Quiz answer box works:

A very strange thing about this is that if I copy the URL from the app (see picture above), although it doesn't bring up the preview in Canvas' answer box, if I paste it in Notepad (or Word or whatever) first, then copy again, and then paste in the Canvas answer box, it does automatically bring up a preview.

Any theory of what's going on here?

The app I'm using to create these diagrams and embed codes for images of them is mine. The point of the embedd image URL feature is to be able to embed images in Canvas quizzes. So we can tweak the code to solve this if anyone knows what the problem with the highlighted and copied URL is.

Thanks!

[james_whalley]

@jrs294 When you look at the html of the Rich Content Editor for each of your examples, what do you see? For me, the first example you show (a url in the RCE) is what I would expect if you are pasting a url.

[jrs294]

@james_whalley That's a good thing to check.

To answer your question, yes, it's a URL.

Here's the html for the one that doesn't preview:

<p><span>https://storage.googleapis.com/argumentationio/Module%202%20-%20Easy%20-%20Looking%20Busy%20Status-1...</span></p>

And here's the html for the one that does preview:

<p><img src="https://storage.googleapis.com/argumentationio/Module%202%20-%20Easy%20-%20Looking%20Busy%20Status-1..." /></p>

I see the difference. The question is why...

[chriscas · Accepted solution]

Hi @jrs294,

It probably comes down to what's actually being copied to the clipboard with the various methods you're experimenting with.  I know copy/paste seems like such a simple concept, but I think there's a lot more going on behind the scenes when something is copy/pasted than most realize.  You can take a look at the info on this page from Nirsoft, explaining that when something is copied, usually there ae multiple different formats of that data put into memory.  As @james_whalley mentioned, I bet for one of your methods, the URL is being copied as HTML code, which then pastes that same way into the RCE.  Another method might just be copying the raw URL text, which the RCE them translated to the embedded image you want.  The page has a utility (windows-only) you can use to view what's going on when you copy, so maybe that will help you track things down.

Hope this helps a bit!

-Chris

[jrs294]

Thanks for this.

Neither method includes any code with the copying. It seems like Canvas adds that automatically. When I paste into Notepad or word, the results are identical for the two methods.

[james_whalley]

@jrs294 That's strange. I've never come across pasting a url into the RCE and having it automatically recognize that the url points to an image and display the image. You mentioned that the app creating these links is yours. Can you share specifically what the app does in the code when you click the Copy URL button?