Wild Week - Wyld Interactive Media Player

Wild Week – Wyld Interactive Media Player

Von Sander Hahn am 07.05.2026

For our Wild Week project, we created WIMP (Wyld Interactive Media Player). WIMP is an engine designed to handle branching, interactive video content similar to Netflix’s interactive specials. But WIMP can not only play videos, but also show other media like pictures, texts and audio in an interactive way.

The goal

Our goal was to create a prototype that plays media that isn’t just linear. We wanted a way to inject logic, like quizzes, info overlays, and decision points, directly into the media timeline. It doesn’t matter if it’s a certain position on a text or a specific time in a video.

To make this work across different platforms, we first had to define a standardized data structure. This led to the development of the WIMP format.

Another important part of this project is a media player that is highly mobile optimized and easy to understand, so that even a five year old can experience a WIMP interactive medium.

The project is split into two distinct layers: the data standard and the playback engine.

Architecture

1. The Format

Before building the player, we needed a predictable way to describe the media content. For this, we had to design a format that incooperates everything a WIMP user needs and will need in the future. This forward thinking and upgradeability of our format was one of the main challenges that we faced during this Wild Week. We ended up with an open-format JSON schema that defines a graph of “media nodes.” Each node can contain:

Timed Events: Quizzes, info texts, external links and more that can be triggered at specific timestamps.
Choice Events: Branching points that tell the player which media node to load next.

By publishing this as an NPM package, we integrated a validator directly into the workflow, ensuring that any content loaded by the player is structurally sound and free of dead ends.

Here’s an example format:

{
"version_number": "0.0.1",
"format_type": "wimp",
"meta_data": {
"id": "7f6b6d2d-8fb7-4bd4-9f2a-5a1e2d7c6b42",
"created_at": "2026-04-23T00:00:00+02:00",
"updated_at": "2026-04-23T00:00:00+02:00",
"author": "Melanie Maier",
"title": "What If Dinosaurs Still Lived Today?",
"start_media_id": "dinosaur_intro_text",
"description": "An interactive documentary exploring the hypothetical scenario of dinosaurs still existing in the modern world.",
"tags": [
"dinosaurs",
"interactive documentary",
"hypothetical scenario",
"modern world"
]
},
"media": [{
"id": "dinosaur_intro_text",
"title": "Introduction",
"type": "text",
"resource_link": "https://wimplayer.media.ustp.at/media.php?name=dinosaurs_intro.html",
"timeline_events": [{
"type": "choice",
"title": "Do you want hear about dinosaurs?",
"position": {
"type": "seconds",
"value": 0
},
"event_context": {
"choices": [{
"label": "Start the journey",
"next_media": "dinosaur_audio1"
}]
}
}]
},
{
"id": "dinosaur_audio1",
"title": "Audio 1",
"type": "audio",
"resource_link": "https://wimplayer.media.ustp.at/media.php?name=dinosaur_1.mp3",
"timeline_events": [{
"type": "quiz",
"title": "What would be the most likely immediate response from modern states once the existence of large living dinosaurs was confirmed?",
"position": {
"type": "seconds",
"value": 5
},
"event_context": {
"answers": [{
"label": "Opening all affected regions to tourism",
"is_correct": false,
"feedback": ""
},
{
"label": "Establishing exclusion zones and interdisciplinary crisis task forces",
"is_correct": true,
"feedback": ""
},
{
"label": "Immediately classifying all species as domesticated animals",
"is_correct": false,
"feedback": ""
},
{
"label": "Suspending all ongoing scientific research",
"is_correct": false,
"feedback": ""
}
]
}
},
{
"type": "quiz",
"title": "Why would the discovery of living dinosaurs be more than just a zoological sensation?",
"position": {
"type": "seconds",
"value": 30
},
"event_context": {
"answers": [{
"label": "Because it would automatically replace all existing animal species",
"is_correct": false,
"feedback": ""
},
{
"label": "Because modern cities are already designed for giant reptiles ",
"is_correct": false,
"feedback": ""
}, {
"label": "Because it would challenge long-held assumptions about ecology, history, and risk planning",
"is_correct": true,
"feedback": "Still too high. Fast fashion is often discarded quickly."
},
{
"label": "Because dinosaurs could only survive in artificial reserves ",
"is_correct": false,
"feedback": ""
}
]
}
},
{
"type": "choice",
"title": "Do you want to hear more about this scenario?",
"position": {
"type": "seconds",
"value": 60
},
"event_context": {
"choices": [{
"label": "Yes please",
"next_media": "dinosaur_audio2"
}]
}
}
],
"description": "Quick cuts of clothing store racks, online shopping scrolls, and factory workers sewing.",
"media_length": 76
},
{
"id": "dinosaur_audio2",
"title": "Dinosaur 2",
"type": "audio",
"resource_link": "https://wimplayer.media.ustp.at/media.php?name=dinosaur_2.wav",
"timeline_events": [{
"type": "quiz",
"title": "Which dinosaur group would likely be the hardest to control in a modern civilization?",
"position": {
"type": "seconds",
"value": 5
},
"event_context": {
"answers": [{
"label": "Small to medium-sized, intelligent, highly adaptable predators",
"is_correct": true,
"feedback": ""
},
{
"label": "Very large, slow-moving herbivores",
"is_correct": false,
"feedback": ""
},
{
"label": "Flightless species living only in remote areas",
"is_correct": false,
"feedback": ""
},
{
"label": "Species with strongly territorial but fixed-range behavior",
"is_correct": false,
"feedback": ""
}
]
}
},
{
"type": "quiz",
"title": "Which societal conflict would be most likely if humans and dinosaurs had to coexist permanently?",
"position": {
"type": "seconds",
"value": 35
},
"event_context": {
"answers": [{
"label": "Whether dinosaurs should be included in school curricula ",
"is_correct": false,
"feedback": ""
},
{
"label": "The complete abolition of modern infrastructure",
"is_correct": false,
"feedback": ""
},
{
"label": "A global abandonment of agriculture",
"is_correct": false,
"feedback": ""
},
{
"label": "A conflict between species protection, public safety, and economic use of land",
"is_correct": true,
"feedback": ""
}
]
}
},
{
"type": "choice",
"title": "Do you want to read more?",
"position": {
"type": "seconds",
"value": 55
},
"event_context": {
"choices": [{
"label": "Yes please",
"next_media": "dinosaur_end_text"
}]
}
}
],
"description": "Dinosaur audio",
"media_length": 59
},
{
"id": "dinosaur_end_text",
"title": "End",
"type": "text",
"resource_link": "https://wimplayer.media.ustp.at/media.php?name=dinosaurs_end.html",
"timeline_events": []
}
]
}

2. The Frontend: Nuxt & Logic

The player itself is built with Nuxt. We chose Nuxt because its reactive framework is ideal for syncing a video’s progress with dynamic UI overlays.

For this we split our team into 2 departments:

The UI/UX of the main page and components
The player with the state machine

Main Page & Components UI/UX

For prototyping and designing our pages and components, we decided on using Figma with Nuxt’s components to help us out. Here are some examples of our pages and components:

State Machine

To manage the complexity of interactive playback, we implemented a state machine. The state machine coordinates:

Syncing Logic: Monitoring the video’s currentTime to trigger overlays from the WIMP format.
Interaction States: When a pause: true event occurs, the machine pauses the background media, putting the quiz or choice interface in the foreground.
Dynamic Media Handling: When a user makes a choice, the machine resolves the next_media ID and updates the Nuxt state to swap the media and move forward in the decission tree.