core.js

const { remote, shell } = require('electron')
const {Menu, MenuItem} = remote
const path = require('path')
const csvsync = require('csvsync')
const fs = require('fs')
const $ = require('jQuery')
const {app} = require('electron').remote;
const appRootDir = require('app-root-dir').get() //get the path of the application bundle
const ffmpeg = appRootDir+'/ffmpeg/ffmpeg'
const exec = require( 'child_process' ).exec
const si = require('systeminformation')
const naturalSort = require('node-natural-sort')
const mkdirp = require('mkdirp')
var ipcRenderer = require('electron').ipcRenderer;
var moment = require('moment')
var content = document.getElementById("contentDiv")
var localMediaStream
var sys = {
  modelID: 'unknown',
  isMacBook: false // need to detect if macbook for ffmpeg recording framerate value
}
//var instructions = "I'm going to ask you to name some pictures. When you hear a beep, a picture will appear on the computer screen. Your job is to name the picture using only one word. We'll practice several pictures before we begin"
var brokenWindowInstructions = ["<h1>Take a little time to look at the following pictures. <br>" +
                                "They tell a story. Take a look at all of them and then I'll ask you <br>" +
                                " to tell me a story with a beginning, middle, and end. <br>" +
                                "You can look at the pictures as you tell the story. </h1>"]
var cinderellaStoryInstructions = ["<h1>I'm going to ask you to tell me a story. <br>" +
                                  "Have you ever heard the story of Cinderella? <br>" +
                                  "Do you remember much about it? <br>" +
                                  "The following pictures might remind you how it goes. <br>" +
                                  "Take a look at all the pictures first, then once you have finished I will ask you to retell the story in your own words. </h1>"]
var pbjInstructions = ["<h1>Tell me how you would make a peanut butter and jelly sandwich. <br>" +
                      "You can look at the picture as a guide. </h1>"]
var picnicSceneInstructions = "<h1>Please describe the following scene. Try to say as much as possible.</h1>"
var beepSound = path.join(__dirname, 'assets', 'beep.wav')
var exp = new experiment('discourse')
// construct a new ffmpeg recording object
var rec = new ff()
var pbjTimeoutID
var pbjTimeoutTime = 1000 * 60 * 60 // ms * s * min
var brokenWindowTimeoutID
var brokenWindowTimeoutTime = 1000 * 60 * 60
var picnicSceneTimeoutID
var picnicSceneTimeoutTime = 1000 * 60 * 60
var cinderellaTimeoutID
var cinderellaTimeoutTime = 1000 * 60 * 60
exp.getRootPath()
exp.getMediaPath()
var brokenWindowImg = path.resolve(exp.mediapath, 'brokenWindow.png')
console.log(brokenWindowImg)
var picnicSceneImg = path.resolve(exp.mediapath, 'picnic.jpg')
var pbjImg = path.resolve(exp.mediapath, 'pbj.png')
var cinderellaImgFolder = path.join(exp.mediapath, 'cinderellaImgs')
var cinderellaImgs = fs.readdirSync(cinderellaImgFolder).sort(naturalSort())
var maxNumCinderellaImgs = cinderellaImgs.length
var cinderellaImgIdx = 0
var cinderellaStartHasBeenClicked = false
var cinderellaRecordingHasStarted = false
var assessment = ''
lowLag.init({'force':'audioTag'}); // init audio functions
var userDataPath = path.join(app.getPath('userData'),'Data')
makeSureUserDataFolderIsThere()
var savePath



ipcRenderer.on('showSpinner', function () {
  //<div class="loader">Loading...</div>
  spinnerDiv = document.createElement('div')
  spinnerDiv.className = 'loader'
  spinnerDiv.style.zIndex = "1000";
  content.appendChild(spinnerDiv)
  console.log("added spinner!")

})

function checkForUpdateFromRender() {
  ipcRenderer.send('user-requests-update')
  //alert('checked for update')
}


function getSubjID() {
  var subjID = document.getElementById("subjID").value.trim()
  if (subjID === '') {
    subjID = '0'
  }
  return subjID
}

function getSessID() {
  var sessID = document.getElementById("sessID").value.trim()
  if (sessID === '') {
    sessID = '0'
  }
  return sessID
}

function makeSureUserDataFolderIsThere() {
  if (!fs.existsSync(userDataPath)) {
    fs.mkdirSync(userDataPath)
  }
}


