Magpie

Magpie is a framework for easily and flexibly building psychological online experiments.

Base Components

DebugStatement

src/components/DebugStatement.vue

Prop name	Description	Default
`text`	string - required	-
`type`	string	`info`

Experiment

src/components/Experiment.vue

This is the main component for your online experiment. Put it at the root of your application. The experiment is available in all subcomponents and in the parent as $magpie

Prop name	Description	Default
`audioAssets`	Pass an array of paths to audio files that will be needed in this experiment to enable preloading array	`[]`
`imageAssets`	Pass an array of paths to images that will be needed in this experiment to enable preloading array	`[]`
`recordData`	Optionally specify variables that should be recorded for the whole experiment object	`{}`
`title`	Optionally specify a title for your experiment which will be displayed in the browser title bar (or in the browser tab) string	`''`
`validateSubmission`	This function is called before data is submitted to the server. It will receive the submitted csv data as an array of objects as its only argument. func	Function
`videoAssets`	Pass an array of paths to video files that will be needed in this experiment to enable preloading array	`[]`
`wide`	Whether to display the experiment in wide format-filling mode boolean	`false`

Slot	Description	Bindings
`default`	Place your screens inside this slot. They will be visible one after the other, like a slide show.	-
`title`	The contents of this slot will be visible during the entire experiment	-

A simple experiment with 3 screens

blue

<Experiment>

    <Screen>
      blue
      <button @click="$magpie.nextScreen()">next</button>
    </Screen>

    <Screen>
      green
      <button @click="$magpie.nextScreen()">next</button>
    </Screen>

    <Screen>
      yellow
    </Screen>

</Experiment>

<Experiment>

    <Screen>
      blue
      <button @click="$magpie.nextScreen()">next</button>
    </Screen>

    <Screen>
      green
      <button @click="$magpie.nextScreen()">next</button>
    </Screen>

    <Screen>
      yellow
    </Screen>

</Experiment>

Using a loop to create screens

Screen 0: blue

<Experiment>

    <Screen v-for="(color, i) in ['blue', 'green', 'yellow']" :key="i">
      <Slide>
        Screen {{i}}: {{ color }}
        <button @click="$magpie.nextScreen()">next</button>
      </Slide>
    </Screen>

</Experiment>

<Experiment>

    <Screen v-for="(color, i) in ['blue', 'green', 'yellow']" :key="i">
      <Slide>
        Screen {{i}}: {{ color }}
        <button @click="$magpie.nextScreen()">next</button>
      </Slide>
    </Screen>

</Experiment>

Providing a title

Besides the screens slot, the Experiment component also provides an optional title slot that allows you to display header information on all screens of your experiment.

blue

<Experiment>
  <template #title>
    My experiment
  </template>
  <template #default>
    <Screen>
      blue
      <button @click="$magpie.nextScreen()">next</button>
    </Screen>
    <Screen>
      green
      <button @click="$magpie.nextScreen()">next</button>
    </Screen>
    <Screen>
      yellow
    </Screen>
  </template>
</Experiment>

<Experiment>
  <template #title>
    My experiment
  </template>
  <template #default>
    <Screen>
      blue
      <button @click="$magpie.nextScreen()">next</button>
    </Screen>
    <Screen>
      green
      <button @click="$magpie.nextScreen()">next</button>
    </Screen>
    <Screen>
      yellow
    </Screen>
  </template>
</Experiment>

Validate entered data

The Experiment component also allows specifying a function that will be used to validate the to-be-submitted data before sending it to the server.

blue

<Experiment :validate-submission="data => data.length === 3">
  <Screen>
    blue
    <button @click="$magpie.nextScreen()">next</button>
  </Screen>
  <Screen>
    green
    <button @click="$magpie.nextScreen()">next</button>
  </Screen>
  <Screen>
    yellow
  </Screen>
</Experiment>

<Experiment :validate-submission="data => data.length === 3">
  <Screen>
    blue
    <button @click="$magpie.nextScreen()">next</button>
  </Screen>
  <Screen>
    green
    <button @click="$magpie.nextScreen()">next</button>
  </Screen>
  <Screen>
    yellow
  </Screen>
</Experiment>

Screen

src/components/Screen.vue

This component lets you create experiment sections that appear one after the other like a slideshow. Trial data

Prop name	Description	Default
`label`	A label that can be used to jump to this screen string	`''`
`progress`	If you want to show a progress bar, set this to a value between 0 and 1 number	`-1`
`title`	The title of this screen string	`''`
`validations`	Define validators for measurements object	`{}`

Slot	Description	Bindings
`default`	Place your slides inside this slot. They will be visible one after the other, like a slide show.	-

Simple screen

Hello World.

<Experiment>
    <Screen>
      Hello World.
    </Screen>
</Experiment>

<Experiment>
    <Screen>
      Hello World.
    </Screen>
</Experiment>

Show progress

Hello World.

<Experiment>
    <Screen v-for="i in 10" :key="i" :progress="i/10">
      Hello World.
      <button @click="$magpie.nextScreen()">Next</button>
    </Screen>
</Experiment>

<Experiment>
    <Screen v-for="i in 10" :key="i" :progress="i/10">
      Hello World.
      <button @click="$magpie.nextScreen()">Next</button>
    </Screen>
</Experiment>

Multiple slides

One screen may consist of multiple slides that are numbered incrementally and displayed one after another. You can go to the next slide with the nextSlide function that is exposed by the Screen component.

Wow.

Hello .

<Experiment>
    <Screen title="Wow.">

      <Slide>
        Hello <button @click="$magpie.nextSlide()">World</button>.
      </Slide>

      <Slide>
        Hello you.
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen title="Wow.">

      <Slide>
        Hello <button @click="$magpie.nextSlide()">World</button>.
      </Slide>

      <Slide>
        Hello you.
      </Slide>

    </Screen>
</Experiment>

Store measurements

The screen component also conveniently exposes an object for you to store in the measurements of the current screen, so you can later save them.

Wow.

Hello

<Experiment>
    <Screen title="Wow.">
      <Slide>
        Hello
        <TextareaInput :response.sync="$magpie.measurements.text" />
        {{ $magpie.measurements.text }}?
        <button v-if="$magpie.measurements.text" @click="$magpie.saveAndNextScreen()">Done</button>
      </Slide>
    </Screen>

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <Screen title="Wow.">
      <Slide>
        Hello
        <TextareaInput :response.sync="$magpie.measurements.text" />
        {{ $magpie.measurements.text }}?
        <button v-if="$magpie.measurements.text" @click="$magpie.saveAndNextScreen()">Done</button>
      </Slide>
    </Screen>

    <DebugResultsScreen />

</Experiment>

Validate measurements

The screen can also be used to validate observations.

Hello

At least 4 characters required and only alphabetic characters, please.

<Experiment>
    <Screen :validations="{
      text: {
        minLength: $magpie.v.minLength(4),
        alpha: $magpie.v.alpha
      }
    }">

      <Slide>
        Hello
        <TextareaInput :response.sync="$magpie.measurements.text" />

        {{ $magpie.measurements.text }}?

        <button v-if="!$magpie.validateMeasurements.$invalid" @click="$magpie.saveAndNextScreen()">Done</button>

        <p v-else>At least 4 characters required and only alphabetic characters, please.</p>

      </Slide>

    </Screen>

    <DebugResults />
</Experiment>

<Experiment>
    <Screen :validations="{
      text: {
        minLength: $magpie.v.minLength(4),
        alpha: $magpie.v.alpha
      }
    }">

      <Slide>
        Hello
        <TextareaInput :response.sync="$magpie.measurements.text" />

        {{ $magpie.measurements.text }}?

        <button v-if="!$magpie.validateMeasurements.$invalid" @click="$magpie.saveAndNextScreen()">Done</button>

        <p v-else>At least 4 characters required and only alphabetic characters, please.</p>

      </Slide>

    </Screen>

    <DebugResults />
</Experiment>

Jump using labels

Hello 1th World.

<Experiment>
  <Screen v-for="i in 10" :key="i" :progress="i/10" :label="'screen-'+i">
    Hello {{i}}th World.
    <button @click="$magpie.nextScreen()">Next</button>
    <button @click="$magpie.nextScreen('end')">Abort</button>
  </Screen>
  <Screen label="end">
    World's End.
    <button @click="$magpie.nextScreen('screen-1')">Restart</button>
  </Screen>
</Experiment>

<Experiment>
  <Screen v-for="i in 10" :key="i" :progress="i/10" :label="'screen-'+i">
    Hello {{i}}th World.
    <button @click="$magpie.nextScreen()">Next</button>
    <button @click="$magpie.nextScreen('end')">Abort</button>
  </Screen>
  <Screen label="end">
    World's End.
    <button @click="$magpie.nextScreen('screen-1')">Restart</button>
  </Screen>
</Experiment>

Slide

src/components/Slide.vue

Slot	Description
`default`	-

Screens

While magpie allows you to easily create your own screens, it also comes with a selection of built-in screens that you can just drop into your experiment. These include essential screens like <SubmitResultsScreen> but also ready-made complex appliances that are often used like <SelfPacedReadingScreen>. In addition to the props defined below, these screens also support all props supported by the <Screen> component.

AwaitIteratedResultScreen

src/components/screens/AwaitIteratedResultScreen.vue

Slot	Description
`default`	-

Use this screen to initiate the interactive socket connection. Once the connection is set up and enough users have joined, this screen will automatically go to the next screen.

You can customize the content of this screen by adding new content inside it. By default it looks like this:

<Experiment>

    <Screen>
       <button @click="$magpie.nextScreen()">Start</button>
    </Screen>

    <AwaitIteratedResultScreen :title="'Waiting for previous participants'"></AwaitIteratedResultScreen>

    <Screen>
      <!-- Continue experiment with results from iterated experiment-->
    </Screen>

