Interactive video

Video and content from Taalhuis Den Haag. The original was made with VueJS if I remember correctly (not by me!).
Here I've recreated the functionality with a web component.

This <interactive-video> web component is a wrapper around content (view source to check the html) that has a couple of questions that are shown at a specific timestamp between data-pause-from and data-pause-to where the video will pause.
The user can then answer the question by clicking a button that will jump to a specific timestamp via data-action and continue playing the video from the timestamp defined on the data-action-targets data-play-from.
When the video reaches the next data-pause-from anddata-pause-to timestamp the video will pause again and show the next question.
When the user answers the last question the video will pause and show a final screen with some advice.

The video is really just a few videos stitched together with a few questions and advice screens.