How to read, parse and output content from a csv file in jsPsych

[memonji]

Hello! :)

I am writing a script for a behavioural cognitive science experiment, presenting chunks of word pairs auditorially and asking users to give keyboard feedbacks about the most similar and most different pairs between the ones inside each chunk.
I am using JsPsych 7.3.4 version.

I am trying to read a csv file, which has this format:

The table has 12769 rows in total, and each subject (corresponding to a subj_ID in the Participant_ID column) corresponds to 399 rows.

After reading (and parsing) the file, I need to present auditorially 399 chunks of 4 words pairs to each subject. Then, ask the user/subject to give 2 keyboard responses after each chunk of 4 pairs. Each chunk is corresponding to one row in the csv file, where the 'options' columns contain the items that constitute the words which should be presented. Each word is corresponding to an audio file inside the project folder using a mapping object.

Everything works in the browser console (the arrays objects are outputted as they should) but the audio are not played. Can you spot which is the issue?
I've put extra console.log to try to debug. And an example_two trial at the end to check for paths validity and timeline work-out.

### ### ### ### ### ### ### ### ###

`

<title>My experiment</title> <script src="js/dist/jspsych.js"></script> <script src="js/dist/plugin-html-keyboard-response.js"></script> <script src="js/dist/plugin-audio-keyboard-response.js"></script> <script src="js/dist/plugin-html-button-response.js"></script> <script src="js/dist/plugin-call-function.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> <script>

var jsPsych = initJsPsych({
    use_webaudio: false,
    on_close: function() {},
    show_progress_bar: true,
});

var timeline = [];

var start_button = {
    type: jsPsychHtmlButtonResponse,
    stimulus: "Clicchi il bottone qua sotto per iniziare l'esperimento",
    choices: ['Inizia'],
    data: { phase: 'start' },
};
timeline.push(start_button);

var official_stimuli_mapping = [
    {word: 'piazza', audio: '../dynamic_script/audio/stimuli/piazza.mp3'},
    {word: 'colore', audio: '../dynamic_script/audio/stimuli/colore.mp3'},
    {word: 'pennello', audio: '../dynamic_script/audio/stimuli/pennello.mp3'},
    {word: 'albero', audio: '../dynamic_script/audio/stimuli/albero.mp3'},
    {word: 'vita', audio: '../dynamic_script/audio/stimuli/vita.mp3'},
    {word: 'erba', audio: '../dynamic_script/audio/stimuli/erba.mp3'},
    {word: 'sorella', audio: '../dynamic_script/audio/stimuli/sorella.mp3'},
    {word: 'quadro', audio: '../dynamic_script/audio/stimuli/quadro.mp3'},
    {word: 'persona', audio: '../dynamic_script/audio/stimuli/persona.mp3'},
    {word: 'teatro', audio: '../dynamic_script/audio/stimuli/teatro.mp3'},
    {word: 'poltrona', audio: '../dynamic_script/audio/stimuli/poltrona.mp3'},
    {word: 'pineta', audio: '../dynamic_script/audio/stimuli/pineta.mp3'},
    {word: 'castello', audio: '../dynamic_script/audio/stimuli/castello.mp3'},
    {word: 'bicchiere', audio: '../dynamic_script/audio/stimuli/bicchiere.mp3'},
    {word: 'birra', audio: '../dynamic_script/audio/stimuli/birra.mp3'},
    {word: 'treno', audio: '../dynamic_script/audio/stimuli/treno.mp3'},
    {word: 'macchina', audio: '../dynamic_script/audio/stimuli/macchina.mp3'},
    {word: 'verde', audio: '../dynamic_script/audio/stimuli/verde.mp3'},
    {word: 'speranza', audio: '../dynamic_script/audio/stimuli/speranza.mp3'},
    {word: 'nipote', audio: '../dynamic_script/audio/stimuli/nipote.mp3'},
    {word: 'temporale', audio: '../dynamic_script/audio/stimuli/temporale.mp3'},
    {word: 'acqua', audio: '../dynamic_script/audio/stimuli/acqua.mp3'},
    {word: 'bolla', audio: '../dynamic_script/audio/stimuli/bolla.mp3'},
    {word: 'foglia', audio: '../dynamic_script/audio/stimuli/foglia.mp3'},
    {word: 'maestro', audio: '../dynamic_script/audio/stimuli/maestro.mp3'},
    {word: 'scuola', audio: '../dynamic_script/audio/stimuli/scuola.mp3'},
    {word: 'arte', audio: '../dynamic_script/audio/stimuli/arte.mp3'},
    {word: 'tetto', audio: '../dynamic_script/audio/stimuli/tetto.mp3'},
    {word: 'aquila', audio: '../dynamic_script/audio/stimuli/aquila.mp3'},
    {word: 'chitarra', audio: '../dynamic_script/audio/stimuli/chitarra.mp3'},
    {word: 'azzurro', audio: '../dynamic_script/audio/stimuli/azzurro.mp3'},
    {word: 'bagno', audio: '../dynamic_script/audio/stimuli/bagno.mp3'},
    {word: 'occhiali', audio: '../dynamic_script/audio/stimuli/occhiali.mp3'},
    {word: 'cravatta', audio: '../dynamic_script/audio/stimuli/cravatta.mp3'},
    {word: 'guanto', audio: '../dynamic_script/audio/stimuli/guanto.mp3'},
    {word: 'campagna', audio: '../dynamic_script/audio/stimuli/campagna.mp3'},
    {word: 'agricoltura', audio: '../dynamic_script/audio/stimuli/agricoltura.mp3'},
    {word: 'montagna', audio: '../dynamic_script/audio/stimuli/montagna.mp3'},
    {word: 'orizzonte', audio: '../dynamic_script/audio/stimuli/orizzonte.mp3'},
    {word: 'ombra', audio: '../dynamic_script/audio/stimuli/ombra.mp3'},
    {word: 'tasca', audio: '../dynamic_script/audio/stimuli/tasca.mp3'},
    {word: 'pecora', audio: '../dynamic_script/audio/stimuli/pecora.mp3'},
    {word: 'maglione', audio: '../dynamic_script/audio/stimuli/maglione.mp3'},
    {word: 'valigia', audio: '../dynamic_script/audio/stimuli/valigia.mp3'},
    {word: 'grano', audio: '../dynamic_script/audio/stimuli/grano.mp3'},
    {word: 'rotella', audio: '../dynamic_script/audio/stimuli/rotella.mp3'},
    {word: 'zaino', audio: '../dynamic_script/audio/stimuli/zaino.mp3'},
    {word: 'elettrico', audio: '../dynamic_script/audio/stimuli/elettrico.mp3'},
    {word: 'computer', audio: '../dynamic_script/audio/stimuli/computer.mp3'},
    {word: 'irrigazione', audio: '../dynamic_script/audio/stimuli/irrigazione.mp3'},
    {word: 'vasca', audio: '../dynamic_script/audio/stimuli/vasca.mp3'},
    {word: 'fienile', audio: '../dynamic_script/audio/stimuli/fienile.mp3'},
    {word: 'sedile', audio: '../dynamic_script/audio/stimuli/sedile.mp3'},
    {word: 'nonno', audio: '../dynamic_script/audio/stimuli/nonno.mp3'},
    {word: 'cioccolato', audio: '../dynamic_script/audio/stimuli/cioccolato.mp3'},
    {word: 'corda', audio: '../dynamic_script/audio/stimuli/corda.mp3'},
    {word: 'contadina', audio: '../dynamic_script/audio/stimuli/contadina.mp3'},
];

function readTextFile(file, subjectID, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    console.log("Emma");
    rawFile.onreadystatechange = function () {
        console.log("Emma2", rawFile);
        if (rawFile.readyState === 4 && (rawFile.status === 200 || rawFile.status === 0)) {
            var csvData = rawFile.responseText;
            console.log("Emma");
            console.log("DATA", csvData);
            var processedData = [];
            Papa.parse(csvData, {
                header: true,
                skipEmptyLines: true,
                complete: function (results) {
                    console.log("Papa parsing complete");
                    console.log("DATA", csvData);
                    results.data.forEach(row => {
                        const currentSubjectID = row["Participant_ID"];
                        if (currentSubjectID === subjectID) {
                            var stimuliChunk = [];
                            const options = [
                                row["option1"], row["option2"], row["option3"], row["option4"],
                            ];
                            console.log('options', options);
                            const flattenedOptions = options.flat();
                            for (let i = 0; i < flattenedOptions.length; i += 4) {
                                if (i + 3 < flattenedOptions.length) {
                                    const pair1 = flattenedOptions[i].split(',').map(option => option.trim());
                                    const pair2 = flattenedOptions[i + 1].split(',').map(option => option.trim());
                                    const pair3 = flattenedOptions[i + 2].split(',').map(option => option.trim());
                                    const pair4 = flattenedOptions[i + 3].split(',').map(option => option.trim());
                                    if (pair1.length === 2 && pair2.length === 2 && pair3.length === 2 && pair4.length === 2) {
                                        stimuliChunk.push([
                                            [pair1[0], pair1[1]],
                                            [pair2[0], pair2[1]],
                                            [pair3[0], pair3[1]],
                                            [pair4[0], pair4[1]]
                                        ]);
                                    } else {
                                        console.log('Difficulty with pairs');
                                    }
                                }
                            }
                            if (stimuliChunk[0].length === 4) {
                                processedData.push(stimuliChunk[0]);
                            } else {
                                console.log('Not enough pairs for stimuliChunk');
                            }
                        }
                    });
                    if (processedData.length > 0) {
                        console.log('Processed data ready');
                        callback(processedData);
                    } else if (stimuliChunk.length > 0) {
                        console.log('Watch out: some stimuli remained outside');
                    } else {
                        console.log('No processed data or stimuliChunk');
                    }
                }
            });
        }
    }
    rawFile.send(null);
}

function presentAndProcessStimuli(processedData) {
    // var stimuliTimeline = []
    processedData.forEach(stimuliChunk => {
        console.log('for each presented stimuli', processedData, stimuliChunk)
        // var stimuli_trials = [];
        stimuliChunk.forEach(pair => {
            // var pair_timeline = [];
            pair.forEach((word, index) => {
                var mapping = official_stimuli_mapping.find(item => item.word === word);
                // stimulus: official_stimuli_mapping.find(item => item.word === "bolla").audio,
                if (mapping) {
                    console.log("Stimulus:", mapping.audio, 'word', word, 'index', index); // Check if audio stimulus path is correct
                    var word_presentation = {
                        type: jsPsychAudioKeyboardResponse,
                        stimulus: mapping.audio,
                        choices: "NO_KEYS",
                        trial_ends_after_audio: true,
                        post_trial_gap: index === 0 ? null : 900, // Longer gap after second word
                        on_finish: function (data) {
                            if (data.audio_playback_error) {
                                console.error("Audio playback error:", data.audio_playback_error);}}
                        };
                    timeline.push(word_presentation)
                    console.log("Word presented:", word_presentation.stimulus);
                } else {
                    console.error("Mapping not found for word:", word);
                }
            });
            // stimuli_trials.push(pair_timeline);
        });

        var response = {
            timeline: [
                {
                    type: jsPsychAudioKeyboardResponse,
                    stimulus: '../dynamic_script/audio/sounds/separation_sound.mp3',
                    choices: ["1", "2", "3", "4"],
                    response_ends_trial: true,
                    post_trial_gap: 900,
                    on_finish: function (data) {
                        if (data.audio_playback_error) {
                            console.error("Audio playback error:", data.audio_playback_error);
                        }
                    }
                },
                {
                    type: jsPsychAudioKeyboardResponse,
                    stimulus: '../dynamic_script/audio/sounds/separation_sound.mp3',
                    choices: ["1", "2", "3", "4"],
                    response_ends_trial: true,
                    post_trial_gap: 1000,
                    on_finish: function (data) {
                        if (data.audio_playback_error) {
                            console.error("Audio playback error:", data.audio_playback_error);
                        }
                    }
                },
            ]
        };
        console.log("RESPONSE:");
        timeline.push(response);
        // timeline_read.push(pair_timeline);
    });
    // timeline.push(stimuliTimeline);
    // Run the timeline_read after processing
}

readTextFile("../stimuli_selection/files/subjIDs_trials_dataframe.csv", "sbj_1", function(processedData) {
    presentAndProcessStimuli(processedData);
});
var example_two = {
    type: jsPsychAudioKeyboardResponse,
    stimulus: official_stimuli_mapping.find(item => item.word === "bolla").audio,
    choices: "NO_KEYS",
    trial_ends_after_audio: true,
    post_trial_gap: 1000
};

timeline.push(example_two);
jsPsych.run(timeline);
console.log("Loaded timeline:", timeline);

official_stimuli_mapping.forEach(item => {
    console.log("Stimulus:", item.audio);
});
// Run the main timeline

</script> ` ### ### ### ### ### ### ### ### ### Thank you so much for your help! :)

