Interactive Problems
There will be an interactive problem once in a series. At P-MAT we figured that more engaging and interesting problems will increase our userbase. Every one of these problems is built specificaly for that series. Eiter one for Pikomat and one for Pikofyz, or one for both.
#Technologies used
Interactive problems by design do not have a technology requirement. The ones I built, are built with Svelte or SvelteKit.
But it is not a requirement to use either of these two.
In the heart of Interactive problems is the ability to create something unique, interesting and seemlesly integrate in to the main website.
Interactive problems don't have to be written by me or someone involved with P-MAT. We wanted a relatively simple recipe to create an interactive problem
and effortlessly integrate it into the main website for users to use.
There were a few options I considered.
- Custom web component
- Another website
- IFrame
Custom web component Custom web components sound as the perfect usecase for this. It is easy to pass state and authentication from the main website to the custom compoenent. And you can create custom components from almost any framework. There are a few problems though. It complicates the development, because the user need to worry about custom components, CSS colisions or Shadow DOM. The implementation on the main website would also not be trivial. Dynamicaly importing custom components would be a nightmare.
Another website Another website is a good option. It is easy to create and integrate into the main website. But passing data between them is not that simple. We could pass the auth token while redirecting, but that is a pretty big security risk. Also there would be no way to communicate the other way.
IFrame In the end, we decided to use an iframe. It is easy to integrate into the main website. It is also easy to pass data between the two. You can use window.postMessage to pass any data. This solution provides both, isolation and easy integration as well as easy bi-directional communication.
To make development easier, I created JavaScript SDK, that abstract the communication and API calls to make development of interactive problem even easier. This also allows us to modify the underlying communication protocol. If we update it, we just need to update the SDK and easily upgrade old interactive problems, just by updating the SDK.