//camera preview on
function startWebCamPreview() {
  clearScreen()
  var vidPrevEl = document.createElement("video")
  vidPrevEl.autoplay = true
  vidPrevEl.id = "webcampreview"
  content.appendChild(vidPrevEl)
  navigator.webkitGetUserMedia({video: true, audio: false},
    function(stream) {
      localMediaStream = stream
      vidPrevEl.src = URL.createObjectURL(stream)
    },
    function() {
      alert('Could not connect to webcam')
    }
  )
}


// camera preview off
function stopWebCamPreview () {
  if(typeof localMediaStream !== "undefined")
  {
    localMediaStream.getVideoTracks()[0].stop()
    clearScreen()
  }
}


// get date and time for appending to filenames
function getDateStamp() {
  ts = moment().format('MMMM Do YYYY, h:mm:ss a')
  ts = ts.replace(/ /g, '-') // replace spaces with dash
  ts = ts.replace(/,/g, '') // replace comma with nothing
  ts = ts.replace(/:/g, '-') // replace colon with dash
  console.log('recording date stamp: ', ts)
  return ts
}


// runs when called by systeminformation
function updateSys(ID) {
  sys.modelID = ID
  if (ID.includes("MacBook") == true) {
    sys.isMacBook = true
  }

  //console.log("updateSys has updated!")
  //console.log(ID.includes("MacBook"))
  //console.log(sys.isMacBook)
} // end updateSys

si.system(function(data) {
  console.log(data['model']);
  updateSys(data['model'])
})


// ffmpeg object constructor
function ff() {
  this.ffmpegPath = path.join(appRootDir,'ffmpeg','ffmpeg'),
  this.framerate = function () {

  },
  this.shouldOverwrite = '-y',         // do overwrite if file with same name exists
  this.threadQueSize = '512',           // preallocation
  this.cameraFormat = 'avfoundation',  // macOS only
  this.screenFormat = 'avfoundation',  // macOS only
  this.cameraDeviceID = '0',           // macOS only
  this.audioDeviceID = '0',            // macOS only
  this.screenDeviceID = '1',           // macOS only
  this.videoSize = '1280x720',         // output video dimensions
  this.videoCodec = 'libx264',         // encoding codec
  this.recQuality = '20',              //0-60 (0 = perfect quality but HUGE files)
  this.preset = 'ultrafast',
  this.videoExt = '.mp4',
  // filter is for picture in picture effect
  this.filter = '"[0]scale=iw/8:ih/8 [pip]; [1][pip] overlay=main_w-overlay_w-10:main_h-overlay_h-10"',
  this.isRecording = false,
  this.getSubjID = function() {
    var subjID = document.getElementById("subjID").value.trim()
    if (subjID === '') {
      console.log ('subject is blank')
      alert('Participant field is blank!')
      subjID = '0000'
    }
    return subjID
  },
  this.getSessID = function () {
    var sessID = document.getElementById("sessID").value.trim()
    if (sessID === '') {
      console.log ('session is blank')
      alert('Session field is blank!')
      sessID = '0000'
    }
    return sessID
  },
  this.getAssessmentType = function () {
    var assessmentType = document.getElementById("assessmentID").value.trim()
    if (assessmentType === '') {
      console.log ('assessment field is blank')
      alert('Assessment field is blank!')
    } else {
      console.log("assessment is: ", assessmentType)
      return assessmentType
    }
  },
  this.datestamp = getDateStamp(),
  this.makeOutputFolder = function () {
    outpath = path.join(savePath, this.getAssessmentType(), getSubjID(), getSessID())
    if (!fs.existsSync(outpath)) {
      mkdirp.sync(outpath)
    }
    return outpath
  }
  this.outputFilename = function() {
    return path.join(this.makeOutputFolder(), this.getSubjID()+'_'+this.getSessID()+'_'+this.getAssessmentType()+'_'+getDateStamp()+this.videoExt)
  },
  this.getFramerate = function () {
    if (sys.isMacBook == true){
      var framerate = 30
    } else {
      var framerate = 29.97
    }
    return framerate
  },
  this.startRec = function() {
    cmd = [
      this.ffmpegPath +
      ' ' + this.shouldOverwrite +
      ' -thread_queue_size ' + this.threadQueSize +
      ' -f ' + this.cameraFormat +
      ' -framerate ' + this.getFramerate().toString() +
      ' -video_size ' + this.videoSize +
      ' -i "' + this.cameraDeviceID + '":"' + this.audioDeviceID + '"' +
      ' -c:v ' + this.videoCodec +
      ' -crf ' + this.recQuality +
      ' -preset ultrafast' +
      ' -r ' + this.getFramerate().toString() +
      ' -movflags +faststart ' + '"' + this.outputFilename() + '"'
    ]
    cmd = cmd.toString()
    console.log('ffmpeg cmd: ')
    console.log(cmd)
    this.isRecording = true
    exec(cmd,{maxBuffer: 2000 * 1024}, (error, stdout, stderr) => {
      if (error) {
        console.error(`exec error: ${error}`)
        alert('Recording stopped!')
        return
      }
      // console.log(`stdout: ${stdout}`);
       console.log(`stderr: ${stderr}`);
    })
  },
  this.stopRec = function () {
    exec('killall ffmpeg')
  }
}