</Experiment>

<Experiment>

    <Screen>
       <button @click="$magpie.nextScreen()">Start</button>
    </Screen>

    <AwaitIteratedResultScreen :title="'Waiting for previous participants'"></AwaitIteratedResultScreen>

    <Screen>
      <!-- Continue experiment with results from iterated experiment-->
    </Screen>

</Experiment>

ConnectInteractiveScreen

src/components/screens/ConnectInteractiveScreen.vue

Slot	Description
`default`	-

Use this screen to initiate the interactive socket connection. Once the connection is set up and enough users have joined, this screen will automatically go to the next screen.

You can customize the content of this screen by adding new content inside it. By default it looks like this:

<Experiment>

    <Screen>
       <button @click="$magpie.nextScreen()">Connect</button>
    </Screen>

    <ConnectInteractiveScreen :title="'Connecting...'"></ConnectInteractiveScreen>

    <Screen>Connected.</Screen>

</Experiment>

<Experiment>

    <Screen>
       <button @click="$magpie.nextScreen()">Connect</button>
    </Screen>

    <ConnectInteractiveScreen :title="'Connecting...'"></ConnectInteractiveScreen>

    <Screen>Connected.</Screen>

</Experiment>

DebugResultsScreen

src/components/screens/DebugResultsScreen.vue

This will display all data that has been entered into the experiment up to this point in a table. This is useful for debugging. Once you are gaoing live with your experiment, you can use the SubmitResultsScreen instead of this one to submit the data to the server and say thank you to the user.

EyetrackingCalibrationScreen

src/components/screens/EyetrackingCalibrationScreen.vue

Prop name	Description	Default
`debug`	boolean	`false`

This screen is used to initialize and calibrate eye tracking. Eyetracking requires that you install webgazer.

Click the button to start full screen.

<Experiment wide>
  <InstructionScreen>
    Click the button to start full screen.
  </InstructionScreen>

  <InstructionScreen>
    <FullScreenStart />
    Click the button to start calibration.
  </InstructionScreen>

  <!-- We'll set debugging to true so you can see something -->
  <EyetrackingCalibrationScreen debug />

  <InstructionScreen>
    Successfully calibrated!
  </InstructionScreen>

</Experiment>

<Experiment wide>
  <InstructionScreen>
    Click the button to start full screen.
  </InstructionScreen>

  <InstructionScreen>
    <FullScreenStart />
    Click the button to start calibration.
  </InstructionScreen>

  <!-- We'll set debugging to true so you can see something -->
  <EyetrackingCalibrationScreen debug />

  <InstructionScreen>
    Successfully calibrated!
  </InstructionScreen>

</Experiment>

EyetrackingValidationScreen

src/components/screens/EyetrackingValidationScreen.vue

Inherits from LifecycleScreen

Global Measurements

Measurement	Type	Description
et_accuracy	float	The measured accuracy

Prop name	Description	Default
`precision`	number	`100`

This screen is used to initialize and calibrate eye tracking. Eyetracking requires that you install webgazer.

Click the button to start full screen.

<Experiment wide>
  <InstructionScreen>
    Click the button to start full screen.
  </InstructionScreen>

  <InstructionScreen>
    <FullScreenStart />
    Click the button to start calibration.
  </InstructionScreen>

  <!-- We'll set debugging to true so you can see something -->
  <EyetrackingCalibrationScreen debug />

  <EyetrackingValidationScreen />

  <InstructionScreen>
    Successfully calibrated!
  </InstructionScreen>

</Experiment>

<Experiment wide>
  <InstructionScreen>
    Click the button to start full screen.
  </InstructionScreen>

  <InstructionScreen>
    <FullScreenStart />
    Click the button to start calibration.
  </InstructionScreen>

  <!-- We'll set debugging to true so you can see something -->
  <EyetrackingCalibrationScreen debug />

  <EyetrackingValidationScreen />

  <InstructionScreen>
    Successfully calibrated!
  </InstructionScreen>

</Experiment>

InstructionScreen

src/components/screens/InstructionScreen.vue

Slot	Description
`default`	-

This is a pre-built instruction screen, with limited functionality, but simpler to use.

These are instructions for the participant.
Below the instructions is a button to continue.

<Experiment>
    <InstructionScreen>
      These are instructions for the participant.<br />
      Below the instructions is a button to continue.
    </InstructionScreen>

    <InstructionScreen>
      This is another instruction screen.<br />
      Below the instructions is a button to continue.
    </InstructionScreen>

</Experiment>

<Experiment>
    <InstructionScreen>
      These are instructions for the participant.<br />
      Below the instructions is a button to continue.
    </InstructionScreen>

    <InstructionScreen>
      This is another instruction screen.<br />
      Below the instructions is a button to continue.
    </InstructionScreen>

</Experiment>

LifecycleScreen

src/components/screens/LifecycleScreen.vue

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int

Prop name	Description	Default
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`task`	-
`feedback`	-

This is a built-in screen with 4 life cycle phases:

Pause
Fixation
Stimulus presentation
Response
Feedback

The last four phases can be completely customized using the corresponding slots, as you can see below.

Press the button to try this.

<Experiment>

  <InstructionScreen>
    Press the button to try this.
  </InstructionScreen>

  <LifecycleScreen :pauseTime="1000" :fixationTime="1000" :stimulusTime="100">

    <template #stimulus>
      <img src="img/fries.jpg" />
    </template>

    <template #task>
      How often is it still healthy to eat fast food?
      <SliderInput left="Once a year" right="Once a day" :response.sync="$magpie.measurements.slider_rating" />
      <button v-if="typeof $magpie.measurements.slider_rating !== undefined" @click="$magpie.saveAndNextScreen()">Next</button>
    </template>

  </LifecycleScreen>

  <DebugResultsScreen />
</Experiment>

<Experiment>

  <InstructionScreen>
    Press the button to try this.
  </InstructionScreen>

  <LifecycleScreen :pauseTime="1000" :fixationTime="1000" :stimulusTime="100">

    <template #stimulus>
      <img src="img/fries.jpg" />
    </template>

    <template #task>
      How often is it still healthy to eat fast food?
      <SliderInput left="Once a year" right="Once a day" :response.sync="$magpie.measurements.slider_rating" />
      <button v-if="typeof $magpie.measurements.slider_rating !== undefined" @click="$magpie.saveAndNextScreen()">Next</button>
    </template>

  </LifecycleScreen>

  <DebugResultsScreen />
</Experiment>

PostTestScreen

src/components/screens/PostTestScreen.vue

Global Measurements

Measurement	Type	Description
age	int
gender	'' \| 'male' \| 'female' \| 'other'
education	'' \| 'below highschool' \| 'highschool' \| 'college' \| 'higher'
languages	string
comments	string

Prop name	Description	Default
`age`	Whether to ask for participant age boolean	`true`
`comments`	Whether to ask for comments boolean	`true`
`education`	Whether to ask for participant education boolean	`true`
`gender`	Whether to ask for participant gender boolean	`true`
`languages`	Whether to ask for participant mother tongues boolean	`true`

Slot	Description	Bindings
`default`	You can add additional questions here, storing data in measurements	`measurements`: object — a temporary object to store your responses before adding them to the results

Additional information

Answering the following questions is optional, but your answers will help us analyze our results.

Age

Gender

Level of Education

Native languages

Further comments

<Experiment>
    <PostTestScreen />

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <PostTestScreen />

    <DebugResultsScreen />

</Experiment>

SubmitResultsScreen

src/components/screens/SubmitResultsScreen.vue

Use this screen at the end of your experiment to submit the data to the server. You can provide the submission URL to the Experiment component.

Stimuli

Text

As with normal HTML you can use normal P tags for paragraphs as well as strong, em etc. to mark them up.

This is a bold text.

<Experiment>
    <Screen>
        <p><em>This</em> is a <strong>bold</strong> text.</p>
    </Screen>
</Experiment>

<Experiment>
    <Screen>
        <p><em>This</em> is a <strong>bold</strong> text.</p>
    </Screen>
</Experiment>

Audio

src/components/stimuli/Audio.vue

Prop name	Description	Default
`src`	The URL of the audio to embed. string - required	-
`autoplay`	if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. boolean	`false`
`controls`	If this attribute is set, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. boolean	`false`
`loop`	if true, the audio player will automatically seek back to the start upon reaching the end of the audio. boolean	`false`
`muted`	indicates whether the audio will be initially silenced boolean	`false`

You can use HTML's audio tag to play audio.

For more details see HTML Audio Element docs on MDN.

This is a dog.

<Experiment>
    <Screen>

      <Slide>
        This is a dog.<br/>
        <button @click="$refs.audio.play()">Start</button>
        <button @click="$refs.audio.pause()">Stop</button>
        <audio ref="audio" src="audio/dog_bark.ogg" loop />
      </Slide>

    </Screen>

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        This is a dog.<br/>
        <button @click="$refs.audio.play()">Start</button>
        <button @click="$refs.audio.pause()">Stop</button>
        <audio ref="audio" src="audio/dog_bark.ogg" loop />
      </Slide>

    </Screen>

</Experiment>

Canvas

src/components/stimuli/Canvas.vue

Magpie has built-in support for creating visual stimuli on the fly via Konva.js.

Konva Components are prefixed with Canvas, so Konva.Circle becomes CanvasCircle in magpie. Learn more about using Konva.js in Vue.

Drawing simple shapes

Some drawing exercises

