Locking down a quiz to require Safe Exam Browser to be used

[bbelew]

I had a teacher request that tests in her class not be available in Canvas unless students were using Safe Exam Browser.   SEB is a free open source lock down browser similar to Respondus, but free!

So I slapped together a quick little snippet of javascript to make it happen.    There isn't much to it, and it could be bypassed,  but for quick and easy it works.  If someone wants to expand upon it please feel free.

Instructions:

Place the following code into your custom javascript file in canvas:

if (document.getElementById('quiz-instructions').innerHTML.indexOf("[SEB]") != -1) 
  { 
  if ( navigator.userAgent.indexOf('SEB') == -1)
  {
  document.getElementById('submit_quiz_form').style.display = "none";
  alert('You must use the Safe Exam Browser to take this quiz');
  }
  }

In your quiz instructions place the following:  [SEB]

Putting [SEB] into quiz instructions will trigger the script and flash up an alert that the test must be taken in SEB, the quiz itself won't show until in SEB.

[bbelew]

I'm thinking about tweaking this script a bit.   Safe Exam Browser outputs a long string that is basically a hash of a few things.  This code would be injected into the header information of the page.    Two options - the hash hard coded into the javascript file or another string added to the test instructions. 

The hash works as so -- when you setup a config in safe exam browser, locking down to specific websites, no downloads, no nav, etc it generates a hash.  If the hash on the client of SEB doesn't match the one in the script it wouldn't allow the test to load.   Use case of this would be to prevent students with admin privileges from installing their own copy of Safe Exam Browser with minimal restrictions to bypass the restrictions set by the school.  Downside any time the config is changed or SEB is updated to a new version the javascript or test instructions string would have to be updated.

I believe that is how it functions in Moodle.

In our school we have Safe Exam Browser and a single config, locked down to our canvas instance pushed out to every student laptop.    The only people with the management password for the settings file is our tech department.

[stacey_pristels]

Brandon I just discovered Safe Browser and want to use it so my students can take their final exam online/securely in class the last day of the semester and be able to view after the semester has ended.  I have downloaded the application but am having difficulty finding easy to understand instructions on setting it up.  My students will be taking the exam on their personal computers (Windows and Mac) in class through Canvas.  Can you provide any direction on how I can best configure the exam and instruct students about download.  If this works well I am going to start using it for all my exams.  Thank you for any assistance..

[bbelew]

For basic use it's pretty easy.   You just have to open Safe Exam Browser on your machine,  navigate to the preferences.   Set the Start URL under the main preferences and then set an administrator password.  That protects this configuration from being changed.

On the Appearance tab I choose "Use Full Screen" and show menu bar.

On the Config File tab I choose "Use SEB settings file for .. configuring clients",  allow to open preferences window on client.

After that all you should have to do is click Save Settings As under the Config File tab, save the settings file to somewhere on your computer and distribute that file to the clients.  If they click that file it should open Safe Exam Browser ( if they have it )  and take them to the page you have set.

[muji]

Hi Brandon, i trying to put your code, in canvas, but i cannot found the way to  "Place the following code into your custom javascript file in canvas", could you point it out where the code should be put ?

currently i am using the canvas from https://canvas.instructure.com/

Thank you.

[janejump]

Hi  @bbelew ‌,

I'm trying to get the Safe Exam Browser set up in our test environment to try for our faculty to use. I've gotten our LMS admistrator to put in the JavaScript and downloaded the Safe Exam Browser. I've gone into the config settings and made the changes you listed. However, I think I'm missing a step or am simply out of my element (most likely the second option!). I get a message in the browser that Safe Exam has been installed but not configured. And when I try to access the quiz (with [SEB] in the instructions) I get the message about having to use Safe Exam Browser to access the quiz. So in order to test this, will I need to include the URL the student would receive with the config settings?

Any help you could provide would be great! Thanks.

[bbelew]

You will need to configure safe exam browser to point to your canvas instance and then export that file and send it out to all of the computers.    They click it to launch SEB the first time and the configuration sticks. 

We don't use Safe Exam Browser anymore so i'm not 100% sure if the javascript is still valid or not as well.  It might need updated to reflect any changes Canvas has made.     We ended up doing a demo of Respondus Lockdown Browser this year and are buying it for next year.  

[janejump]

Thanks for responding, Brandon. We're having to consider some options for assessing with our online program expansion as well. I am working with faculty developing a course for Fall who wanted to test the lockdown browser as an option and thought your post was the answer for them. I've not been able to reliably test it out but I do appreciate your input.