// open data folder in finder
function openDataFolder() {
  dataFolder = savePath
  if (!fs.existsSync(dataFolder)) {
    mkdirp.sync(dataFolder)
  }
  shell.showItemInFolder(dataFolder)
}


// play audio file using lowLag API
function playAudio(fileToPlay) {
  lowLag.load(fileToPlay);
  lowLag.play(fileToPlay);
}


// get timestamp (milliseconds since file loaded)
function getTime() {
  return performance.now()
}


// read csv file. This is how experiments will be controlled, query files to show, etc.
function readCSV(filename){
  var csv = fs.readFileSync(filename)
  var stim = csvsync.parse(csv, {
    skipHeader: false,
    returnObject: true
  })
  //var stim = csvReader(filename)
  console.log(stim)
  return stim
  //stim = readCSV(myfile)
  //console.log(stim)
  //var myfile = __dirname+'/experiments/pnt/assets/txt/pntstim.csv'
}



// remove all child elements from a div, here the convention will be to
// remove the elements from "contentDiv" after a trial
function clearScreen() {
  while (content.hasChildNodes())
  content.removeChild(content.lastChild)
}


// show text instructions on screen
function showBrokenWindowInstructions(txt) {
  clearScreen()
  rec.startRec()
  var textDiv = document.createElement("div")
  textDiv.style.textAlign = 'center'
  var p = document.createElement("p")
  //var txtNode = document.createTextNode(txt)
  //p.appendChild(txtNode)
  p.innerHTML = txt
  textDiv.appendChild(p)
  var lineBreak = document.createElement("br")
  var btnDiv = document.createElement("div")
  var startBtn = document.createElement("button")
  var startBtnTxt = document.createTextNode("Start")
  startBtn.appendChild(startBtnTxt)
  startBtn.className = 'startBtn'
  startBtn.onclick = showBrokenWindowImg
  btnDiv.appendChild(startBtn)
  content.appendChild(textDiv)
  content.appendChild(lineBreak)
  content.appendChild(btnDiv)
  return getTime()
}



function showPicnicSceneInstructions(txt) {
  clearScreen()
  rec.startRec()
  var textDiv = document.createElement("div")
  textDiv.style.textAlign = 'center'
  var p = document.createElement("p")
  //var txtNode = document.createTextNode(txt)
  //p.appendChild(txtNode)
  p.innerHTML = txt
  textDiv.appendChild(p)
  var lineBreak = document.createElement("br")
  var btnDiv = document.createElement("div")
  var startBtn = document.createElement("button")
  var startBtnTxt = document.createTextNode("Start")
  startBtn.appendChild(startBtnTxt)
  startBtn.className = 'startBtn'
  startBtn.onclick = showPicnicSceneImg
  btnDiv.appendChild(startBtn)
  content.appendChild(textDiv)
  content.appendChild(lineBreak)
  content.appendChild(btnDiv)
  return getTime()
}



function showPbjInstructions(txt) {
  clearScreen()
  rec.startRec()
  var textDiv = document.createElement("div")
  textDiv.style.textAlign = 'center'
  var p = document.createElement("p")
  //var txtNode = document.createTextNode(txt)
  //p.appendChild(txtNode)
  p.innerHTML = txt
  textDiv.appendChild(p)
  var lineBreak = document.createElement("br")
  var btnDiv = document.createElement("div")
  var startBtn = document.createElement("button")
  var startBtnTxt = document.createTextNode("Start")
  startBtn.appendChild(startBtnTxt)
  startBtn.className = 'startBtn'
  startBtn.onclick = showPbjImg
  btnDiv.appendChild(startBtn)
  content.appendChild(textDiv)
  content.appendChild(lineBreak)
  content.appendChild(btnDiv)
  return getTime()
}



