Incorporate the feedback received from the user in the previous trial as a prompt for the next

I am currently working on developing an experiment using the JSPsych JavaScript package. The main goal of my experiment is for participants to input a letter in a survey-text trial, and then have that same letter presented back to them as a stimulus in the following html-response trial.

One issue I am facing is finding a way to access the participant's input from the survey-text trial. My program structure is following the reaction time tutorial from the JSPsych website, where trials are created sequentially and pushed into a timeline array at the end of the code. This means that when the trials are defined, the participant has not inputted anything yet.

Below is the code snippet I am using. While testing the experiment in a browser, I have been able to access the data from the survey-text trial using 

JSON.parse(jsPsych.data.getLastTrialData().select('responses').values).favorite
. However, this code snippet produces an error: 
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
. This error occurs because, at the time the code is compiled, there is no previous trial data to retrieve.

let letter_display, letter_survey, test_procedure, timeline;
timeline = [];

letter_survey = {
    type: "survey-text",
    questions: [
        {prompt: "What is your favorite letter?", name:"favorite"}
                    ],
        }
timeline.push(letter_survey);

letter_display = {
    type: 'html-keyboard-response',
    stimulus: jsPsych.timelineVariable('stimulus'),
};

test_procedure = {
    timeline: [letter_display],
    timeline_variables: [{type:'html-keyboard-response', stimulus: JSON.parse(jsPsych.data.getLastTrialData().select('responses').values).favorite}]
};
timeline.push(test_procedure);

jsPsych.init({
    timeline: timeline
})
javascriptjspsych

Answer №1

I have successfully resolved the issue. The area of the code where the letter_display variable is initialized needs to be adjusted as shown below:

letter_display = {
    type: 'html-keyboard-response',
    stimulus: JSON.parse(jsPsych.data.getLastTrialData().select('responses').values).favorite
};
timeline.push(letter_display);

All code related to the test_procedure variable can be removed.

I have managed to get this working for a linear timeline, but not for a nested one. If anyone has a solution for a nested timeline, please share it as a response.

On a related note: Using 

JSON.parse(jsPsych.data.get().filter( {trial_type: 'survey-text'} ).select('responses').values).favorite
can be applied more broadly to scenarios where the user input is not from the last trial.

Answer №2

Here is another approach to consider:

You can also utilize the on_start function within the trial. This function allows you to modify the stimulus or any other parameters of the trial based on the response from the previous trial.

letter_display = {
    type: 'html-keyboard-response',
    stimulus:''
    on_start:function(trial){
       trial.stimulus = jsPsych.data.getLastTrialData().select('responses').values.favorite
    }
};
timeline.push(letter_display);

(Note: If you do not assign the stimulus before the on_start function, it may still work but could result in error messages in the console)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to organize object properties based on the value of another property

