Enquiries of failures in loading external JS & CSS in Cognition.run #1684

TomCheung19 · 2021-03-28T08:35:28Z

TomCheung19
Mar 28, 2021

Hi all,

I would like to ask about the format of loading external JS & CSS in Cognition.run.

It is my first time to use Cognition.run as the platform of the online research. I have written the experiment with jsPsych in Visual Studio on local and it run well on local. Then I copied the code to the cognition.run and uploaded the JS & CSS as instructed. However, it seemed that JS & CSS were not correctly loaded and the experiment didn't work as expected, it showed a blank screen and the console of the webpage confirmed that. Meanwhile, the images and other stuffs were correctly loaded.

I would like to ask if someone could help me with some instructions or some other ways to show me the examples of the correct format to use the external JS & CSS in Cognition.run.

Thank you so much!

Here are the codes and the error report in Cognition.run.

<script src="jquery-3.6.0.min.js"></script> 
<script src="jspsych-xab.js"></script>
<script src="jspsych-two-initial-choice.js"></script>
<script src="jspsych-feedback-benev-1.js"></script>
<script src="jspsych-feedback-benev-2.js"></script>
<script src="jspsych-feedback-acond-1.js"></script>
<script src="jspsych-feedback-acond-2.js"></script>
<script src="jspsych-feedback-rand-1.js"></script>
<script src="jspsych-feedback-rand-2.js"></script>
<script src="jspsych-html.js"></script>
<script src="jspsych-button-response-ehp.js"></script>
<script src="additional-functions.js"></script>
<script src="jquery-ui.min.js"></script> //
<link href="jquery-ui.min.css" rel="stylesheet" type="text/css"></link>-->
<link href="jspsych.css" rel="stylesheet" type="text/css"></link>
    <style>

        .jspsych-button-response-button {
            height: 60px;
            width: 300px;
            font-size: 12px
        }
    </style>

Answered by becky-gilbert

Mar 28, 2021

In cognition.run, the code editor is just for JavaScript, not HTML. So you'll want to delete everything before var timeline (line 25), as well as any closing HTML tags at the end of your code. You can put the CSS in the style tags into a CSS file and then upload that in the upload JS/CSS section.
I hope this helps!

View full answer

becky-gilbert · 2021-03-28T16:02:11Z

becky-gilbert
Mar 28, 2021
Maintainer

In cognition.run, the code editor is just for JavaScript, not HTML. So you'll want to delete everything before var timeline (line 25), as well as any closing HTML tags at the end of your code. You can put the CSS in the style tags into a CSS file and then upload that in the upload JS/CSS section.
I hope this helps!

5 replies

TomCheung19 Mar 29, 2021
Author

I got it. Thank you so much! But how could I load a JS file in the JavaScript? I am a little bit confused. Could you please give me an example of format. For example, I want to load the external JS: 'jspsych-two-initial-choice.js'. Thanks!

becky-gilbert Mar 29, 2021
Maintainer

You don't need to load your JavaScript files in the main JavaScript editor - instead you can load them in the "External JS/CSS" section on the left side of the code editor.

python2020-maker Apr 26, 2021

Hi,

I pasted my script and uploaded additional JS and CSS files but it does not work. My codes are the following. From where should I remove the codes and do you have another solution to help it run? Or what is the common error when it does not work! the task is not ready yet!

<html>
  <head>
    <title>WM Digit Span</title>
    <script src="jspsych-6.0.4/jspsych.js"></script>
    <script src="jspsych-6.0.4/plugins/jspsych-html-keyboard-response.js"></script>
    <script src="jspsych-6.0.4/plugins/jspsych-digit-span-recall.js"></script>
    <script src="jspsych-6.0.4/plugins/jspsych-survey-text.js"></script>
    <script src="jspsych-6.0.4/plugins/jspsych-instructions.js"></script>
    <script src="jspsych-6.0.4/plugins/jspsych-fullscreen.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>
    <link href="jspsych-6.0.4/css/jspsych_digitspan.css" rel="stylesheet" type="text/css"></link>
  </head>
  <body></body>
  <script>

/*
    This is a web-based digit span working memory test.
    It is modelled after the forward digit span test described in Woods et al (2011) [https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2978794/].
    However, users can easily customize this test for their own purposes.
    Easily customizable variables have been listed below. For further changes to the test, knowledge of JavaScipt may be required.
    For smooth functioning of the test, make sure all the associated github files within the repository have been downloaded (especially the folder named 'jspsych-6.0.4').
    Results from this test will be automatically downloaded into the downloads folder of your desktop.
    For further details, please refer to the README.
*/