function showCinderellaStoryInstructions(txt) {
  clearScreen()
  var textDiv = document.createElement("div")
  textDiv.style.textAlign = 'center'
  var p = document.createElement("p")
  //var txtNode = document.createTextNode(txt)
  //p.appendChild(txtNode)
  p.innerHTML = txt
  textDiv.appendChild(p)
  var lineBreak = document.createElement("br")
  var btnDiv = document.createElement("div")
  var startBtn = document.createElement("button")
  var startBtnTxt = document.createTextNode("Start")
  startBtn.appendChild(startBtnTxt)
  startBtn.className = 'startBtn'
  startBtn.onclick = function () {
    cinderellaTimeoutID = setTimeout(clearScreenAndStopRecording, cinderellaTimeoutTime)
    showCinderellaImg()
  }
  btnDiv.appendChild(startBtn)
  content.appendChild(textDiv)
  content.appendChild(lineBreak)
  content.appendChild(btnDiv)
  return getTime()
}



function showPbjImg() {
  clearScreen()
  var imageEl = document.createElement("img")
  imageEl.src = pbjImg
  content.appendChild(imageEl)
  clearTimeout(pbjTimeoutID)
  pbjTimeoutID = setTimeout(clearScreenAndStopRecording, pbjTimeoutTime)
  return getTime()
}



function showPicnicSceneImg() {
  clearScreen()
  var imageEl = document.createElement("img")
  imageEl.src = picnicSceneImg
  content.appendChild(imageEl)
  clearTimeout(picnicSceneTimeoutID)
  picnicSceneTimeoutID = setTimeout(clearScreenAndStopRecording, picnicSceneTimeoutTime)
  return getTime()
}



function showBrokenWindowImg() {
  clearScreen()
  var imageEl = document.createElement("img")
  imageEl.src = brokenWindowImg
  content.appendChild(imageEl)
  clearTimeout(brokenWindowTimeoutID)
  brokenWindowTimeoutID = setTimeout(clearScreenAndStopRecording, brokenWindowTimeoutTime)
  return getTime()
}



function showCinderellaImg() {
  if (!cinderellaStartHasBeenClicked) {
    cinderellaStartHasBeenClicked = true
  }
  clearScreen()
  if (cinderellaImgIdx <= maxNumCinderellaImgs-1) {
    var imageEl = document.createElement("img")
    imageEl.src = path.join(cinderellaImgFolder, cinderellaImgs[cinderellaImgIdx])
    content.appendChild(imageEl)
    return getTime()
  } else {
    var textDiv = document.createElement("div")
    textDiv.style.textAlign = 'center'
    var p = document.createElement("p")
    var txtNode = document.createTextNode("That was the last picture!")
    p.appendChild(txtNode)
    textDiv.appendChild(p)
    var lineBreak = document.createElement("br")
    var btnDiv = document.createElement("div")
    var cinderellaBtn = document.createElement("button")
    var cinderellaBtnTxt = document.createTextNode("Tell the story")
    cinderellaBtn.appendChild(cinderellaBtnTxt)
    cinderellaBtn.onclick = startCinderellaRecording
    btnDiv.appendChild(cinderellaBtn)
    content.appendChild(textDiv)
    content.appendChild(lineBreak)
    content.appendChild(btnDiv)
  }
}



function startCinderellaRecording() {
  clearScreen()
  var textDiv = document.createElement("div")
  textDiv.style.textAlign = 'center'
  var p = document.createElement("p")
  var txtNode = document.createTextNode("Tell the story of Cinderella without the pictures.")
  p.appendChild(txtNode)
  textDiv.appendChild(p)
  var lineBreak = document.createElement("br")
  var btnDiv = document.createElement("div")
  var cinderellaFinishBtn = document.createElement("button")
  var cinderellaFinishBtnTxt = document.createTextNode("Click to finish")
  cinderellaFinishBtn.appendChild(cinderellaFinishBtnTxt)
  cinderellaFinishBtn.onclick = stopRecordingAndShowNav
  btnDiv.appendChild(cinderellaFinishBtn)
  content.appendChild(textDiv)
  content.appendChild(lineBreak)
  content.appendChild(btnDiv)
  stopWebCamPreview()
  rec.startRec()
  cinderellaRecordingHasStarted = true
}