Within my collection, I have an array of objects structured as shown below. [ {"rel_id": 1,"forward_flag": true,"asset_id":5,}, {"rel_id": 1,"forward_flag": true,"asset_id":8}, {"rel_id": 1,"forward_flag": false,"asset_id":3}, {"rel_id": 2,"forwar ...

javascriptjquery

Initiate the Html.BeginForm process in an asynchronous manner

Within my ASP.NET MVC 3 application, I am attempting to upload a file using the Html.BeginForm helper, as shown below: <% using (Html.BeginForm("ImportFile", "Home", new { someId = Id }, FormMethod.Post, new { enctype="multipart/form-data" } )) %> ...

javascriptjqueryasp.net-mvc-3callback

Javascript: regular expression to validate alphanumeric and special characters

Looking to create a regular expression for a string (company/organization name) with the following conditions: No leading or trailing spaces No double spaces in between Shouldn't allow only a single character (alphanumeric or whitelisted) Can start ...

javascriptregex

Tips for resolving the issue: 'Unhandled Promise Rejection: Error: Unable to resolve bare specifier "app.js" from http://localhost:3000/'

While delving into TypeScript, I have come across an error related to node modules. https://i.sstatic.net/IPx5A.png Upon clicking the anonymous function, it leads me to the following code snippet. https://i.sstatic.net/4U8dY.png <!DOCTYPE html> & ...

javascripttypescriptsystemjs

Steps for dynamically loading the correct pane without having to refresh the header, footer, or left navigation

Looking to create a web application using HTML, Bootstrap, and jQuery that includes a header, footer, left navigation, and right pane. The content of the right pane will be loaded from a separate HTML page based on what is clicked in the left navigation. ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

A guide on seamlessly incorporating FlotJs functionalities into a ReactJs application

Having trouble integrating Flot charts into React due to a '$.plot' is not a function error. Here's the code I'm using: Script tags Index.html <script src="dist/libs/js/jquery.min.js"></script> <script src="dist/libs/js ...

javascriptjqueryreactjsflot

Is it time to advance to the next input field when reaching the maxLength?

In my Vue form, I have designed a combined input field for entering a phone number for styling purposes. The issue I am facing is that the user needs to press the tab key to move to the next input field of the phone number. Is there a way to automaticall ...

javascripthtmlvue.jsnuxt.jsvuelidate

Tips for invoking C language code from JavaScript by using the js-ctypes extension in Firefox

I need assistance with developing a Firefox extension that requires calling native C code. Here is my C program code: #include<windows.h> int add(int a, int b) { return(a + b); } And here is my JavaScript code: var {Cu} = require('chrome ...

javascriptcfirefox-addonjsctypes

Is there a way to use JavaScript to import several custom fonts at once?

Is there a way to import a long list of custom fonts as icons using Javascript? I have been obtaining the font list from an API, but importing them one by one with pure CSS using @font-face is time-consuming and difficult to maintain. @font-face { fon ...

javascriptcssreactjsfontsfont-face

Juicer- Setting restrictions on the frequency of posts

How can I limit the number of posts displayed using the react-juicer-feed component? import { Feed } from 'react-juicer-feed'; const MyFeed = () => { return ( <Feed feedId="<feed-id>" perPage={3} /> ...

javascriptreactjsnext.js

"Navigate with ease using Material-UI's BottomNavigationItem and link

What is the best way to implement UI navigation using a React component? I am currently working with a <BottomNavigationItem /> component that renders as a <button>. How can I modify it to navigate to a specific URL? class FooterNavigation e ...

javascriptreactjstypescriptmaterial-designmaterial-ui

Distinguishing Response Headers in XMLHttpRequest and jQuery AJAX FunctionUniqueness:

Hello, I'm facing an issue that is not a duplicate. Here is the code snippet: var data = {'userId': window.cookie.get('userId'), 'sessionId': window.cookie.get('sessionId')} $.post(window.DbUrl + '/t ...

javascriptphpjquerynode.jsajax

After entering text manually, the textarea.append() function ceases to function properly

I've encountered a puzzling issue with a tiny fiddle I created: https://jsfiddle.net/wn7aLf3o/4/ The scenario is that clicking on 'append' should add an "X" to the textarea. It functions perfectly until I manually input some text in the te ...

javascriptjquery

Assigning controller variables within an ajax request

I'm new to AngularJS and I have a question about controller attributes. I've created an attribute called 'anuncio', which contains an array of objects as shown below: var anuncioModule = angular.module('anuncioModule',[]); a ...

javascriptangularjs

Issue with Remote Form in Rails: Encountering Syntax Error Due to Unexpected Token

I am trying to update a form: <%= form_for([@group, lesson], remote: true) do |f| %> <tr id='<%= lesson.id%>' > <td><%= f.text_field :time %></td> <td><%= f ...

javascriptruby-on-railsajax

Using ReactJS to send formData to an Express API and retrieving a JSON response

Attempting to have the ReactJS frontend send a username and password from a form to my express API via a proxy, with the intention of having the API return a JSON file containing a user id. While the proxy connection is working as expected, the issue arise ...

javascriptnode.jsreactjsexpressjsx

Custom value in Field for radio type in Redux form

Can anyone help me figure out how to input text into a radio field using Redux form? Here are the fields I am working with: <Field name={some.name1} value={'text1'} component={renderRadioElement} type="radio" /> <Field name= ...

javascriptreactjsreduxredux-form

Tips for sending an ID to a path link in React Js

Can anyone assist me in setting up a path for a component like this "/products?id=uniqueId" in my React Js Project? The unique id is retrieved from the database and varies depending on the product chosen. Below is an excerpt of my code: CodeSandbox App.j ...

javascriptreactjsreact-router

Chrome crashing due to toDataURL

Recently, I have been working on a Tile Renderer for three.js and so far, everything appears to be functioning correctly. The process is quite simple: a) It creates multiple cameras, b) Renders the scene using each camera c) Generates a 'toDataURL&a ...

javascriptcanvashyperlinkthree.jstodataurl

Leverage ngFor to loop through a "highly intricate" data structure

In my project, I have stored data in a JSON file structured as follows: { "name": { "source1": ____, "source2": ____, "source3": ____ }, "xcoord": { "source1": ____, "source2": ____, "source3": _ ...

javascriptarraysjsontypescriptangular