add jsPsych to Qualtrics

Question

Does anyone have experience with adding a jsPsych script to Qualtrics?

I've added my script, uploaded all jsPsych files to the library and added custom CSS. However, Qualtrics does not display any content.

All help would be much appreciated!

This is what I added to CSS:

    /* Place your CSS here */

<script src=src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>var jq=$.noConflict();</script>

<script src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_01A5buvxBufxvp3"></script> /*jsPsych.js*/

<script src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_5yDv98SErjpRRm5"></script>  /*button-response.js*/

<script src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_74KDIb0V809QD9X"></script> /*instructions.js*/
<link "https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_cYYWxwGV5sdgz5z"></link> /*jsPsych.css*/

This is my code:

    Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your Javascript Below This Line*/

    var jq = jQuery.noConflict();

    var responseIdFromSessionID = jq('#SessionID').val().replace("SS_", "R_");
    var qthis = this;
    jq('#Buttons').css("display", "none");

     var n_trials = 7;

    var stimuli = ["https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_3Qnr3uVukK85P0h",
        "https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_3lsvgjbt2x9JclD",
        "https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_3mbCfgXqITvhJOt",
        "https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_bskM2MfAWtulyfP",
        "https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_3lacaZ04OqpDxOZ",
        "https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_558DnDMhvbPtY1v",
        "https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_eA8Pi8jWmho4LFb",
    ];


                   var welkom = "<div id='instructions' style='text-align:center;'><p>Welkom bij onderdeel 4. " +
        "Klik op verder om te beginnen </p><br/><p>";

                   var instructie1 = "<div id='instructions' style='text-align:center;'><p>Je krijgt zo 5 filmpjes te zien.</p>"+
    "<p>Stel je voor dat je met de fiets de weg over wilt steken.</p>" +
    "<p>Geef telkens aan of de ruimte tussen 2 auto\'s groot genoeg is om veilig over te steken.</p>";


                   var instructie2 = "<div id='instructions' style='text-align:center;'><p>In het volgende filmpje krijg je uitleg.</p>"+
    "<p>Klik op verder om te beginnen.</p>"; 

                   var oefenen1 = {
  type: 'button-response',
  prompt: "<p class='center-content'>Geef telkens aan of het veilig is of onveilig om over te steken.</p>",
  stimulus: '<div class="center-content"><video preload autoplay width="840"><source src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_3Qnr3uVukK85P0h" type="video/mp4"></video></div>',
  choices:['veilig','onveilig'],
  timing_response:25000,
  is_html: true,
  response_ends_trial: false,
};
    var instructie3 = "<div id='instructions' style='text-align:center;'><p>Je mag nu eerst 1 keer oefenen.</p>"+
    "<p>Klik op verder om te beginnen.</p>"; 


            var oefenen2 = {
  type: 'button-response',
  prompt: "<p class='center-content'>Geef telkens aan of het veilig is of onveilig om over te steken.</p>",
  stimulus: '<div class="center-content"><video preload autoplay width="840"><source src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_3lsvgjbt2x9JclD" type="video/mp4"></video></div>',
  choices:['veilig','onveilig'],
  timing_response:15000,
  is_html: true,
  response_ends_trial: false,
};     

            var instructie4 = "<div id='instructions' style='text-align:center;'><p>Nu volgende de 5 filmpjes.</p>"+
    "<p>Let op, je moet nu in ieder filmpje meerdere keren kiezen.</p>"+
                "<p>Klik op verder om te beginnen.</p>";     

    var opgave1 = {
  type: 'button-response',
  prompt: "<p class='center-content'>Geef telkens aan of het veilig is of onveilig om over te steken.</p>",
  stimulus: '<div class="center-content"><video preload autoplay width="840"><source src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_3mbCfgXqITvhJOt" type="video/mp4"></video></div>',
  choices:['veilig','onveilig'],
  timing_response:33000,
  is_html: true,
  response_ends_trial: false,
};     
                var instructie5 = "<div id='instructions' style='text-align:center;'><p>Nog 4 te gaan.</p>"+
    "<p>Druk op volgende om te beginnen.</p>";


    var opgave2 = {
  type: 'button-response',
  prompt: "<p class='center-content'>Geef telkens aan of het veilig is of onveilig om over te steken.</p>",
  stimulus: '<div class="center-content"><video preload autoplay width="840"><source src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_bskM2MfAWtulyfP" type="video/mp4"></video></div>',
  choices:['veilig','onveilig'],
  timing_response:26000,
  is_html: true,
  response_ends_trial: false,
};     
    var instructie6 = "<div id='instructions' style='text-align:center;'><p>Nog 3 te gaan.</p>"+
    "<p>Druk op volgende om te beginnen.</p>";

    var opgave3 = {
  type: 'button-response',
  prompt: "<p class='center-content'>Geef telkens aan of het veilig is of onveilig om over te steken.</p>",
  stimulus: '<div class="center-content"><video preload autoplay width="840"><source src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_3lacaZ04OqpDxOZ" type="video/mp4"></video></div>',
  choices:['veilig','onveilig'],
  timing_response:37000,
  is_html: true,
  response_ends_trial: false,
};     
    var instructie7 = "<div id='instructions' style='text-align:center;'><p>Nog 2 te gaan.</p>"+
    "<p>Druk op volgende om te beginnen.</p>";

    var opgave4 = {
  type: 'button-response',
  prompt: "<p class='center-content'>Geef telkens aan of het veilig is of onveilig om over te steken.</p>",
  stimulus: '<div class="center-content"><video preload autoplay width="840"><source src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_558DnDMhvbPtY1v" type="video/mp4"></video></div>',
  choices:['veilig','onveilig'],
  timing_response:23000,
  is_html: true,
  response_ends_trial: false,
};  
    var instructie8 = "<div id='instructions' style='text-align:center;'><p>Nog 1 te gaan.</p>"+
    "<p>Druk op volgende om te beginnen.</p>";

    var opgave5 = {
  type: 'button-response',
  prompt: "<p class='center-content'>Geef telkens aan of het veilig is of onveilig om over te steken.</p>",
  stimulus: '<div class="center-content"><video preload autoplay width="840"><source src="https://utwentebs.eu.qualtrics.com/ControlPanel/File.php?F=F_eA8Pi8jWmho4LFb" type="video/mp4"></video></div>',
  choices:['veilig','onveilig'],
  timing_response:16000,
  is_html: true,
  response_ends_trial: false,
};  

    var einde = "<div id='instructions' style='text-align:center;'><p>Dit is het einde van het onderdeel.</p>"+
    "<p>Bedankt voor het meedoen.</p>";

    jsPsych.preloadImages(stimuli, start);

    function start() {
        jsPsych.init({
            display_element: jq('#jspsych_target'),
            experiment_structure: [welkom, instructie1, instructie2, oefenen1, instructie3, oefenen2, instructie4, opgave1, instructie5, opgave2, instructie6, opgave3, instructie7, opgave4, instructie8, opgave5, einde],
            on_finish: function(data) {
                //save the CSV data to the ResultOfFlanker embedded data field - creation of the Embedded field could also be done through the Qualtrics JS API
                Qualtrics.SurveyEngine.setEmbeddedData("experiment", jsPsych.dataAPI.dataAsCSV()); 
                // simulate click on Qualtrics "next" button, making use of the Qualtrics JS API
                qthis.clickNextButton();
            }
        });
    }


                   });

  [1]: https://i.stack.imgur.com/usaZR.png

script tags should be added to the header source, not the custom css — Anthony Rivas, Jun 17 '16 at 19:10
Hi Anthony, I've added the script tags to the header source as you suggested. But still no content is displayed. Do you have any more suggestions on how to fix the problem? Thanks! — Jessica Witvoet, Jun 18 '16 at 21:27
I am not very familiar with this library, I would need to see an example to even begin to debug. — Anthony Rivas, Jun 20 '16 at 16:59
Have you seen this: http://www.pvlv.org/2014/10/22/mturk-and-qualtrics/? — Josh, Jun 20 '16 at 18:55
Thanks for the suggestions. I've decided against adding my script to Qualtrics. The video stimuli I use take very long to upload in Qualtrics. — Jessica Witvoet, Jun 21 '16 at 17:51

add jsPsych to Qualtrics

0 Answers0