FreeAssociation

A demo of the free association task used in Bellana, Mahabal & Honey (2022) Narrative thinking lingers in spontaneous thought

by MemoryandMeaningLab

HTML

<!--TO START DEMO 1) CLICK THE RUN BUTTON 2) MOUSE OVER THE CONS=OLE WINDOW 3)  FOLLOW TASK INSTRUCTIONS-->


<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <style>
  #freeassociation {
    margin: 0 auto;
    margin-top: 0;
    width: 800px;
    font-size: 100%;
  }

  fa {
    text-align: center;
    font-size: 20pt;
    line-height: 1.1em;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .responseBox
  {
    border-color:#FFFFFF;
    background-color: transparent;
    border: 0px solid;
    height: 40px;
    width: 160px;
    resize: none;
    text-align: center;
    font-size: 20pt;
  }

  textarea {
   font-family: inherit;
   font-size: inherit;
}
  </style>
</head>
<body>

<fa>
  <div id="cue" class="stim-div">
  <p id = "cueword">CUE</p>
  </div>
  <div id="response" class="response-div">
  <p><textarea type=text name="question" id="qinput" class="responseBox" style="border: none"></textarea></p>
  <input type="hidden" id="qstore">
  </div>
</fa>

<script>
  // Define necessary variables
  let $start_time_1 = new Date().getTime();
  let $word_count_1 = 0;
  let $key_id_array_1 = [];
  let $key_code_array_1 = [];
  let $key_onset_array_1 = [];

  // Add event listener
  document.addEventListener('keydown', FA1_keyRecorder);

  // Autofocus on textbox
  document.getElementById("qinput").focus();

  // Any click onscreen autofocuses to textbox
  $(function(){
    $("html").click(function(){
      $("#qinput").focus();
    });
  });

  // Update cue based on variable listed above
  document.getElementById("cueword").innerHTML = "Enter a word to begin!"
  setTimeout(function () {$(".stim-div").fadeTo(500,0)}, 3000); // set a function where the cue word disappears after a delay (note: fadeTo has its own delay which refers to how long the fading animation takes to complete)
  // cue delay was set to 3s for FIRST cue only...

JavaScript

//Type a word and press enter. In this task, participants were asked to type whatever words came to mind, as they came to mind, for 5-minutes, before and after reading a story.