cancel
Showing results for 
Search instead for 
Did you mean: 
vkgupta
Surveyor II

Image popup inside a quiz question

Jump to solution

Hi,

Is there a way to link an image file inside a quiz question so that when a student clicks on the link, a popup window with the image shows up?

I do not want to embed the image as it takes up too much space and only contains supplementary information.  I would like to deliver one question at a time and so I cannot just a use the text question option.

Thanks for any tips.

Vinay

1 Solution

Accepted Solutions
jbrady2
Community Member

vkgupta This is what I used.

<p>Insert directions or question text here.</p>

<p>&nbs</p>

<p><strong><span style="text-decoration: underline;"><a id="link1A" href="#dialog_for_link1A"> Click here to view image</a></span></strong></p>

<div id="dialog_for_link1A" class="enhanceable_content dialog"><img src="/courses/123/files/1013115/download" alt="" width="200" height="200" /></div>

View solution in original post

14 Replies
chofer
Community Coach
Community Coach

vkgupta​...

What you could do is upload your image(s) to a file storage site such as Dropbox (if you have a Dropbox account), and then when you create your question(s) in the quiz, you would just link to the image(s).  By default, links that take users outside of the Canvas environment open up in a new window/tab.

Or, if you wanted to keep things all contained in Canvas, you could probably upload the images into the "Files" area of a course and then just link to a file (rather than embed the image).  Check out this Canvas Guide: How do I create a file link in a page in my course? After you test the link, if it doesn't open up in a new window, go back into the editing screen of the question, highlight the link, and try pressing Ctrl+K on your keyboard which should open up a link window.  You should be able to tell the link to open up in a new window.

Also, there is a bit of HTML code that you might be able to use which would create a button in the question, and when people click on the button, a window with an image could open.  In this example, when the button is clicked, people see some text, but I imagine that you could tweak the code to reference an image you loaded to the "Files" area of your course.

<div id="dialog_for_link1" class="enhanceable_content dialog">Bacon ipsum dolor amet pancetta cow...</div>

<p><a id="link1" class="Button Button" style="width: 20%;" title="This is the button description when you roll your mouse over it." href="#dialog_for_link1">Click to Learn More</a></p>

Hope these suggestions are helpful to you!

jbrady2
Community Member

 @chofer  The HTML you mentioned does work to provide the pop-up with the image. I had read this question and logged into my Canvas course to try out that HTML since I was already using it for a pop-up dialog box on a page. The only issue that I found is that the image flashes briefly below the link I embedded in the question, so hopefully someone better at HTML than I can supply a fix to keep the image hidden within the question so that it only shows in the pop-up box.

Thanks Chris.

Yes, I was trying to keep it all contained in Canvas and not upload files elsewhere. 

I tried the Ctrl+K to make the image file show in a new tab.  It works fine but unfortunately the new window has the whole Canvas frame etc. and that would just confuse the student.  I wanted to show only the image as a popup.

I am trying the html with the button but I suspect it will be the same issue because the file address is through the canvas link. 

The only workable approach I have so far, which is not the best,  is to change the image to a pdf and then link it such that it only shows the preview using BOX but does not show it as a downloadable file.  The student would to minimize the preview.

Vinay

Jeffrey - could you share the HTML for the popup with dialog/image?

jbrady2
Community Member

vkgupta This is what I used.

<p>Insert directions or question text here.</p>

<p>&nbs</p>

<p><strong><span style="text-decoration: underline;"><a id="link1A" href="#dialog_for_link1A"> Click here to view image</a></span></strong></p>

<div id="dialog_for_link1A" class="enhanceable_content dialog"><img src="/courses/123/files/1013115/download" alt="" width="200" height="200" /></div>

View solution in original post

Thanks Jeffrey.

That actually seems to work great. It shows up without the Canvas frame and can be closed to view the question again.

Vinay

This is a great tip!

I am trying to adapt this for an image larger than 200px. Can you control the size of the enhanceable_content dialogue box that pops open, so if I had an image that was 600px wide, the box would fit the image without scrolling?

paulatkinson​ The width and height settings in the following line, that was included in Amanda's code, control the image size.

<p><a href="https://secure.flickr.com/photos/97523510@N00/4538543133"><img style="max-width: 500; max-height: 500;" title="Bike cookies" src="https://farm3.static.flickr.com/2710/4538543133_9849f5b2a3.jpg" alt="Bike cookies" width="242" height="182" /></a></p>

Thanks  @jbrady2 , that controls the size of the image quite successfully, but the popup window itself on our instance is still smaller than the image itself and viewers will need to scroll. See below for an example. I wonder if you have any ideas about how to override the size of the whitespace, not just the size of the image? Many thanks!

.Image popup size.PNG

paulatkinson I might be wrong about this, someone better at coding HTML than I will have to verify it, but everything I have found in my research appears to indicate that changing the size of the popup box is something that has to be done in the JavaScript. I have been trying to solve this very issue with a quiz question I helped create for a faculty member that needed a popup box with an image, and I have had no luck so far.