Magpie in Vue.js

AudioResponseView.vue

<template>
  <View @mousemove="mouseMove">
    <template slot:content="{nextView, response}">
      <div class="top-left" @mouseover="hoverFish">fish</div>
      <div class="top-right" @mouseover="hoverMammal">mammal</div>
      <button v-if="isButtonVisible" @click="clickButton"></button>
      <audio src="example.wav" playing="isPlaying" />
    </template>
  </view>
</template>
<script>
export default {
  async mounted() {
    this.mousemovements = []
    this.isButtonVisible = false
    this.isPlaying = false
    this.recordMousemovements = false
    await sleep(500)
    this.isButtonVisible = true
  },
  methods: {
    clickButton() {
      this.isPlaying = true
      this.recordMousemovements = true
    },
    mouseMove(event) {
      if (this.recordMousemovements) {
        this.mousemovements.push(event)
      }
    },
    hoverFish() {
      this.response('fish', this.mousemovements)
      this.next()
    },
    hoverMammal() {
      this.response('mammal', this.mousemovements)
      this.next()
    }
  }
}
</script>

example.vue

<template>
  <Experiment>
    <View title="Please listen">
      <template slot:content="{nextView}">
        <img src="example.png" />
        <audio autoplay="true" src="example.wav" onDone="nextView"/>
      </template>
    </View>
    <View timeout="500" />
    <AudioResponseView />
    <View timeout="500" />
    <ThankYouView />
  </Experiment>
</template>

This example is non-functional, but serves to show-case a possible programming interface for magpie using Vue.js