<Experiment>
    <Screen title="Some drawing exercises">
      <CanvasStage :config="{width: 700, height: 500}">
        <CanvasLayer>
          <CanvasCircle :config="{
            x: 100,
            y: 100,
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 2}"></CanvasCircle>
          <CanvasRect :config="{
            x: 230,
            y: 30,
            width: 140,
            height: 140,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 2
            }"></CanvasRect>
          <CanvasStar :config="{
            x: 500,
            y: 100,
            numPoints: 7,
            outerRadius: 70,
            innerRadius: 40,
            fill: 'yellow',
            stroke: 'black',
            strokeWidth: 2
            }"></CanvasStar>
        </CanvasLayer>
      </CanvasStage>
    </Screen>

</Experiment>

<Experiment>
    <Screen title="Some drawing exercises">
      <CanvasStage :config="{width: 700, height: 500}">
        <CanvasLayer>
          <CanvasCircle :config="{
            x: 100,
            y: 100,
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 2}"></CanvasCircle>
          <CanvasRect :config="{
            x: 230,
            y: 30,
            width: 140,
            height: 140,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 2
            }"></CanvasRect>
          <CanvasStar :config="{
            x: 500,
            y: 100,
            numPoints: 7,
            outerRadius: 70,
            innerRadius: 40,
            fill: 'yellow',
            stroke: 'black',
            strokeWidth: 2
            }"></CanvasStar>
        </CanvasLayer>
      </CanvasStage>
    </Screen>

</Experiment>

FixationCross

src/components/stimuli/FixationCross.vue

Prop name	Description	Default
`x`	X-coordinate of cross center number	`425`
`y`	Y-coordinate of cross center number	`200`

This component allows you to display a fixation cross.

<Experiment>
    <Screen>
        <FixationCross />
    </Screen>

</Experiment>

<Experiment>
    <Screen>
        <FixationCross />
    </Screen>

</Experiment>

Img

src/components/stimuli/Img.vue

Prop name	Description	Default
`src`	The URL of the image to embed. string - required	-

You can use HTML's <img> tag to display images.

For more details see HTML img Element docs on MDN.

This is a sealion.

<Experiment>
    <Screen>

      <Slide>
        This is a sealion.<br/>
        <img src="img/sea_lion.jpg" />
      </Slide>

    </Screen>

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        This is a sealion.<br/>
        <img src="img/sea_lion.jpg" />
      </Slide>

    </Screen>

</Experiment>

Rsvp

src/components/stimuli/Rsvp.vue

Prop name	Description	Default
`chunks`	The chunks array - required	-
`interval`	Interval between chunks in miliseconds number	`300`

Event name	Description
`end`

Slot	Description	Bindings
`presentation`	-	`chunk`

This component allows you to display textual or other content in a rapid serial manner, commonly known as Rapid Serial Visual Presentation (RSVP).

Text

<Experiment>
    <Screen>

      <Slide>
        <button @click= "$magpie.nextSlide()">Start</button>
      </Slide>

      <Slide>
        <Rsvp :chunks="'I wonder if you can read this, as it is a rapid serial visual presentation of a long text.'.split(' ')"
              @end= "$magpie.nextSlide()" />
      </Slide>

      <Slide>
        That's what I thought.
      </Slide>

    </Screen>

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <button @click= "$magpie.nextSlide()">Start</button>
      </Slide>

      <Slide>
        <Rsvp :chunks="'I wonder if you can read this, as it is a rapid serial visual presentation of a long text.'.split(' ')"
              @end= "$magpie.nextSlide()" />
      </Slide>

      <Slide>
        That's what I thought.
      </Slide>

    </Screen>

</Experiment>

Images

The Rsvp component allows you to define the presentation of the chunks you provide. E.g. we could also use this component to display images.

<Experiment>
    <Screen>
      <Slide>
        <button @click= "$magpie.nextSlide()">Start</button>
      </Slide>
      <Slide>
        <Rsvp :chunks="[
            'public/images/rsvp1.jpg',
            'public/images/rsvp2.jpg',
            'public/images/rsvp3.jpg',
            'public/images/rsvp4.jpg',
            ]" @end= "$magpie.nextSlide()">
          <template #presentation="{chunk}">
            <img :src="chunk" />
          </template>
        </Rsvp>
      </Slide>
      <Slide>
        Done.
      </Slide>
    </Screen>
</Experiment>

<Experiment>
    <Screen>
      <Slide>
        <button @click= "$magpie.nextSlide()">Start</button>
      </Slide>
      <Slide>
        <Rsvp :chunks="[
            'public/images/rsvp1.jpg',
            'public/images/rsvp2.jpg',
            'public/images/rsvp3.jpg',
            'public/images/rsvp4.jpg',
            ]" @end= "$magpie.nextSlide()">
          <template #presentation="{chunk}">
            <img :src="chunk" />
          </template>
        </Rsvp>
      </Slide>
      <Slide>
        Done.
      </Slide>
    </Screen>
</Experiment>

Synth

src/components/stimuli/Synth.vue

Prop name	Description	Default
`frequency`	The note frequency in hertz (like 440) or as "pitch-octave" notation (like "D#2") number\|string - required	-
`attack`	The attack of the output envelope in seconds. The attack time is the amount of time it takes for the envelope to reach it's maximum value. number	`0.05`
`decay`	the decay of the output envelope in seconds. After the attack portion of the envelope, the value will fall over the duration of the decay time to it's sustain value. number	`0.1`
`duration`	Duration in seconds. By default the tone will only stop when the component is unmounted. number	`Infinity`
`oscillator`	"fatsine" \| "fatsquare" \| "fatsawtooth" \| "fattriangle" \| "fatcustom" \| "fmsine" \| "fmsquare" \| "fmsawtooth" \| "fmtriangle" \| "fmcustom" \| "amsine" \| "amsquare" \| "amsawtooth" \| "amtriangle" \| "amcustom" \| "pulse" \| "pwm" string	`fmsine`
`release`	Release time of the output envelope in seconds. After the duration of the synth tone, the envelope's value will fall to it's minimum value over the duration of the release time. number	`0.1`
`sustain`	The sustain value is the value which the envelope rests at after triggerAttack is called, but before triggerRelease is invoked. Must be between 0 and 1. number	`0.5`
`volume`	The volume of the output in decibels. number	`-6`

The Synth component is a basic sound Synthesizer based on Tone.js.

Click to beep.

<Experiment>
    <Screen title="Click to beep.">

      <Slide>
        <button @click= "$magpie.nextSlide()">Start</button>
      </Slide>

      <Slide>
        <Synth oscillator="fmsine" frequency="C4"/>
        <Synth oscillator="fmsine" frequency="E4"/>
        <Synth oscillator="fmsine" frequency="G4"/>
        <button @click="$magpie.nextSlide(0)">Stop</button>
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen title="Click to beep.">

      <Slide>
        <button @click= "$magpie.nextSlide()">Start</button>
      </Slide>

      <Slide>
        <Synth oscillator="fmsine" frequency="C4"/>
        <Synth oscillator="fmsine" frequency="E4"/>
        <Synth oscillator="fmsine" frequency="G4"/>
        <button @click="$magpie.nextSlide(0)">Stop</button>
      </Slide>

    </Screen>
</Experiment>

Video

src/components/stimuli/Video.vue

Prop name	Description	Default
`src`	The URL of the video to embed. string - required	-
`autoplay`	if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire video file to finish downloading. boolean	`false`
`controls`	If this attribute is set, the browser will offer controls to allow the user to control playback, including volume, seeking, and pause/resume playback. boolean	`false`
`loop`	if true, the video player will automatically seek back to the start upon reaching the end of the video. boolean	`false`
`muted`	indicates whether the video will be initially silenced boolean	`false`

You can use HTML's video tag to play video footage.

For more details see HTML Video Element docs on MDN.

This is a sealion.

<Experiment>

    <Screen>

      <Slide>
        This is a sealion.<br/>
        <button @click="$refs.video.play()">Start</button>
        <button @click="$refs.video.pause()">Stop</button>
        <video ref="video" src="video/sea_lions.webm" loop />
      </Slide>

    </Screen>

</Experiment>

<Experiment>

    <Screen>

      <Slide>
        This is a sealion.<br/>
        <button @click="$refs.video.play()">Start</button>
        <button @click="$refs.video.pause()">Stop</button>
        <video ref="video" src="video/sea_lions.webm" loop />
      </Slide>

    </Screen>

</Experiment>

Trial Screens

Trial screens display stimuli and record responses during a variety of tasks.

As such they usually inherit from <LifecycleScreen>, including its 4 life cycle phases:

Pause
Fixation
Stimulus presentation
Response

This means, for all trial screens you can adjust pause, fixation point and stimulus duration and can replace fixation and stimulus contents via component slots as seen over at <LifecycleScreen>.

CompletionScreen

src/components/trial_screens/CompletionScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
options	array
text	string
response	string	The completed text
responses	array	The individual completions

Prop name	Description	Default
`options`	An array of arrays with possible completions per `%s` array - required	-
`text`	The text that is supposed to be completed. `%s` marks completions string - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`question`	A question string	`undefined`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built completion screen, with limited functionality, but simpler to use.

What happened in antartica?

One fell over three .

<Experiment>
    <CompletionScreen
        question="What happened in antartica?"
        text="One %s fell over three %s."
        :options="[
              ['horse', 'penguin', 'bird'],
              ['icicles', 'trees', 'bushes']
              ]"
    />

    <DebugResultsScreen />
</Experiment>

<Experiment>
    <CompletionScreen
        question="What happened in antartica?"
        text="One %s fell over three %s."
        :options="[
              ['horse', 'penguin', 'bird'],
              ['icicles', 'trees', 'bushes']
              ]"
    />

    <DebugResultsScreen />
</Experiment>

ForcedChoiceMousetrackingScreen

