Ok, so I’ve been working on a learning platform for making teacher created playlist of content. One of the next steps is to create some type of quiz situation.
As a teacher, I’ve used “locked browsers” before, where once a student begins a quiz their browser locks and they cannot navigate away or open new tabs until they either finish the quiz or exit/end it.
My question is...is there any way to do this from a web dev perspective, or are people just straight up making their own browsers? I can’t seem to find any way to do this from my searching online.
Top comments (10)
As @patarapolw says, you're going to need something like Electron. At a minimum you'll need it in kiosk mode. Beyond that, you'll need native modules (C++ with electron-gyp, to access OS-level features), native utilities launched as child processes via the Node API, or both.
I did this for a large certification provider (relying on the "both" mentioned above, as we needed to detect things like use within a virtual machine), but it's been a while and several Electron versions since then.
Cannot navigate is just
window.beforeunload.Cannot open new tabs is just impossible. You will need Electron or similar platforms.
See, a web page being able to even know if they are looking or not is a violation of privacy.
The best you can do is adding a listener to the
beforeunloadevent, which will trigger before the user tries to close the tab, and one to themouseoutevent for thedocument, which will trigger when the mouse leaves the viewport. However, both of those can be disabled/blocked by the user.Well, people don’t just straight up making their own browsers. Instead, the most ideal solution is to extend/use existing frameworks that provides web browser functionalities: Qt, GTK, CEF (chromium embedded framework), .net to name a few. Some of them have bindings for different languages.
I've created specific browsers before. Here's how it's done
I think you can use a PWA for this, which will launch the browser without the url or tab available :)
(Or as Mike said, use a browser in kiosk mode)
Unfortunately, it's not that simple. A PWA can still be opened in a tab in a normal browser window (at least I'm not aware of controls to prevent this), and browser kiosk mode still allows other tabs to be open (and at least with hot corners and virtual desktops in MacOS or Linux, you can navigate to other app windows). I was referring to Electron's kiosk mode, which can be restricted a little more IIRC (but it's still not enough to prevent all attempts to navigate away from it, or at least wasn't when I worked on such an app in v6 or v7 IIRC).
Looks like I’ll have to look more into using electron. In the meantime maybe a PWA and kiosk mode could sold some use cases.
Why do you care if they navigate away?
What is the actual problem that you're trying to solve here? :)
The point isn’t navigating away so much as leaving the testing environment. (Cheat) the point us to have the same screen/tab until they choose to end a test, either by finishing it or ending it themselves. That way they can’t go off looking things up.