[Shaobin-Jiang]

Your two scripts have different audio paths, with ../dynamic_script in the first one and it being absent in the second. If you are using the same html file for the experiment, all relative paths in a web page should be relative to the path of the html file, so the paths in the two scripts should be identical.

[Shaobin-Jiang]

So what exactly is your project structure now? Something like this below...

📂 MyExperiment
--  📂 pages
----  📄 index.html (entrance file to your page)
--  📂 dynamic_script
----  📂 audio
------  📂 stimuli
--------  📄 piazza.mp3
--------  📄 ...
--  ...

where your main html file is stored in some secondary level directory (like pages above) , while dynamic_script is at the same level with that directory? 'cause I cannot figure out where the .. in your path comes from if otherwise.

[memonji]

My project structure is something like:

📂 MyExperiment
--- 📂 dynamic_script
------- 📂 audio
----------- 📂 stimuli
---------------- 📄 piazza.mp3
---------------- 📄 ...
------📄 index.html (where my script is, it is inside dynamic_script/ folder) directory)
-- 📂stimuli_selection
-------📂files
----------📄 subjIDs_trials_dataframe.csv (which is the file I'm trying to read)

index.html is inside MyExperiment/dynamic_script/prova.html

subjIDs_trials_dataframe.csv is inside MyExperiment/stimuli_selection/files/subjIDs_trials_dataframe.csv

audio files are inside MyExperiment/dynamic_script/audio/stimuli/piazza.mp3

[Shaobin-Jiang]

Then you ought to be setting the path to ./audio/stimuli/piazza.mp3, like the second piece of code you originally provided. As I said, the path should be relative to the html file. That would explain why your second piece of code worked as there you had the correct path.

[memonji]

Unfortunately it is not working either with the changes paths to ./audio/stimuli/ :(

[Shaobin-Jiang]

You mind uploading your project to a repo? There could be a lot of reasons why your code is not working and I might need to take a closer look at the entire project.