src/components/trial_screens/ForcedChoiceMousetrackingScreen.vue

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between click on 'Go' and response
responseTimeout	boolean	Whether the response time limit was reached
mt_time	array	Mouse tracking time coordinates
mt_x	array	Mouse tracking x coordinates (origin is at the 'Go' button, positive goes right)
mt_y	array	Mouse tracking y coordinates (origin is at the 'Go' button, positive goes down)
mtstarttime	int	Time stamp of when mouse tracking started

Prop name	Description	Default
`option1`	string representation of option 1 string	`option1`
`option2`	string representation of option 2 string	`option2`
`pauseTime`	Duration of the pause phase, don't set this, to avoid the pause altogether number	`0`
`qud`	Question under discussion. Always visible on the screen string	`undefined`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether number	`0`
`selectEvent`	The event that causes the response to be selected, e.g. `click`, `mouseover`, etc. string	`mouseover`

Slot	Description	Bindings
`preparation`	provide a preparation stimulus, i.e. a text or an audio explanation	-
`option1`	-	-
`option2`	-	-
`stimulus`	provide content for the main stimulus	`coordinates`: object — The coordinates of the Start button on the page (`{x: number, y: number})
`feedback`	provide content for the main stimulus	-

Mammal

Bird

<Experiment>
    <template v-for="(task, i) in [
      {o1: 'Mammal', o2: 'Bird', s: 'Bat'},
      {o1: 'Bird', o2: 'Insect', s: 'Kolibri'},
      {o1: 'Fish', o2: 'Mammal', s: 'Whale'},
      {o1: 'Fish', o2: 'Bird', s: 'Penguin'}
      ]">
      <ForcedChoiceMousetrackingScreen :key="i" :option1="task.o1" :option2="task.o2">
            <template #option1>
              <div :style="{backgroundColor: 'lightyellow', width: '100px', padding: '70px'}">
                {{ task.o1 }}
              </div>
            </template>
            <template #option2>
              <div :style="{backgroundColor: 'lightyellow', width: '100px', padding: '70px'}">
                {{ task.o2 }}
              </div>
            </template>
            <template #stimulus>
              <span>{{ task.s }}</span>
            </template>
            <template #feedback>
              <!-- add values in `task` to measurements -->
              <Record :data="{...task}" />
              <Wait :time="100" @done="$magpie.saveAndNextScreen()" />
            </template>
      </ForcedChoiceMousetrackingScreen>
    </template>

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <template v-for="(task, i) in [
      {o1: 'Mammal', o2: 'Bird', s: 'Bat'},
      {o1: 'Bird', o2: 'Insect', s: 'Kolibri'},
      {o1: 'Fish', o2: 'Mammal', s: 'Whale'},
      {o1: 'Fish', o2: 'Bird', s: 'Penguin'}
      ]">
      <ForcedChoiceMousetrackingScreen :key="i" :option1="task.o1" :option2="task.o2">
            <template #option1>
              <div :style="{backgroundColor: 'lightyellow', width: '100px', padding: '70px'}">
                {{ task.o1 }}
              </div>
            </template>
            <template #option2>
              <div :style="{backgroundColor: 'lightyellow', width: '100px', padding: '70px'}">
                {{ task.o2 }}
              </div>
            </template>
            <template #stimulus>
              <span>{{ task.s }}</span>
            </template>
            <template #feedback>
              <!-- add values in `task` to measurements -->
              <Record :data="{...task}" />
              <Wait :time="100" @done="$magpie.saveAndNextScreen()" />
            </template>
      </ForcedChoiceMousetrackingScreen>
    </template>

    <DebugResultsScreen />

</Experiment>

ForcedChoiceScreen

src/components/trial_screens/ForcedChoiceScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
options	array
response	string	The chosen option

Prop name	Description	Default
`options`	Forced choice options array - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`question`	A question string	`undefined`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built forced choice screen, with limited functionality, but simpler to use.

Always do the opposite of what you are asked.

Do you understand this question?

Yes

<Experiment>

    <ForcedChoiceScreen
        :options="['Yes', 'No']"
        question="Do you understand this question?"
        qud="Always do the opposite of what you are asked." />

    <DebugResultsScreen />

</Experiment>

<Experiment>

    <ForcedChoiceScreen
        :options="['Yes', 'No']"
        question="Do you understand this question?"
        qud="Always do the opposite of what you are asked." />

    <DebugResultsScreen />

</Experiment>

ImageSelectionScreen

src/components/trial_screens/ImageSelectionScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
options	array	The labels of the available options
response	string	The label of the chosen option

Prop name	Description	Default
`options`	Forced choice options. Each option must be an object looking as follows `{src: 'image path', label: 'my label'}` array - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`question`	A question string	`undefined`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built image selection screen, with limited functionality, but simpler to use.

Eating healthy is good for you.

What do you eat?

<Experiment>
    <ImageSelectionScreen
        :options="[
                {src: 'img/fries.jpg', label: 'fries'},
                {src: 'img/soup.jpg', label: 'soup' }
                ]"
        question="What do you eat?"
        qud="Eating healthy is good for you."
    />

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <ImageSelectionScreen
        :options="[
                {src: 'img/fries.jpg', label: 'fries'},
                {src: 'img/soup.jpg', label: 'soup' }
                ]"
        question="What do you eat?"
        qud="Eating healthy is good for you."
    />

    <DebugResultsScreen />

</Experiment>

KeypressScreen

src/components/trial_screens/KeypressScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
response	string	The label of the pressed key

Prop name	Description	Default
`keys`	An object with keys mapped to option labels object - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`question`	A question string	`undefined`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`showOptions`	Determines whether information about possible keypresses and their meaning is shown boolean	`true`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built keypress screen, with limited functionality, but simpler to use.

Are fries healthy?

~ = yes ^ = no

<Experiment>
    <KeypressScreen
        question="Are fries healthy?"
        :feedback-time="1000"
        :keys="{
              '~': 'yes',
              '^': 'no'
            }"
    >
      <template #stimulus>
        <img src="img/fries.jpg" />
      </template>
      <template #feedback>
        You are correct.
      </template>
    </KeypressScreen>

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <KeypressScreen
        question="Are fries healthy?"
        :feedback-time="1000"
        :keys="{
              '~': 'yes',
              '^': 'no'
            }"
    >
      <template #stimulus>
        <img src="img/fries.jpg" />
      </template>
      <template #feedback>
        You are correct.
      </template>
    </KeypressScreen>

    <DebugResultsScreen />

</Experiment>

MazeScreen

src/components/trial_screens/MazeScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
responses	array	The selected responses
target_positions	array	The list of positions of the target words for each choice. Either ('left' or 'right')
response_times	array	The response times per selectable option
mazeTimeLimit	int	The maze time limit
maze_timeout	boolean	Whether the maze time limit was reached
correct	boolean	Whether all responses were correct

Prop name	Description	Default
`competitors`	Competitor chunks array - required	-
`targets`	Target chunks array - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`leftKey`	The keyboard key to press for the left continuation string	`f`
`mazeTimeLimit`	Time in miliseconds the participant has to select the individual words; `-1` for no time limit number	`-1`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`progress`	number	`undefined`
`qud`	Question under discussion. Always visible on the screen string	`''`
`question`	A question string	`undefined`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`rightKey`	The keyboard key to press for the right continuation string	`j`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built maze task screen.

Are fries healthy?

f = left j = right

xxx-xxx

Fries

<Experiment>
  <MazeScreen
      question="Are fries healthy?"
      :targets="['Fries', 'are', 'very', 'healthy', 'indeed.']"
      :competitors="['xxx-xxx', 'can', 'usually', 'quite', 'yummy']">
    <template #stimulus>
      <img src="img/fries.jpg" />
    </template>
  </MazeScreen>

  <DebugResultsScreen />

</Experiment>

<Experiment>
  <MazeScreen
      question="Are fries healthy?"
      :targets="['Fries', 'are', 'very', 'healthy', 'indeed.']"
      :competitors="['xxx-xxx', 'can', 'usually', 'quite', 'yummy']">
    <template #stimulus>
      <img src="img/fries.jpg" />
    </template>
  </MazeScreen>

  <DebugResultsScreen />

</Experiment>

MultipleChoiceMatrixScreen

src/components/trial_screens/MultipleChoiceMatrixScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
questions	array
options	array
randomize?	boolean
responses	array

Prop name	Description	Default
`options`	The possible options to choose from array - required	-
`questions`	The questions to ask array - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`randomize`	Whether to shuffle questions boolean	`false`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built multiple choice matrix screen, with limited functionality, but easier to use.

MultipleChoiceScreen

src/components/trial_screens/MultipleChoiceScreen.vue

Have participants choose answer from multiple options

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
options	array
optionsHtml (optional)	array
randomize	boolean
orientation	string
response	string	The chosen option

Prop name	Description	Default
`options`	The possible options to choose from array - required	-
`question`	A question string - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`optionsHtml`	The possible options to choose from as HTML strings array	`[]`
`orientation`	Whether to display 'vertical' or 'horizontal' string	`vertical`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`randomize`	Whether to randomize the option order boolean	`false`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built multiple choice screen, with limited functionality, but easier to use.

<Experiment>
    <MultipleChoiceScreen
        question="How was your breakfast?"
        :options="['Not enjoyable', 'Rather not enjoyable', 'OK', 'Rather enjoyable', 'Really enjoyable']"
    />

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <MultipleChoiceScreen
        question="How was your breakfast?"
        :options="['Not enjoyable', 'Rather not enjoyable', 'OK', 'Rather enjoyable', 'Really enjoyable']"
    />

    <DebugResultsScreen />

</Experiment>

RatingScreen

src/components/trial_screens/RatingScreen.vue

Have participants choose answer from multiple options

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
optionLeft?	string
optionRight?	string
count	int
response	int	The chosen option

Prop name	Description	Default
`question`	A question string - required	-
`count`	The length of the rating scale number	`7`
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`optionLeft`	Left label for rating string	`''`
`optionRight`	Right label for rating string	`''`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built rating screen, with limited functionality, but simpler to use.

<Experiment>
    <RatingScreen
        question="How healthy do you usually eat?"
        qud="Eating healthy is good for you."
        option-left="Very healthy"
        option-right="Very unhealthy"
    />

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <RatingScreen
        question="How healthy do you usually eat?"
        qud="Eating healthy is good for you."
        option-left="Very healthy"
        option-right="Very unhealthy"
    />

    <DebugResultsScreen />

</Experiment>

SelfPacedReadingScreen

src/components/trial_screens/SelfPacedReadingScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
responses	string	The selected responses
response_times	string	The response times per selectable option
spr_timeout	boolean	Whether the participant took longer than the set time limit per chunk
sprTimeLimit	int	Time limit per chunk

Prop name	Description	Values	Default
`chunks`	Self-paced reading text chunks array - required	-	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	-	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	-	`0`
`instructions`	Give instructions on what the participant is supposed to do string	-	`Press SPACE to reveal the words.`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	-	`0`
`qud`	Question under discussion. Always visible on the screen string	-	`''`
`question`	A question string	-	`undefined`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	-	`0`
`sprTimeLimit`	Time limit per chunk number	-	`-1`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	-	`0`
`trigger`	The key to press to reveal the next word string	-	`␣`
`underline`	Underline type string	`words`, `sentence or none`	`none`
`wordPos`	Whether to show the next word at the same position or at the next string	`same or next`	`same`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built self-paced reading task screen.

Are fries healthy?

Press SPACE to reveal the words.

Friesareveryhealthyindeed.

<Experiment>
  <SelfPacedReadingScreen
      question="Are fries healthy?"
      :chunks="['Fries', 'are', 'very', 'healthy', 'indeed.']">
    <template #stimulus>
      <img src="img/fries.jpg" />
    </template>
  </SelfPacedReadingScreen>

  <DebugResultsScreen />

</Experiment>

<Experiment>
  <SelfPacedReadingScreen
      question="Are fries healthy?"
      :chunks="['Fries', 'are', 'very', 'healthy', 'indeed.']">
    <template #stimulus>
      <img src="img/fries.jpg" />
    </template>
  </SelfPacedReadingScreen>

  <DebugResultsScreen />

</Experiment>

SliderRangesScreen

src/components/trial_screens/SliderRangesScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
optionLeft?	string
optionRight?	string
interval	int
ranges	array
min	int
max	int
response	array	The values of all sliders
range_values	array	The length of the ranges between all sliders and min max

Prop name	Description	Default
`question`	A question string - required	-
`ranges`	The labels for the ranges array - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`interval`	Interval between slider values number	`1`
`max`	Maximum slider value number	`100`
`min`	Minimal slider value number	`0`
`optionLeft`	Left label for rating string	`''`
`optionRight`	Right label for rating string	`''`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built slider rating screen, with limited functionality, but simpler to use.

Eating healthy is good for you.

How often do you eat meat, vegetarian or vegan?

33 meat
34 vegetarian
33 vegan

<Experiment>
    <SliderRangesScreen
        question="How often do you eat meat, vegetarian or vegan?"
        qud="Eating healthy is good for you."
        :ranges="['meat', 'vegetarian', 'vegan']"
    />

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <SliderRangesScreen
        question="How often do you eat meat, vegetarian or vegan?"
        qud="Eating healthy is good for you."
        :ranges="['meat', 'vegetarian', 'vegan']"
    />

    <DebugResultsScreen />

</Experiment>

SliderScreen

src/components/trial_screens/SliderScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
optionLeft?	string
optionRight?	string
interval	int
ranges	array
min	int
max	int
initial	int
response	int	The value of the slider

Prop name	Description	Default
`question`	A question string - required	-
`disabled`	boolean	`false`
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`initial`	Initial slider position number	`0`
`interval`	Interval between slider values number	`1`
`max`	Maximum slider value number	`100`
`min`	Minimal slider value number	`0`
`optionLeft`	Left label for rating string	`''`
`optionRight`	Right label for rating string	`''`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built slider rating screen, with limited functionality, but simpler to use.

Eating healthy is good for you.

How healthy do you usually eat?

Very healthy

Very unhealthy

<Experiment>
    <SliderScreen
        question="How healthy do you usually eat?"
        qud="Eating healthy is good for you."
        option-left="Very healthy"
        option-right="Very unhealthy"
    />

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <SliderScreen
        question="How healthy do you usually eat?"
        qud="Eating healthy is good for you."
        option-left="Very healthy"
        option-right="Very unhealthy"
    />

    <DebugResultsScreen />

</Experiment>

TextareaScreen

src/components/trial_screens/TextareaScreen.vue

Inherits from LifecycleScreen

Screen Measurements

Measurement	Type	Description
responseTime	int	Time between display of this screen until the screen is left
responseTimeout	boolean	Whether the response time limit was reached
qud (optional)	string
pauseTime (optional)	int
fixationTime (optional)	int
stimulusTime (optional)	int
responseTimeLimit (optional)	int	The response time limit
feedbackTime (optional)	int
question	string
response	string	The entered response text

Prop name	Description	Default
`question`	A question string - required	-
`feedbackTime`	How long feedback should be displayed. Don't set this, to avoid displaying feedback altogether; set to -1 if you want to call nextScreen manually number	`0`
`fixationTime`	Duration of the fixation point phase. Don't set this to avoid showing the fixation point altogether. Set to -1 to call nextSlide manually number	`0`
`pauseTime`	Duration of the pause phase. Don't set this, to avoid the pause altogether. number	`0`
`qud`	Question under discussion. Always visible on the screen string	`''`
`responseTimeLimit`	How long the response should be enabled, don't set this, to avoid the timeout altogether. When this is set, a `responseTimeout` boolean property will be added to the result, indicating whether timeout occurred number	`0`
`stimulusTime`	Duration of the stimulus phase. Don't set this to avoid hiding the stimulus altogether. Set to -1 to call nextSlide manually number	`0`

Slot	Description
`fixation`	-
`stimulus`	-
`feedback`	-
`task`	-

This is a pre-built image selection screen, with limited functionality, but simpler to use.

Eating healthy is good for you.

What do you usually eat?

<Experiment>

    <TextareaScreen
        question="What do you usually eat?"
        qud="Eating healthy is good for you."
    />

    <DebugResultsScreen />

</Experiment>

<Experiment>

    <TextareaScreen
        question="What do you usually eat?"
        qud="Eating healthy is good for you."
    />

    <DebugResultsScreen />

</Experiment>

Inputs

Magpie offers a range of ready-made default input methods for your experiments to quickly get up and running.

CompletionInput

src/components/inputs/CompletionInput.vue

Have the participant complete a text with various gaps.

Prop name	Description	Default
`options`	An array of arrays with possible completions per `%s` array - required	-
`text`	The text that is supposed to be completed. `%s` marks completions string - required	-

Event name	Description
`update:response`
`update:responses`

One fell over three .

<Experiment>
    <Screen>

      <Slide>
        <CompletionInput
          text="One %s fell over three %s."
          :responses.sync= "$magpie.measurements.words"
          :options="[
              ['horse', 'penguin', 'bird'],
              ['icicles', 'trees', 'bushes']
              ]"
          />
        <p v-if= "$magpie.measurements.words">A {{$magpie.measurements.words[0]}} would never fall over {{$magpie.measurements.words[1]}}</p>
        <button @click="$magpie.saveAndNextScreen();">Done</button>
      </Slide>

    </Screen>

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <CompletionInput
          text="One %s fell over three %s."
          :responses.sync= "$magpie.measurements.words"
          :options="[
              ['horse', 'penguin', 'bird'],
              ['icicles', 'trees', 'bushes']
              ]"
          />
        <p v-if= "$magpie.measurements.words">A {{$magpie.measurements.words[0]}} would never fall over {{$magpie.measurements.words[1]}}</p>
        <button @click="$magpie.saveAndNextScreen();">Done</button>
      </Slide>

    </Screen>

</Experiment>

DropdownInput

src/components/inputs/DropdownInput.vue

Have your participants provide a text answer

Prop name	Description	Default
`options`	array - required	-

Event name	Description
`update:response`

Fries or soup?

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <DropdownInput
            :options="['fries', 'soup']"
            :response.sync= "$magpie.measurements.lunch"
          />
        <p v-if= "$magpie.measurements.lunch === 'soup'">I disagree!</p>
        <button @click="$magpie.saveAndNextScreen">Submit</button>
      </Slide>

    </Screen>

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <DropdownInput
            :options="['fries', 'soup']"
            :response.sync= "$magpie.measurements.lunch"
          />
        <p v-if= "$magpie.measurements.lunch === 'soup'">I disagree!</p>
        <button @click="$magpie.saveAndNextScreen">Submit</button>
      </Slide>

    </Screen>

    <DebugResultsScreen />

</Experiment>

ForcedChoiceInput

src/components/inputs/ForcedChoiceInput.vue

Have the participant choose between multiple options.

Prop name	Description	Default
`options`	The possible options to choose from array - required	-

Event name	Description	Properties
`update:response`	Change event with the chosen option. Useful in combination with `response.sync`	`<anonymous>`: undefined

What's on the bread?

Ham

Jam

<Experiment>
    <Screen>

      <Slide>
        <p>What's on the bread?</p>
        <ForcedChoiceInput
            :response.sync= "$magpie.measurements.bread"
            :options="['Ham', 'Jam']" />
          <p v-if= "$magpie.measurements.bread === 'Jam'">A sweet tooth, eh!?</p>
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>What's on the bread?</p>
        <ForcedChoiceInput
            :response.sync= "$magpie.measurements.bread"
            :options="['Ham', 'Jam']" />
          <p v-if= "$magpie.measurements.bread === 'Jam'">A sweet tooth, eh!?</p>
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>

</Experiment>

The following example will submit the response directly on clicking it.

What's on the bread?

Ham

Jam

<Experiment>
    <Screen>

      <Slide>
        <p>What's on the bread?</p>
        <ForcedChoiceInput
            :response.sync= "$magpie.measurements.bread"
            :options="['Ham', 'Jam']"
            @update:response="$magpie.saveAndNextScreen();"/>
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>What's on the bread?</p>
        <ForcedChoiceInput
            :response.sync= "$magpie.measurements.bread"
            :options="['Ham', 'Jam']"
            @update:response="$magpie.saveAndNextScreen();"/>
      </Slide>

    </Screen>
</Experiment>

ImageSelectionInput

src/components/inputs/ImageSelectionInput.vue

Have the participant select an image

Prop name	Description	Default
`options`	An array of option objects `{ src: '', label: '' }` array - required	-

Event name	Description	Properties
`update:response`	Change event with the selected image label	`<anonymous>`: undefined

Fries or soup?

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <ImageSelectionInput
            :options="[
                {src: 'img/fries.jpg', label: 'fries'},
                {src: 'img/soup.jpg', label: 'soup' }]"
            @update:response="$magpie.addTrialData({image_choice: $event}); $magpie.nextScreen()"
        />
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <ImageSelectionInput
            :options="[
                {src: 'img/fries.jpg', label: 'fries'},
                {src: 'img/soup.jpg', label: 'soup' }]"
            @update:response="$magpie.addTrialData({image_choice: $event}); $magpie.nextScreen()"
        />
      </Slide>

    </Screen>
</Experiment>

KeypressInput

src/components/inputs/KeypressInput.vue

Have your participants react

Prop name	Description	Default
`keys`	An object with keys mapped to option labels object - required	-
`showOptions`	Determines whether information about possible keypresses and their meaning is shown boolean	`true`

Event name	Description	Properties
`update:response`		`<anonymous>`: undefined

Fries or soup?

~ = fries ^ = soup

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <KeypressInput
            :response.sync= "$magpie.measurements.lunch"
            :keys="{
              '~': 'fries',
              '^': 'soup'
            }"
            @update:response="$magpie.saveAndNextScreen();" />
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <KeypressInput
            :response.sync= "$magpie.measurements.lunch"
            :keys="{
              '~': 'fries',
              '^': 'soup'
            }"
            @update:response="$magpie.saveAndNextScreen();" />
      </Slide>

    </Screen>
</Experiment>

MazeInput

src/components/inputs/MazeInput.vue

Prop name	Description	Default
`competitors`	Competitor chunks array - required	-
`targets`	Target chunks array - required	-
`leftKey`	The keyboard key to press for the left continuation string	`f`
`responseTimeLimit`	Maximum time alotted for a single response number	`-1`
`rightKey`	The keyboard key to press for the right continuation string	`j`
`showKeypressOptions`	Whether to show the options for the KeypressInput boolean	`true`

Event name	Description	Properties
`update:response-times`	The list of response times per item	array
`update:responses`	The list of selected options	array
`update:target-positions`	The list of target positions (either 'left' or 'right')	array
`update:correct`	Whether all responses selected the target word	boolean
`update:timeout`	Whether the participant took longer than the timeout for one item and the task was aborted	boolean
`end`	Emitted when the task was aborted due to timeout or incorrect response, or after selecting the last correct option

f = left j = right

This

xxx-xxx

<Experiment>
    <Screen>
        <MazeInput
            :targets="['This', 'is', 'a', 'nice', 'text']"
            :competitors="['xxx-xxx', 'can', 'usually', 'quite', 'yummy']"
            :response-times.sync="$magpie.measurements.times"
            :responses.sync="$magpie.measurements.responses"
            :timeout.sync="$magpie.measurements.timeout"
            :correct.sync="$magpie.measurements.correct"
            :target-positions.sync="$magpie.measurements.target_positions"
            @end="$magpie.saveAndNextScreen()" />
    </Screen>

    <DebugResultsScreen />
</Experiment>

<Experiment>
    <Screen>
        <MazeInput
            :targets="['This', 'is', 'a', 'nice', 'text']"
            :competitors="['xxx-xxx', 'can', 'usually', 'quite', 'yummy']"
            :response-times.sync="$magpie.measurements.times"
            :responses.sync="$magpie.measurements.responses"
            :timeout.sync="$magpie.measurements.timeout"
            :correct.sync="$magpie.measurements.correct"
            :target-positions.sync="$magpie.measurements.target_positions"
            @end="$magpie.saveAndNextScreen()" />
    </Screen>

    <DebugResultsScreen />
</Experiment>

MultipleChoiceInput

src/components/inputs/MultipleChoiceInput.vue

Prop name	Description	Default
`options`	The possible options to choose from array - required	-
`labels`	Whether to display labels boolean	`true`
`optionsHtml`	The possible options to choose from as HTML strings array	`[]`
`orientation`	Whether to display 'vertical' or 'horizontal' string	`vertical`
`randomize`	Whether to randomize the option order boolean	`false`

Event name	Description	Properties
`update:response`	Change event with the chosen option. Useful in combination with `response.sync`	`<anonymous>`: undefined

<Experiment>
    <Screen>

      <Slide>
        <p>How was your breakfast?</p>
        <MultipleChoiceInput
            :response.sync= "$magpie.measurements.breakfast"
            :options="['Not enjoyable', 'Rather not enjoyable', 'OK', 'Rather enjoyable', 'Really enjoyable']" />
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>How was your breakfast?</p>
        <MultipleChoiceInput
            :response.sync= "$magpie.measurements.breakfast"
            :options="['Not enjoyable', 'Rather not enjoyable', 'OK', 'Rather enjoyable', 'Really enjoyable']" />
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>How was your breakfast?</p>
        <MultipleChoiceInput
            :response.sync= "$magpie.measurements.breakfast"
            orientation="horizontal"
            :options="['Not enjoyable', 'Rather not enjoyable', 'OK', 'Rather enjoyable', 'Really enjoyable']" />
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>How was your breakfast?</p>
        <MultipleChoiceInput
            :response.sync= "$magpie.measurements.breakfast"
            orientation="horizontal"
            :options="['Not enjoyable', 'Rather not enjoyable', 'OK', 'Rather enjoyable', 'Really enjoyable']" />
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>
</Experiment>

Which sentence is ungrammatical?

<Experiment>
  <Screen>
      <p>Which sentence is ungrammatical?</p>
      <MultipleChoiceInput
          :response.sync= "$magpie.measurements.grammatical"
          :randomize="true"
          :options="['banana', 'bear', 'horse', 'bread']"
          :options-html="[
              'The <strong>banana</strong> went out to buy some groceries.',
              'The <strong>bear</strong> raced past the barn froze.',
              'The <strong>horse</strong> could not have been eaten why it was racing.',
              'The <strong>bread</strong> was sour before it was made.'
              ]">
      </MultipleChoiceInput>
      <button @click="$magpie.saveAndNextScreen();">Submit</button>
  </Screen>
  <DebugResultsScreen />
</Experiment>

<Experiment>
  <Screen>
      <p>Which sentence is ungrammatical?</p>
      <MultipleChoiceInput
          :response.sync= "$magpie.measurements.grammatical"
          :randomize="true"
          :options="['banana', 'bear', 'horse', 'bread']"
          :options-html="[
              'The <strong>banana</strong> went out to buy some groceries.',
              'The <strong>bear</strong> raced past the barn froze.',
              'The <strong>horse</strong> could not have been eaten why it was racing.',
              'The <strong>bread</strong> was sour before it was made.'
              ]">
      </MultipleChoiceInput>
      <button @click="$magpie.saveAndNextScreen();">Submit</button>
  </Screen>
  <DebugResultsScreen />
</Experiment>

MultipleChoiceMatrixInput

src/components/inputs/MultipleChoiceMatrixInput.vue

Have the participant choose between multiple options for multiple questions (arranged in a matrix).

Prop name	Description	Default
`options`	The possible answers to choose from array - required	-
`questions`	The questions to ask array - required	-
`randomize`	Whether to shuffle questions boolean	`false`

Event name	Description	Properties
`update:responses`	Change event with the chosen options.	`<anonymous>`: undefined

You can also randomize the question order. The response data will still be in the order you supplied the questions in.

RankOrderInput

src/components/inputs/RankOrderInput.vue

Have your participants rank a list of options

Prop name	Description	Default
`options`	array - required	-

Event name	Description	Properties
`update:response`		`<anonymous>`: undefined

Please order the following foods with regards to their healthiness.

1Fries

2Vegetable soup

3Salad

4Burger

5Risotto

<Experiment>
    <Screen>

      <Slide>
        <p>Please order the following foods with regards to their healthiness.</p>
        <RankOrderInput
            :options="['Fries', 'Vegetable soup', 'Salad', 'Burger', 'Risotto']"
            :response.sync= "$magpie.measurements.order" />
        <button @click="$magpie.saveAndNextScreen()">Submit</button>
      </Slide>

    </Screen>

    <DebugResultsScreen />

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>Please order the following foods with regards to their healthiness.</p>
        <RankOrderInput
            :options="['Fries', 'Vegetable soup', 'Salad', 'Burger', 'Risotto']"
            :response.sync= "$magpie.measurements.order" />
        <button @click="$magpie.saveAndNextScreen()">Submit</button>
      </Slide>

    </Screen>

    <DebugResultsScreen />

</Experiment>

RatingInput

src/components/inputs/RatingInput.vue

Have your participants rate their answer on a rating scale

Prop name	Description	Default
`count`	The length of the rating scale number	`7`
`left`	Text left of the rating scale string	`''`
`right`	Text right of the rating scale string	`''`

Event name	Description
`update:response`

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <RatingInput
          left="Fries"
          :response.sync= "$magpie.measurements.lunch"
          right="Soup" />
        <p v-if= "$magpie.measurements.lunch > 4">I concur!</p>
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <RatingInput
          left="Fries"
          :response.sync= "$magpie.measurements.lunch"
          right="Soup" />
        <p v-if= "$magpie.measurements.lunch > 4">I concur!</p>
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>

</Experiment>

SelfPacedReadingInput

src/components/inputs/SelfPacedReadingInput.vue

Prop name	Description	Values	Default
`chunks`	Self-paced reading text chunks array - required	-	-
`instructions`	Give instructions on what the participant is supposed to do string	-	`Press SPACE to reveal the words.`
`responseTimeLimit`	Maximum time alotted for a single response number	-	`-1`
`showKeypressOptions`	Whether to show the options for the KeypressInput boolean	-	`true`
`trigger`	The key to press to reveal the next word string	-	`␣`
`underline`	Underline type string	`words`, `sentence or none`	`none`
`wordPos`	Whether to show the next word at the same position or at the next string	`same or next`	`same`

Event name	Description	Properties
`update:response-times`	List of response times	array
`update:timeout`	Whether the user took more time on one item than the set response time	array
`end`	Emitted either when the user takes longer than the set response time, or they finish until the end of chunks.

$ = Press $ to reveal the next word.

Thisisaniceandverylongtext

<Experiment>
    <Screen>
        <SelfPacedReadingInput
            :chunks="['This', 'is', 'a', 'nice', 'and', 'very', 'long', 'text']"
            word-pos="next"
            underline="sentence"
            trigger="$"
            instructions="Press $ to reveal the next word."
            :response-times.sync="$magpie.measurements.times"
            @end="$magpie.saveAndNextScreen()" />
    </Screen>

    <DebugResultsScreen />
</Experiment>

<Experiment>
    <Screen>
        <SelfPacedReadingInput
            :chunks="['This', 'is', 'a', 'nice', 'and', 'very', 'long', 'text']"
            word-pos="next"
            underline="sentence"
            trigger="$"
            instructions="Press $ to reveal the next word."
            :response-times.sync="$magpie.measurements.times"
            @end="$magpie.saveAndNextScreen()" />
    </Screen>

    <DebugResultsScreen />
</Experiment>

SerialInput

src/components/inputs/SerialInput.vue

SerialInputs allow you to record inputs on a series of items that are interrelated and belong to the same trial

Prop name	Description	Default
`iterations`	The number of iterations number - required	-

Event name	Description
`end`	Emitted when next() has been called on the last iteration

Slot	Description	Bindings
`default`	Your content for each iteration	`i` `iterations`: Number — The overall number of iterations `record`: fn(variable:string, value:mixed) — A function to record trial measurements per iteration resulting in an array of values stored at $magpie.measurements.{variable} `next`: fn() — A function to go to the next iteration

This is a simple implementation of a Self-paced reading task.

Does the sentence it the picture?

f = yes j = no b = maybe

Hello

<Experiment>
    <Screen>

      <Slide>
        <img src="img/fries.jpg" />
        <SerialInput
            :iterations="'Hello world, how are you?'.split(' ').length"
            @end="$magpie.saveAndNextScreen()">
          <template #default="{i, record, next}">
            <TimerStop
                v-if="i > 0"
                id="responseTime"
                @update:time="record('responseTimes', $event)"
            />
            <TimerStart id="responseTime" />
            Does the sentence it the picture?
            <KeypressInput :keys="{'f': 'yes', 'j': 'no', 'b' : 'maybe'}" @update:response="record('pressedKey', $event); next()" />
            <p>{{ 'Hello world, how are you?'.split(' ')[i] }}</p>
          </template>
        </SerialInput>
      </Slide>

    </Screen>

  <DebugResultsScreen />
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <img src="img/fries.jpg" />
        <SerialInput
            :iterations="'Hello world, how are you?'.split(' ').length"
            @end="$magpie.saveAndNextScreen()">
          <template #default="{i, record, next}">
            <TimerStop
                v-if="i > 0"
                id="responseTime"
                @update:time="record('responseTimes', $event)"
            />
            <TimerStart id="responseTime" />
            Does the sentence it the picture?
            <KeypressInput :keys="{'f': 'yes', 'j': 'no', 'b' : 'maybe'}" @update:response="record('pressedKey', $event); next()" />
            <p>{{ 'Hello world, how are you?'.split(' ')[i] }}</p>
          </template>
        </SerialInput>
      </Slide>

    </Screen>

  <DebugResultsScreen />
</Experiment>

SliderInput

src/components/inputs/SliderInput.vue

Prop name	Description	Default
`disabled`	Whether to show the tooltip boolean	`false`
`initial`	Initial slider position number	`0`
`interval`	Interval between slider values number	`1`
`left`	Text left of the slider string	`''`
`max`	Maximum slider value number	`100`
`min`	Minimal slider value number	`0`
`right`	Text right of the slider string	`''`
`tooltip`	Whether to show the tooltip boolean	`false`

Event name	Description	Properties
`update:response`		`<anonymous>`: undefined

Fries or soup?

Fries

Soup

Lunch: % Soup

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <SliderInput
            left="Fries"
            right="Soup"
            :response.sync= "$magpie.measurements.lunch" />
        Lunch: {{$magpie.measurements.lunch}}% Soup
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>

</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup?</p>
        <SliderInput
            left="Fries"
            right="Soup"
            :response.sync= "$magpie.measurements.lunch" />
        Lunch: {{$magpie.measurements.lunch}}% Soup
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>

</Experiment>

SliderRangesInput

src/components/inputs/SliderRangesInput.vue

Prop name	Description	Default
`ranges`	The labels for the ranges array - required	-
`initial`	Initial slider position number	`0`
`interval`	Interval between slider values number	`1`
`left`	Text left of the slider string	`''`
`max`	Maximum slider value number	`100`
`min`	Minimal slider value number	`0`
`right`	Text right of the slider string	`''`
`tooltip`	Whether to show the tooltip boolean	`false`

Event name	Description	Properties
`update:responses`		`<anonymous>`: undefined
`update:rangeValues`		`<anonymous>`: undefined

How often do you eat meat, vegetarian or vegan?

33% Meat, 34% Vegetarian, 33% Vegan

<Experiment>

    <Screen>

      <Slide>
        <p>How often do you eat meat, vegetarian or vegan?</p>
        <SliderRangesInput
            :ranges="['meat', 'vegetarian', 'vegan']"
            :range-values.sync= "$magpie.measurements.food_types" />
        <p v-if= "$magpie.measurements.food_types">
          {{$magpie.measurements.food_types[0]}}% Meat,
          {{$magpie.measurements.food_types[1]}}% Vegetarian,
          {{$magpie.measurements.food_types[2]}}% Vegan</p>
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>

</Experiment>

<Experiment>

    <Screen>

      <Slide>
        <p>How often do you eat meat, vegetarian or vegan?</p>
        <SliderRangesInput
            :ranges="['meat', 'vegetarian', 'vegan']"
            :range-values.sync= "$magpie.measurements.food_types" />
        <p v-if= "$magpie.measurements.food_types">
          {{$magpie.measurements.food_types[0]}}% Meat,
          {{$magpie.measurements.food_types[1]}}% Vegetarian,
          {{$magpie.measurements.food_types[2]}}% Vegan</p>
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>

</Experiment>

TextareaInput

src/components/inputs/TextareaInput.vue

Have your participants provide a text answer

Event name	Description
`update:response`

Fries or soup? Discuss.

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup? Discuss.</p>
        <TextareaInput
            :response.sync= "$magpie.measurements.lunch"
          />
        <p v-if= "$magpie.measurements.lunch && $magpie.measurements.lunch.length > 32">I disagree!</p>
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        <p>Fries or soup? Discuss.</p>
        <TextareaInput
            :response.sync= "$magpie.measurements.lunch"
          />
        <p v-if= "$magpie.measurements.lunch && $magpie.measurements.lunch.length > 32">I disagree!</p>
        <button @click="$magpie.saveAndNextScreen();">Submit</button>
      </Slide>

    </Screen>
</Experiment>

Interactive

Magpie allows creating experiments where participants interact with each other online. This works via a web socket connection to the magpie server that relays events to all participants in the same experiment room. There are a number of preconfigured components available for you to use in such scenarios, like e.g. the Chat component, which allows participants to communicate via text messages.

You will likely want to create your own interactive components. To showcase how this works, we'll use a simplified version of the chat component as an example:

<template>
  <div class="chat">
    <div ref="box" class="chat-box">
      <!-- List all chat messages -->
      <p
        v-for="(message, i) in messages"
        :key="i"
        v-text="message.message"
      ></p>
    </div>
    <div class="chat-input">
      <!-- Textarea (with a ref called 'text') for composing messages and 'send' button for sending them -->
      <textarea ref="text"></textarea>
      <button @click.stop="send()">Send</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  name: 'Chat',
  data() {
    return {
      messages: []
    };
  },
  // This is a magpie-specific extension to Vue, which allows
  // you to specify callbacks for specific socket events. In this case
  // we're listening on the 'chat_message' event 
  socket: {
    chat_message(payload) {
      this.messages.push(payload);
    }
  },
  methods: {
    send() {
      // Here we get the current message from the textarea using the Vue ref we set above
      const message = this.$refs.text.value;
      // If the experiment was setup with a socketURL config setting,
      // the socket will be available as part of the magic $magpie property
      // allowing us to broadcast this message to the fellow participants in the current room (including ourself)
      this.$magpie.socket.broadcast('chat_message', message);
    }
  }
};
</script>

Chat

src/components/interactive/Chat.vue

Prop name	Description	Default
`participantLabel`	string	`null`

Event name	Description	Properties
`update:messages`	Messages contains all chat messages as objects: `[{message: '', participantId: '', time: 2345678765}, ...]`	`<anonymous>`: undefined
`update:data`	Data contains all chat messages in tabular form: `{chatMessage: [], chatParticipantId: [], chatTime: []}`	`<anonymous>`: undefined

This interactive component provides participants the opportunity to chat with each other, if they are in the same room.

<Experiment>
    <Screen>
      <button @click="$magpie.nextScreen()">Start</button>
    </Screen>

    <ConnectInteractiveScreen />

    <Screen>

      <Slide>
        <Chat :data.sync= "$magpie.measurements.data" />
        <p>{{$magpie.measurements.data? $magpie.measurements.data.chatMessage.length : 0}} messages sent so far.</p>
        <p>{{ $magpie.socket.active.length }} participants chatting.</p>
      </Slide>

    </Screen>

</Experiment>

<Experiment>
    <Screen>
      <button @click="$magpie.nextScreen()">Start</button>
    </Screen>

    <ConnectInteractiveScreen />

    <Screen>

      <Slide>
        <Chat :data.sync= "$magpie.measurements.data" />
        <p>{{$magpie.measurements.data? $magpie.measurements.data.chatMessage.length : 0}} messages sent so far.</p>
        <p>{{ $magpie.socket.active.length }} participants chatting.</p>
      </Slide>

    </Screen>

</Experiment>

WaitForParticipants

src/components/interactive/WaitForParticipants.vue

Prop name	Description	Default
`number`	number - required	-

Event name	Description
`done`

This interactive component allow waiting until a specified number of participants are on the current screen.

<Experiment>
    <Screen>
      <button @click="$magpie.nextScreen()">Start</button>
    </Screen>

    <ConnectInteractiveScreen />

    <Screen>
      <p>You're on screen 1.</p>
      <button @click="$magpie.nextScreen()">Next</button>
    </Screen>

    <Screen>
      <Slide>
        <p>You're on the second screen.</p>
        <WaitForParticipants :number="2" @done="$magpie.nextSlide()" />
      </Slide>

      <Slide>
        <p>Both participants are on the second screen now.</p>
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>
      <button @click="$magpie.nextScreen()">Start</button>
    </Screen>

    <ConnectInteractiveScreen />

    <Screen>
      <p>You're on screen 1.</p>
      <button @click="$magpie.nextScreen()">Next</button>
    </Screen>

    <Screen>
      <Slide>
        <p>You're on the second screen.</p>
        <WaitForParticipants :number="2" @done="$magpie.nextSlide()" />
      </Slide>

      <Slide>
        <p>Both participants are on the second screen now.</p>
      </Slide>

    </Screen>
</Experiment>

Helpers

EyetrackingStart

src/components/helpers/EyetrackingStart.vue

This component (re)starts capturing the eye gaze track. You can retrieve the current eye track with $magpie.eyetracking.getEyeTrack(). Eyetracking requires that you install webgazer.

FullscreenStart

src/components/helpers/FullscreenStart.vue

This component asks the user to enable full screen.

HideCursor

src/components/helpers/HideCursor.vue

<Experiment>
  <Screen>
    <button @click="$magpie.nextScreen()">Hide cursor</button>
  </Screen>
  <Screen>
    <HideCursor />
    <KeypressInput :keys="{'~': 'show cursor'}" @update:response="$magpie.nextScreen(0)" />
  </Screen>
</Experiment>

<Experiment>
  <Screen>
    <button @click="$magpie.nextScreen()">Hide cursor</button>
  </Screen>
  <Screen>
    <HideCursor />
    <KeypressInput :keys="{'~': 'show cursor'}" @update:response="$magpie.nextScreen(0)" />
  </Screen>
</Experiment>

MousetrackingStart

src/components/helpers/MousetrackingStart.vue

This component (re)starts capturing the mouse track. You can retrieve the current mouse track with $magpie.mousetracking.getMouseTrack().

PreventCopyPaste

src/components/helpers/PreventCopyPaste.vue

<Experiment>
  <Screen>
    <button @click="$magpie.nextScreen()">Prevent Copy Paste</button>
  </Screen>
  <Screen>
    <PreventCopyPaste />
    <button @click="$magpie.nextScreen(0)">Allow Copy Paste</button>
  </Screen>
</Experiment>

<Experiment>
  <Screen>
    <button @click="$magpie.nextScreen()">Prevent Copy Paste</button>
  </Screen>
  <Screen>
    <PreventCopyPaste />
    <button @click="$magpie.nextScreen(0)">Allow Copy Paste</button>
  </Screen>
</Experiment>

Record

src/components/helpers/Record.vue

Prop name	Description	Default
`data`	The data you want to add object - required	-
`global`	If you set the global prop, the data will be added to the global experiment measurements instead of only to the current trial boolean	`false`

Record allows you to easily add arbitrary data to your measurements:

Slide 1

<Experiment>

    <template v-for="(task, i) in [{foo: 'bar'}, {foo: 'baz'}]">
      <Screen :key="i">

        <Slide>
          Slide 1<br />
          <Record :data="task" />
          <button @click="$magpie.nextSlide()">Next slide</button>
        </Slide>

        <Slide>
          Slide 2<br />
          <button @click="$magpie.saveAndNextScreen()">next</button>
        </Slide>

      </Screen>
    </template>

    <DebugResultsScreen />
</Experiment>

<Experiment>

    <template v-for="(task, i) in [{foo: 'bar'}, {foo: 'baz'}]">
      <Screen :key="i">

        <Slide>
          Slide 1<br />
          <Record :data="task" />
          <button @click="$magpie.nextSlide()">Next slide</button>
        </Slide>

        <Slide>
          Slide 2<br />
          <button @click="$magpie.saveAndNextScreen()">next</button>
        </Slide>

      </Screen>
    </template>

    <DebugResultsScreen />
</Experiment>

ResponseTimeStart

src/components/helpers/ResponseTimeStart.vue

This component (re)starts the timer for recording the response time.

TimerStart

src/components/helpers/TimerStart.vue

Prop name	Description	Default
`id`	string - required	-

This component starts a timer. See TimerStop for how to use it.

TimerStop

src/components/helpers/TimerStop.vue

Prop name	Description	Default
`id`	string - required	-

Event name	Description	Properties
`update:time`		`<anonymous>`: undefined

Slide 1

<Experiment>
    <Screen>

      <Slide>
        Slide 1<br />
        <TimerStart id="myTimer"></TimerStart>
        <button @click="$magpie.nextSlide()">Next slide</button>
      </Slide>

      <Slide>
        <TimerStop id="myTimer" :time.sync="$magpie.measurements.time" />
        Slide 2<br />
        Time until click: {{$magpie.measurements.time/1000}} seconds
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide>
        Slide 1<br />
        <TimerStart id="myTimer"></TimerStart>
        <button @click="$magpie.nextSlide()">Next slide</button>
      </Slide>

      <Slide>
        <TimerStop id="myTimer" :time.sync="$magpie.measurements.time" />
        Slide 2<br />
        Time until click: {{$magpie.measurements.time/1000}} seconds
      </Slide>

    </Screen>
</Experiment>

Wait

src/components/helpers/Wait.vue

Prop name	Description	Default
`time`	number - required	-

Event name	Description
`done`

Slide 1

<Experiment>
    <Screen>

      <Slide  >
        Slide 1
        <button @click= "$magpie.nextSlide()">Next slide</button>
      </Slide>

      <Slide  >
        Slide 2
        <Wait key="wait for slide 2" :time="500" @done= "$magpie.nextSlide()" />
      </Slide>

      <Slide  >
        Slide 3
        <Wait key="wait for slide 3" :time="500" @done= "$magpie.nextSlide()" />
      </Slide>

      <Slide  >
        Slide 4
        <Wait key="wait for slide 4" :time="500" @done= "$magpie.nextSlide()" />
      </Slide>

      <Slide  >
        Slide 5
      </Slide>

    </Screen>
</Experiment>

<Experiment>
    <Screen>

      <Slide  >
        Slide 1
        <button @click= "$magpie.nextSlide()">Next slide</button>
      </Slide>

      <Slide  >
        Slide 2
        <Wait key="wait for slide 2" :time="500" @done= "$magpie.nextSlide()" />
      </Slide>

      <Slide  >
        Slide 3
        <Wait key="wait for slide 3" :time="500" @done= "$magpie.nextSlide()" />
      </Slide>

      <Slide  >
        Slide 4
        <Wait key="wait for slide 4" :time="500" @done= "$magpie.nextSlide()" />
      </Slide>

      <Slide  >
        Slide 5
      </Slide>

    </Screen>
</Experiment>

API

Magpie

Kind: global class

Magpie
- new Magpie()
- .validators : object
- .v : object
- .id : string
- .serverUrl : string
- .submissionUrl : string
- .submissionUrl : string
- .contactEmail : string
- .mode : string
- .debug : boolean
- .socket : Socket
- .mousetracking : Mousetracking
- .eyetracking : Eyetracking
- .currentScreenIndex : number
- .currentSlideIndex : number
- .responseTimeStart : number
- .measurements : object
- .validateMeasurements : object
- .timers : object
- .nextSlide(index)
- .nextScreen(index)
- .saveAndNextScreen(index)
- .addTrialData(data)
- .addExpData(data)
- .getAllData() ⇒ Array.<Object>
- .submit() ⇒ Promise.<void>
- .submitIntermediateResults() ⇒ Promise.<void>
- .setProgress(percentage)

new Magpie()

Magpie specific vue tools exposed as $magpie