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>