Javascript to pull user_id?

Question

Hello,

We are trying to deter sharing exam questions.  At first we tried just using a

and posting a copyright notice behind the question. Like this:

In the RCE, it looks like this:

https://rutgers.mediaspace.kaltura.com/embed/secure/iframe/entryId/1_hk47t83z/uiConfId/12441821

Once the question is saved, the RCE strips it out.

So then I went with an image....

https://rutgers.mediaspace.kaltura.com/embed/secure/iframe/entryId/1_7qsx3l3o/uiConfId/12441821

For the first question, I created an image and I added a fake Question Code.  (I figured, if we created hundreds of these, and then use the formula question, we would have an identifier to identify the user who may have taken a screencap of the questions.)  We got it so the image was present but the z-index would not override.  The question is behind the copyright image.  When we inspect elements, we can see that the z-index is set to auto AND it is defined by the code below:

What is 5 + [x] x [y]? For the second one, we could not get the tilt.  The text  in the first example was a more elegant solution but Canvas was stripping out some style elements.

So we talked to some folks at Instructure. They suggested we use javascript to pull out the Canvas_user_id to populate something in the question.  If we could lead the canvas_user_id with something like..."question set: " then the student would think it is just an identifier of the question and not them.

Does anyone know how to do this?

James · Accepted Answer

@hockin

Canvas does sanitize the HTML. Here is the Canvas HTML Editor Whitelist that specifies what is acceptable. None of the stuff you're trying to do with rotations, opacity, or transforms is allowed. The z-index is.

The work-around for this is to defined the CSS in your global custom CSS file applied to theme editor. Give it a classname such as rotated_watermark or copyright_notice_20 (for the 20°). Then, in your div in your first example, just add class="rotated_watermark" or class="copyright_notice_20"

This would not be a user-specific solution, but it has a better chance of working in the mobile apps.

A JavaScript solution would require access to the theme editor as well. They can work in the browser, but I'm not so sure about the mobile apps. You will need JavaScript if you want to personalize things.

The ENV variable (technically Window.ENV, but ENV will work), has an object called current user.

ENV.current_user contains their Canvas ID (ENV.current_user.id), display name (ENV.current_user.display_name), and preferred pronouns (ENV.current_user.pronouns) if enabled. It also has some URLs that may not be as helpful.

I cannot tell from your post what you're wanting to customize in order to identify the person taking a screen shot. You mentioned fake question codes, but I don't see any of that. You should consider whether you want a student's Canvas ID attached to a question on the screen.

The use of formula questions will not allow you to put in e^(1/3) as an answer or even e^0.33333. It requires a numeric value. For that particular question, it would allow someone to do a decimal approximation using a table without knowing the exact value.

When you are ready to switch to New Quizzes, you can put the variable into your question text in a formula question. You cannot do that with the classic quizzes, you would have to create a question for each variation and then put them in a question group to mimic a formula question. I'm not ready to switch to New Quizzes, either, I'm just throwing that out there.

I will add that the watermark makes it hard to read the question. You may also want to look into disabling the watermark for screen readers. The MDN page on using the aria-hidden attribute says aria-hidden="true" removes the element from the accessibility API, role="presentation" and role="none" remove the semantic meaning, but still expose it to assistive technology. It sounds like aria-hidden="true" is what you want.