[jemling]

My school district is looking to move away from Lockdown Browser because of the difficulties we have experienced using the mobile version. SEB seems like a possible option for us. 

If anyone is using SEB, would you mind reaching out to me directly??

Thank you!

[awebb2]

Unfortunately, Safe Exam Browser is not supported by Canvas (any longer?). I got the browser to go to the log-in page (in a test exam file), and then the log-in page gave me a warning that my browser was not supported and would not let me log in. Too bad... Anyone know of other free browser lockdown software?

[Hildi_Pardo]

Bummer.   I was hopeful Safe Exam Browser could be an option for us -- until I got to your post.   Anyone else out there know of other free browser lockdown options?   Or if Safe Exam Browser is working again?

[CraigJ]

We moved from Moodle to Canvas and it seems like this is another feature that we lost 😞

Anyone been able to get SEB working with current version of Canvas, and can give instructions? 

[dbeaird1]

 

It does work this way but you have to set the url to the quiz in the SEB config tool.

Good for in classroom exams only I guess.

But I thought I would share.

[CraigJ]

As an update, our school uses microsoft single-sign on, and below are sites I had to allow to make it work. Still have to do some fine tuning, as it was a bit of a rush job. And below settings actually allow access to whole canvas site, which was ok in the particular instance. I haven't had time yet to test access to only a single quiz on canvas. I'm guessing if there are images may have to give access to whatever location they are stored in as well.

Also, I had to get students to download SEB file and get them to use that, and technically they could still just go to quiz in Canvas without using SEB. Not sure yet how to control that, maybe can try some javascript as above, or use school computers that only run SEB or something...

Wondering also if using the SEB server (see also SEB Server User Guide — SEB Server documentation) might help with things, but haven't got our IT team to install that yet so I can try it out...

[BesteUlus]

Thank you all for sharing the information above. I noticed that Canvas is not listed among the supported LMSs on the website linked below:

SEB Server User Guide — SEB Server documentation

Can anyone confirm if this is accurate?

Additionally, can someone verify whether the JavaScript code provided above works within Canvas?

Thank you!

[muimid]

Yes, this Javascript code does work. You will have to be creative a bit with SEB configuration but I can attest that we have used it for almost a year now to lockdown our assessments.

I'm truly grateful for this community (and in this case, @bbelew ) for coming up with very interesting and practical solutions and hope to get more (free) solutions as proctoring software is so expensive!

[CraigJ]

It seems the above script only works with classic quizzes, as new quiz uses an iframe and goes to a different domain, which prevents javascript from accessing the content of the iframe. I created the below script for New Quizzes to check for "[SEB]" in the title of the Quiz. I haven't thoroughly tested it yet, but it seems to work. Thought I would share in case others also want to try it or give feedback. If not using SEB the script blocks the iframe and also goes back to previous page (assuming the got to quiz base page by clicking from another page).

let isSEB = false;
let titleSEB = "";
const forms=document.getElementsByTagName("form");
for (let f of forms) {
  if (f.getAttribute("data-tool-id") == "Quizzes 2") {
    if (document.getElementById("resource_link_title")) {
      if (document.getElementById("resource_link_title").value.indexOf("[SEB]") != -1) {
        isSEB = true;
        titleSEB = document.getElementById("resource_link_title").value
      }
    }
  }
}
if (isSEB && (navigator.userAgent.indexOf('SEB') == -1))  {
    const iframes = document.getElementsByTagName("iframe");
    for (let iframe of iframes) {
    if (iframe.getAttribute("title")==titleSEB) {
      iframe.style.pointerEvents = 'none';
      iframe.style.overflow = 'hidden';iframe.setAttribute('scrolling', 'no');
      const overlay = document.createElement('div');
      overlay.style.position = 'absolute';
      overlay.style.top = iframe.offsetTop + 'px';overlay.style.left = iframe.offsetLeft + 'px';
      overlay.style.width = iframe.offsetWidth + 'px';overlay.style.height = iframe.offsetHeight + 'px';
      overlay.style["background-color"] = 'rgba(0, 0, 0, 0.5)';
      iframe.parentNode.appendChild(overlay);
      alert('You must use the Safe Exam Browser to take this quiz');
      history.back();
    }
  }
}

Below are the network filter settings I used to just access the quiz only. I made the Start URL the new quiz page, eg: https://<SchoolSite>.instructure.com/courses/<CourseNumber>/assignments/<QuizNumber>. In screenshot I blocked out SchoolSite with black, CourseNumber with red, and QuizNumber with green.