//----- CUSTOMIZABLE VARIABLES -----------------------------------------

  nTrials = 14 // number of trials in the test
  minSetSize = 3 // starting digit length
  stimuli_duration = 1000 // number of miliseconds to display each digit
  recall_duration = null // number of miliseconds to allow recall. If null, there is no time limit.
  file_name = null // file name for data file. if null, a default name consisting of the participant ID and a unique number is chosen.
  local = true // save the data file locally.
              // If this test is being run online (e.g., on MTurk), true will cause the file to be downloaded to the participant's computer.
              // If this test is on a server, and you wish to save the data file to that server, change this to false.
              // If changed to false, ensure that the php file (its in the directory!) and the empty "data" folder has also been appropriately uploaded to the server.
              // Incase of problems, feel free to contact me :)

//----------------------------------------------------------------------

  possibleNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]  //possible digits participants can get

  var selection = jsPsych.randomization.sampleWithoutReplacement(possibleNumbers, minSetSize)  //chooses random digits
  var selection_id = -1

  // keeps track of participant's scores:
  var nError = 0
  var highest_span_score = 0
  var consec_error_score = 0

  // first page. identifies participant for data storage
  var p_details = {
    type:"survey-text",
    questions: [{prompt: "Enter participant number, name, or ID"}],
    on_finish:function(){
      partN = jsPsych.data.get().last(1).values()[0].partNum
      partN = partN.replace(/['"]+/g,'')
//      console.log(partN[0])
    }
  }

// instruction page
var instructions = {
    type: 'instructions',
    pages: function(){
      pageOne = "<div style='font-size:20px;'><b>INSTRUCTIONS</b><br><br>This is the digit span task.<br><br>In this task, you will have to remember a sequence of numbers presented on the screen one after the other.<br>At the end of each trial, enter all the numbers into the onscreen number-pad in their correct order.<br><br><u>Example:</u> if the sequence is '7 4 5 1', enter '7 4 5 1' in this exact order.<br><br>You will now be given practice trials to help you understand the task.<br>Press 'Next' to start the practice trials.<br><br></div>"
      return [pageOne]
    },
    allow_backward: false,
    button_label_next: "Next",
    show_clickable_nav: true
  }

  var instructions_node = {
      type: 'instructions',
      pages: function(){
        pageOne = "<div style='font-size:20px;'>You have completed the practice trials. <br><br> If you have further questions about the task, ask the researcher now.<br> If you are clear about the task, click 'Next' to proceed to the main trials.<br><br></div>"
        return [pageOne]
      },
      allow_backward: false,
      button_label_next: "Next",
      show_clickable_nav: true,
      on_finish: function(){
        minSetSize = 3
        selection = jsPsych.randomization.sampleWithoutReplacement(possibleNumbers, minSetSize)
      }
    }

var test_stimuli = {
  type: 'html-keyboard-response',
  stimulus: function(){
    selection_id+=1
    return '<div style="font-size:70px;">'+selection[selection_id]+'</div>'
  },
  choices: jsPsych.NO_KEYS,
  trial_duration: stimuli_duration,
  on_finish: function(){
    if (selection_id + 1 >=selection.length){
      jsPsych.endCurrentTimeline()
    }
  }
}

var recall = {
  type: 'digit-span-recall',
  correct_order: function(){
    return selection
  },
  trial_duration: recall_duration,
  on_finish: function(){
    acc = jsPsych.data.get().last(1).values()[0].accuracy;
    if (acc==1){
      if (highest_span_score < minSetSize){
        highest_span_score = minSetSize
        }
        minSetSize+=1
        nError = 0
    } else if (nError < 1) { // checks for number of consecutive errors
      nError += 1
    } else {
      if (consec_error_score < minSetSize){
        consec_error_score = minSetSize
      }
      minSetSize = Math.max( 3, minSetSize-1)
      }
    if (minSetSize<=8){ // bottom code prevents immediate repition of digits
      selection = jsPsych.randomization.sampleWithoutReplacement(possibleNumbers, minSetSize)
    } else {
      selection = jsPsych.randomization.sampleWithoutReplacement(possibleNumbers, 8)
      var extra = minSetSize-8
      var id = possibleNumbers.indexOf(selection[7])
      possibleNumbers.splice(id, 1);
      var extraNumbers= jsPsych.randomization.sampleWithoutReplacement(possibleNumbers, extra)
      selection = selection.concat(extraNumbers)
      possibleNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
    }
    selection_id = -1
  }
}

var feedback = {
  type: 'html-keyboard-response',
  stimulus: function(){
    var text = ""
    var accuracy = jsPsych.data.get().last(1).values()[0].accuracy
    if (accuracy==1){
      text += '<div style="font-size:35px; color:rgb(0 220 0)"><b>Correct</div>'
    } else {
      text += '<div style="font-size:35px; color:rgb(240 0 0)"><b>Incorrect</div>'
    }
    //text += '<div style="font-size:30px; color:rgb(0 0 0)"><br><br>New trial starting now.</div>'
    return text
  },
  choices: jsPsych.NO_KEYS,
  trial_duration: 1000
}

var conclusion = {
  type: 'html-keyboard-response',
  stimulus: function(){
    return '<div style="font-size:20px;">You have completed the task.<br>Thank you for your participation in this task.<br><br>Maximum number of digits recalled correctly was ' + highest_span_score +'.<br><br>Maximum number of digits reached before making two consecutive errors was ' +consec_error_score+'.<br><br>Please tell the Research Assistant you have completed the task.</div>'
},
  choices: jsPsych.NO_KEYS
//  trial_duration:1000
}

  var test_stack = {
    timeline: [test_stimuli],
    repetitions: 17
  }

  var test_procedure = {
    timeline: [test_stack, recall, feedback],
    repetitions: nTrials
  }

  var demo_procedure = {
    timeline: [test_stack, recall, feedback],
    repetitions: 3
  }

function saveData(filename, filedata){
      $.ajax({
            type:'post',
            cache: false,
            url: 'save_data.php', // this is the path to the above PHP script
            data: {filename: filename, filedata: filedata}
      });
};

var IDsub = Date.now()

var dataLog = {
 type: 'html-keyboard-response',
 stimulus: " ",
 trial_duration: 100,
 on_finish: function(data) {
    var data = jsPsych.data.get().filter({trial_type: 'digit-span-recall'});
    if (file_name == null){
      file_name = "WM_digit_span_"+partN+"_"+IDsub.toString()+".csv"}
    else{
      file_name += ".csv"
    }
    if (local){
      data.localSave('csv', file_name )
    } else {
      saveData(file_name, data.csv());
    }
  }
}

timeline = [p_details]
timeline.push({
  type: 'fullscreen',
  fullscreen_mode: true
});
timeline = timeline.concat([instructions, demo_procedure, instructions_node, test_procedure])
timeline.push({
  type: 'fullscreen',
  fullscreen_mode: false
});
timeline.push(dataLog)
timeline.push(conclusion)


jsPsych.init({
  timeline: timeline,
  on_finish: function() {
    jsPsych.data.displayData(); // comment out if you do not want to display results at the end of task
  }
});
</script>
</html>

becky-gilbert Apr 26, 2021
Maintainer

Hi @python2020-maker, your code in the cognition.run editor should just be the JavaScript inside the <script> and </script> tags (without the tags themselves). Also, make sure that you upload any files that you're using that aren't part of the official jsPsych release in the External JS/CSS section, which includes custom plugins (jspsych-digit-span-recall), other libraries (jQuery, jstat), and custom CSS files (jspsych_digitspan).

If you have any further problems, feel free to let us know what errors you're getting in the JavaScript console and/or share a link to your live experiment. And please open a separate thread if you think these issues might be unrelated to the original topic of this post. Thanks!

python2020-maker Apr 27, 2021

Thank you. I fixed it. I noticed that the uploading external files should be manipulated in terms of order to run the experiment. I experienced this solution with two experiments.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Enquiries of failures in loading external JS & CSS in Cognition.run #1684

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 5 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Enquiries of failures in loading external JS & CSS in Cognition.run #1684

Uh oh!

TomCheung19 Mar 28, 2021

Replies: 1 comment · 5 replies

Uh oh!

becky-gilbert Mar 28, 2021 Maintainer

Uh oh!

TomCheung19 Mar 29, 2021 Author

Uh oh!

becky-gilbert Mar 29, 2021 Maintainer

Uh oh!

Uh oh!

python2020-maker Apr 26, 2021

Uh oh!

becky-gilbert Apr 26, 2021 Maintainer

Uh oh!

python2020-maker Apr 27, 2021

TomCheung19
Mar 28, 2021

Replies: 1 comment 5 replies

becky-gilbert
Mar 28, 2021
Maintainer

TomCheung19 Mar 29, 2021
Author

becky-gilbert Mar 29, 2021
Maintainer

becky-gilbert Apr 26, 2021
Maintainer