function clearAllTimeouts() {
  clearTimeout(picnicSceneTimeoutID)
  clearTimeout(brokenWindowTimeoutID)
  clearTimeout(pbjTimeoutID)
  clearTimeout(cinderellaTimeoutID)
}



function stopRecordingAndShowNav() {
  clearScreen()
  rec.stopRec()
  openNav()
}



function clearScreenAndStopRecording() {
  clearScreen()
  rec.stopRec()
  openNav()
  clearAllTimeouts()
}



// load experiment module js file. All experiments are written in js, no separate html file
function loadJS (ID) {
  if (!document.getElementById(ID +'JS')) {
    expDir = path.join(__dirname, '/experiments/', ID, path.sep)
    scrElement = document.createElement("script")
    scrElement.type = "application/javascript"
    scrElement.src = expDir + ID + '.js'
    scrElement.id = ID + 'JS'
    document.body.appendChild(scrElement)
    console.log('loaded: ', scrElement.src)
    //might need to wait for scrElement.onload event -- test this
    //http://stackoverflow.com/a/38834971/3280952
  }
}


// unload js at the end of experiment run
function unloadJS (ID) {
  if (document.getElementById(ID +'JS')) {
    scrElement = document.getElementById(ID +'JS')
    document.body.removeChild(scrElement)
    console.log('removed: ', ID +'JS')
  }
}


// wait for time (in ms) and then run the supplied function.
// for now, the supplied function can only have one input variable.
// this WILL HANG the gui
function waitThenDoSync(ms, doneWaitingCallback, arg){
   var start = performance.now()
   var end = start;
   while(end < start + ms) {
     end = performance.now()
  }
  if (arg !== undefined) {
    doneWaitingCallback(arg)
  } else {
    doneWaitingCallback()
  }
}


// wait for time (in ms) and then run the supplied function.
// for now, the supplied function can only have one input variable. (this does not hang gui)
function waitThenDoAsync (ms, doneWaitingCallback, arg) {
  start = performance.now()
  setTimeout(function () {
    if (arg !== undefined) {
      doneWaitingCallback(arg)
    } else {
      doneWaitingCallback()
    }
    end = performance.now()
    console.log('Actual waitThenDo() time: ', end - start)
  }, ms)
}


 // keys object for storing keypress information
