Increasing Accessibility by Stress Testing During Stressful Times for iDKHOW

Building an Apple Music and Spotify Powered Stress Test

I realize it is a bit ironic to be building a stress test web app during a pandemic but somehow that’s where I found myself last month for the band I Don’t Know How But They Found Me (iDKHOW.) iDKHOW describes themselves as “…a band out of time. One who faded away into obscurity after struggling to find success in the late 70’s and early 80's.” Prevalent in the band’s visuals is a big brother like entity called TELLEXX, which is part of a conspiracy mythos which pervades everything they do. While I don’t know much about TELLEXX myself, I thought it might make sense that they would be conducting some sort of psychological experiments in the past. After conversing with the client, we settled on the idea of developing a Spotify and Apple Music powered stress test so that users could gauge their stress level while streaming the band’s new single.

I talk to my clients about how web apps such as Shelter In Space and Tycho Weather are successful because they are very easy to use and the usefulness of the concept extends beyond the core fanbase. If a client is wishing to attract a larger audience than what they are accustomed to, building these sort of utility web apps is one way I like to approach it. A stress test is a personalized yes or no quiz which can detect how stressful you are depending on the answers you provide. It is an idea anyone might find useful and has a sort of infinite longevity. By integrating streaming service authentication, we were able to couple this accessible test with full track playback to directly drive streams.

Evaluate your stress today and read on to find out how the test was developed.

Questions

Original wireframe

I love giving my client’s control over their own content by integrating Contentful so that’s what we did here to manage the yes or no questions. Once the content model was setup, the client added each of the questions in both English and Icelandic (more on that later.) To integrate these into our Nuxt.js app, we simply needed to inject a plugin.

const contentful = require('contentful')
export default ({ app }, inject) => {
  const config = {
    space: process.env.CTF_SPACE_ID,
    accessToken: process.env.CTF_CDA_ACCESS_TOKEN
  }
  inject('contentful', contentful.createClient(config))
}

And then use the asyncData method to fetch the questions for all locales.

async asyncData({ app }) {
  const { items } = await app.$contentful.getEntries({
    locale: '*'
  })
  return {
    questions: items
  }
}

Administering Test

Building the test logic just involves a couple of variables and the setInterval method. We’ll have an array of questions from our Contentful integration and a question variable which keeps track of what the current question is. Then, we have a time variable that keeps track of what second we’re on. We also have a max variable which tells us how long the user has to answer. In the case of our final app, the user was given 5 seconds.

let questions = []
let question  = 0
let time = 0
let max  = 5

To begin the test, we’ll initialize our setInterval method to be called every second. If the time is less than the max amount of seconds, we simply increase the time 1 second so the view can inform the user. If not, it means the current question’s time limit has been exceeded. From here, we’ll see if there are any questions left. If yes, we’ll increment the question and reset the time. If not, all questions were answered and we can clear the interval.

let timer = setInterval(() => {
  if (this.time < this.max - 1) {
    this.time += 1
  } else {
    if (question + 1 < questions.length) {
      question += 1
      time = 0
    } else {
      clearInterval(timer)
    }
  }
}, 1000)

Calculating Result

The user has the ability to answer each question Yes, No, and Maybe. “Yes” is worth 5 points, “No” is worth 1 point, and “Maybe” is worth 3 points. If the user does not answer a question in time, the test automatically chooses “Yes,” assuming they were too stressed to answer in time. At the end of the test, all of these points are averaged to reveal the user’s stress level. I like storing all of my user answers with Vuex so I can easily access the results on multiple pages.

import Vue from 'vue'
export const state = () => ({
  answers: []
})
export const getters = {
  score(state) {
    let sum = state.answers.reduce((a, v) => a + v)
return Math.round(sum / state.answers.length)
  }
}
export const mutations = {
  updateAnswer(state, payload) {
    Vue.set(state.answers, payload.index, payload.value)
  }
}

Reactions

As an added layer of evil, we decided to make the test itself a bit stressful by randomizing a set of visual glitches that might occur when each question is posed. These reactions may flip the screen upside down, blur the question, or change the language to Icelandic. With the exception of the language change, all of the visual glitches were created using CSS animations to keep the app development simple. For example, if you wanted to mirror the screen vertically, you could use a transform.

transform: scale(1, -1);

Blurring can be done by simple adding a blur filter.

filter: blur(2px);

While the visual reactions add a layer of anxiety, I believe it is the countdown clock itself which is most stressful. Having to answer each question in five seconds is enough to make most users stressed. Tick tock.

Thanks

Thanks to Marc Mutnansky, Ramona Venturanza, and their team at Fearless Records for bringing me and helping develop this concept. Special thanks to Florian Mihr for providing all the design guidance. Finally, thanks to the iDKHOW for letting me create in their incredibly rich world. Their new album Razzmatazz is out October 16th.