Canvas code - div positioning?

[fbidwell]

I'm working with an instructor that has a quiz where students must view and identify images. The instructor is, of course, concerned about students simply right-clicking to do a reverse image search and get the answers, so I am working on easy methods to prevent this.  So far, I've got some code worked up to place a <div> over the image that prevents students from reverse image searching or drag-dropping the image.  It works well actually, except that the code is causing a lot of blank space below the image because of how Canvas is calculating how much space to allot. I'm not that great with code, so there is probably an easy solution for this. Anyone able to assist?

Here is the code I'm using in the quiz question:

<p><img style="position: relative; z-index: 1;" src="/courses/50743/files/4996457/preview" alt="" width="400" height="400" /></p>
<div style="position: relative; top: -400px; height: 400px; width: 400px; z-index: 2;"></div>

[fbidwell]

Alternatively, if there is a better way to prevent students from right-clicking an image, or dragging it to their desktop, I'm all ears.

[Stef_retired]

 @fbidwell ‌, I've shared your question with the https://community.canvaslms.com/groups/designers?sr=search&searchId=d12edaff-778c-41c9-b39f-658f5b7a...‌ group whose members are most likely to have the HTML skills needed to solve this problem. Their responses will appear in a unified thread here. If you're not yet a member of that group, and would like to join, you can easily do so by clicking on the link to the group and selecting Join Group from the Actions dropdown at the upper right of the group home page.

[fbidwell]

Thank you!

[MattHanes · Accepted solution]

Wouldn't a student be able to screenshot the picture for a reverse image search no matter what you do with disabling the save and dragging?

[fbidwell]

Yes, but the most common method by far will be simply right-clicking. Lockdown browser is not currently an option. In our former LMS, the instructor was able to make a setting for the quiz to disable right-click, so that is what they are comfortable with and feel works well enough.

[ShanaPerry]

smart idea but now i know just to use my phone by screenshot and just copy and pasting it... thank god for IOS 15😏

[ShanaPerry]

Thought I was gonna fail till I saw this won't god do it🙏

[fbidwell]

Ok, I got it figured out.  Here's the code that worked:

<div style="position: relative; width: 400px; height: 320px; z-index: 1;">
<p><img style="position: relative; z-index: -1;" src="/courses/50743/files/4996457/preview" alt="" /></p>
</div>

Note: I had the image and div height wrong in the original.  That wasn't the problem, but that is why the height is changed.