var keys = {
  key : '',
  time : 0,
  rt: 0,
  specialKeys: [' ', 'Enter', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Shift', 'Tab', 'BackSpace'],
  alphaNumericKeys: 'abcdefghijklmnopqrstuvwxyz1234567890'.split(''), // inspired by: http://stackoverflow.com/a/31755504/3280952
  whiteList: function () {
    return this.alphaNumericKeys.concat(this.specialKeys)
  },
  blackList: [],
  isAllowed: function () {
    idx = this.whiteList().indexOf(this.key)
    var val = false
    if (idx > 0) {
      val = true
    } else {
      val = false
    }
    return val
  }
}


// experiment object for storing session parameters, etc.
function experiment(name) {
  this.beginTime= 0,
  this.endTime= 0,
  this.duration= 0,
  this.name= name,
  this.rootpath= '',
  this.mediapath= '',
  this.getDuration = function () {
    return this.endTime - this.beginTime
  },
  this.setBeginTime = function() {
    this.beginTime = performance.now()
  },
  this.setEndTime = function () {
    this.endTime = performance.now()
  },
  this.getMediaPath = function () {
    this.mediapath = path.join(__dirname, '/assets/')
    return this.mediapath
  },
  this.getRootPath = function () {
    this.rootpath = path.join(__dirname,'/')
    return this.rootpath
  }
}



// update keys object when a keydown event is detected
function updateKeys() {
  // gets called from: document.addEventListener('keydown', updateKeys);
  keys.key = event.key
  keys.time = performance.now() // gives ms
  keys.rt = 0
  console.log("key: " + keys.key)
  if (keys.key === 'ArrowRight') {
    if (assessment === 'Cinderella') {
      if (!cinderellaRecordingHasStarted) {
        cinderellaImgIdx += 1
        if (cinderellaImgIdx > maxNumCinderellaImgs) {
          cinderellaImgIdx = maxNumCinderellaImgs
        }
        showCinderellaImg()
      }
    }
  }
  if (keys.key === 'ArrowLeft') {
    if (assessment === 'Cinderella') {
      if (!cinderellaRecordingHasStarted) {
        cinderellaImgIdx -= 1
        if (cinderellaImgIdx < 0) {
          cinderellaImgIdx = 0
        }
        showCinderellaImg()
      }
    }
  }
}


// store state of navigation pane
var nav = {
  hidden: false
}


// open navigation pane
function openNav() {
    document.getElementById("navPanel").style.width = "150px"
    document.getElementById("contentDiv").style.marginLeft = "150px"
    document.body.style.backgroundColor = "rgba(0,0,0,0.3)"
    if (document.getElementById("imageElement")) {
      document.getElementById("imageElement").style.opacity = "0.1";
    }
    document.getElementById("closeNavBtn").innerHTML = "&times;"
}


// close navigation pane
function closeNav() {
    document.getElementById("navPanel").style.width = "0px";
    document.getElementById("contentDiv").style.marginLeft= "0px";
    document.getElementById("contentDiv").style.width= "100%";
    document.body.style.backgroundColor = "white";
    //document.getElementById("menuBtn").innerHTML = "&#9776;"
    if (document.getElementById("imageElement")) {
      document.getElementById("imageElement").style.opacity = "1";
    }
}


// toggle navigation pane, detect if hidden or not
function toggleNav() {
  if (nav.hidden) {
    openNav()
    nav.hidden = false
  } else {
    closeNav()
    nav.hidden = true
  }
}


// check if key that was pressed was the escape key or q. Quits experiment immediately
function checkForEscape() {
  key = event.key
  if (key === "Escape" || key=== "q") {
    console.log("Escape was pressed")
    clearAllTimeouts()
    cinderellaImgIdx = 0
    cinderellaRecordingHasStarted = false
    openNav()
    nav.hidden = false
    // unloadJS(exp.name)
    clearScreen()
    rec.stopRec()
  }
}

function getStarted() {
  var subjID = document.getElementById("subjID").value.trim()
  var sessID = document.getElementById("sessID").value.trim()
  assessment = document.getElementById("assessmentID").value.trim()
  console.log("assessment chosen: ", assessment)
  if (subjID === '' || sessID === '' || assessment === '') {
    console.log ('subject and/or session is blank')
    alert('Participant field or session field is blank!')
  } else {
    console.log ('subject is: ', subjID)
    console.log('session is: ', sessID)
    stopWebCamPreview()
    closeNav()
    clearAllTimeouts()
    if (assessment === 'BrokenWindow') {
      showBrokenWindowInstructions(brokenWindowInstructions)
    } else if (assessment === 'PicD') {
      showPicnicSceneInstructions(picnicSceneInstructions)
    } else if (assessment === 'PBJ') {
      showPbjInstructions(pbjInstructions)
    } else if (assessment === 'Cinderella') {
      showCinderellaStoryInstructions(cinderellaStoryInstructions)
    }
    //showInstructions(instructions)
  }
}


function showNextTrial() {
  clearTimeout(trialTimeoutID)
  closeNav()
  clearScreen()
  t += 1
  if (t > maxTrials) {
    clearScreen()
    t = maxTrials+1
    return false
  }
  picNum.value = t
  var img = document.createElement("img")
  img.src = path.join(exp.mediapath, 'pics', trials[t].PictureName.trim() + '.png')
  playAudio(path.join(exp.mediapath, 'beep.wav'))
  content.appendChild(img)
  trialTimeoutID = setTimeout(showNextTrial, 1000 * timeoutTime)
  return getTime()
}


function showPreviousTrial() {
  clearTimeout(trialTimeoutID)
  closeNav()
  t -= 1
  if (t < 0) {
    t=0
  }
  picNum.value = t
  clearScreen()
  var img = document.createElement("img")
  img.src = path.join(exp.mediapath, 'pics', trials[t].PictureName.trim() + '.png')
  playAudio(path.join(exp.mediapath, 'beep.wav'))
  content.appendChild(img)
  trialTimeoutID = setTimeout(showNextTrial, 1000 * timeoutTime)
  return getTime()
}




// event listeners that are active for the life of the application
document.addEventListener('keyup', checkForEscape)
document.addEventListener('keyup', updateKeys)