{"action":"created","issue":{"url":"https://api.github.com/repos/FelixHenninger/lab.js/issues/18","repository_url":"https://api.github.com/repos/FelixHenninger/lab.js","labels_url":"https://api.github.com/repos/FelixHenninger/lab.js/issues/18/labels{/name}","comments_url":"https://api.github.com/repos/FelixHenninger/lab.js/issues/18/comments","events_url":"https://api.github.com/repos/FelixHenninger/lab.js/issues/18/events","html_url":"https://github.com/FelixHenninger/lab.js/issues/18","id":341233533,"node_id":"MDU6SXNzdWUzNDEyMzM1MzM=","number":18,"title":"[expfactory] template modifiers","user":{"login":"vsoch","id":814322,"node_id":"MDQ6VXNlcjgxNDMyMg==","avatar_url":"https://avatars0.githubusercontent.com/u/814322?v=4","gravatar_id":"","url":"https://api.github.com/users/vsoch","html_url":"https://github.com/vsoch","followers_url":"https://api.github.com/users/vsoch/followers","following_url":"https://api.github.com/users/vsoch/following{/other_user}","gists_url":"https://api.github.com/users/vsoch/gists{/gist_id}","starred_url":"https://api.github.com/users/vsoch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vsoch/subscriptions","organizations_url":"https://api.github.com/users/vsoch/orgs","repos_url":"https://api.github.com/users/vsoch/repos","events_url":"https://api.github.com/users/vsoch/events{/privacy}","received_events_url":"https://api.github.com/users/vsoch/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":56,"created_at":"2018-07-14T12:36:57Z","updated_at":"2018-07-15T22:58:47Z","closed_at":null,"author_association":"NONE","body":"Hey @FelixHenninger ! I've been testing the labjs integration, and there are a few tweaks to make so that the experiment will function properly! \r\n\r\n **jquery**\r\n\r\nshould be added in the basic header of index.html, like this -->\r\nhttps://github.com/expfactory/builder-labjs/blob/master/experiments/stroop-task/index.html#L7\r\n\r\nI found the expfactory modifier script, https://github.com/FelixHenninger/lab.js/blob/master/packages/builder/src/logic/io/export/modifiers/expfactory.js and maybe we could have it added with a function in here? I'm not familiar with the setup so wanted to discuss with you. \r\n\r\n**response**\r\nThis isn't required, but it's a suggestion to show the response even if it's not perfect, because it's needed for debugging. I added an \"else\" that prints the response if it's not ok --> https://github.com/expfactory/builder-labjs/blob/master/experiments/stroop-task/index.html#L46\r\n\r\n**bug in transmit**\r\nWhen I submit the data to /save, I get a 400 BAD REQUEST. I think this is because of the format of the data that is being submit? It is coming from `lab.plugins.Transmit`:\r\n\r\n```javascript\r\n    {\r\n      \"type\": \"lab.plugins.Transmit\",\r\n      \"url\": \"/save\",\r\n      \"updates\": {\r\n        \"staging\": false,\r\n        \"headers\": {\"X-CSRFToken\": csrf_token}\r\n      },\r\n      \"callbacks\": {\r\n        \"full\": function full(response) {\r\n        if (response && response.ok) {\r\n          console.log(response);\r\n          window.location = '/next';\r\n        } else {\r\n          console.log(response);          \r\n        }\r\n      }\r\n      }\r\n```\r\nAnd this I think is generated from here? https://github.com/FelixHenninger/lab.js/blob/master/packages/library/src/plugins/transmit.js#L3\r\n\r\nThe above doesn't show me how the submit is being done, and I'd like to better understand the format of the data being transmit to properly debug. For expfactory experiments, I typically just submit json to the endpoint, and I use ajax since the header for the csrf_token is added that way, like this:\r\n\r\n```javascript\r\n        $.ajax({\r\n                         type: \"POST\",\r\n                         url: '/save',\r\n                         data: { \"data\": data },\r\n                         success: function(){ document.location = \"/next\" },\r\n                         dataType: \"application/json\",\r\n                         // Endpoint not running, local save\r\n                         error: function(err) {\r\n                             if (err.status == \"200\"){\r\n                                 document.location = \"/next\";\r\n                             } else {\r\n                                 // if error, assume local save\r\n                                 jsPsych.data.localSave('breath-counting-experiment_results.csv', 'csv');\r\n                             }\r\n                         }\r\n                     });\r\n```\r\n\r\nWe need some tweaking somewhere to get this finished up!\r\n\r\nAnd exciting things to share (that will help you to possibly debug this issue!) I have the basic \"expfactory labjs builder\" finished up, and once the experiment is fully working I can do the little writeup. It works that you literally export the LabJS experiment, and drop it in a folder, and you're done :) Here is the repo:\r\n\r\n - Here is the repo --> https://github.com/expfactory/builder-labjs\r\n - Here is the build and deploy on Circle --> https://circleci.com/workflow-run/7913bb01-4b2a-44be-94a6-0439dbc6bfae\r\n - And deployment (Docker Hub) is here -->  https://hub.docker.com/r/vanessa/expfactory-stroop/\r\n\r\nSo - to run this experiment on your computer with docker, just do:\r\n\r\n```bash\r\ndocker run -d -p 80:80 --name stroop vanessa/expfactory-stroop start\r\n```\r\nAnd then open to [http://127.0.0.1](http://127.0.0.1). The experiment will proceed and what I'm debugging now (the things above to discuss) are the submission of the data, what I see in the console is:\r\n\r\n![image](https://user-images.githubusercontent.com/814322/42724473-d8c2daaa-8727-11e8-884f-1d266979efd2.png)\r\n\r\nand I'm trying to debug and need your help! It could either be that the data format is off, or the passing of the cookie isn't working. If we can talk about the above I can get a better sense of this - I'm super excited to get this underway!"},"comment":{"url":"https://api.github.com/repos/FelixHenninger/lab.js/issues/comments/405124733","html_url":"https://github.com/FelixHenninger/lab.js/issues/18#issuecomment-405124733","issue_url":"https://api.github.com/repos/FelixHenninger/lab.js/issues/18","id":405124733,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNTEyNDczMw==","user":{"login":"vsoch","id":814322,"node_id":"MDQ6VXNlcjgxNDMyMg==","avatar_url":"https://avatars0.githubusercontent.com/u/814322?v=4","gravatar_id":"","url":"https://api.github.com/users/vsoch","html_url":"https://github.com/vsoch","followers_url":"https://api.github.com/users/vsoch/followers","following_url":"https://api.github.com/users/vsoch/following{/other_user}","gists_url":"https://api.github.com/users/vsoch/gists{/gist_id}","starred_url":"https://api.github.com/users/vsoch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vsoch/subscriptions","organizations_url":"https://api.github.com/users/vsoch/orgs","repos_url":"https://api.github.com/users/vsoch/repos","events_url":"https://api.github.com/users/vsoch/events{/privacy}","received_events_url":"https://api.github.com/users/vsoch/received_events","type":"User","site_admin":false},"created_at":"2018-07-15T22:58:46Z","updated_at":"2018-07-15T22:58:46Z","author_association":"NONE","body":"Hey @FelixHenninger I have prepared a document that will walk through the exact steps I took to test this, and I have some things for us to look at together that I think might shed some light on what is going on. First, [here is the repo](https://github.com/expfactory/expfactory-testing) (but no need to go here yet), I will share what I've learned so far!\r\n\r\n## 1. Is Jquery influencing it?\r\nThe first thing I wanted to know is if the jquery/not jquery being present made a difference. I found that when I had vs. didn't have it, it didn't make a difference. I got 400 error on /save each time. What I didn't test is removing the ajaxSetup because this would break the remainder of experiments. Just to be sure that it has absolutely nothing to do with ajaxSetup, I also rebuild and ran the entire thing removing it (and preserving your version). This didn't make a difference - the 400 was still there. I added it back in to continue testing.\r\n\r\n## 2. Is it the format of the data or headers?\r\nI wasn't actually sure about the data structure where the data is being posted, or how it's working. I went back to what you showed me above to do the post. I remembered that you got ajax to work too, so I wanted to verify this for a sanity check\r\n\r\n```bash\r\n$.ajax({\r\n  type: \"POST\",\r\n  url: '/save',\r\n  data: { \"data\": study.options.datastore.exportJson() },\r\n  dataType: \"application/json\",\r\n  success: function() { console.log('success') },\r\n  error: function(err) { console.log('error', err) }\r\n});\r\n```\r\nYes, it worked! So maybe if we compare this working POST to the one that is being done with fetch, we can figure out the issue? Here is the broken one with fetch:\r\n\r\n![image](https://user-images.githubusercontent.com/814322/42739205-6cdfa162-8847-11e8-9f11-42059b33da78.png)\r\n\r\nand here is the working one, with ajax:\r\n\r\n![image](https://user-images.githubusercontent.com/814322/42739195-48631ae4-8847-11e8-9462-87cac679eb54.png)\r\n\r\nI think that the answer lies here - see how different they are?  Just for reference, here is the CORS setup for the Flask server:\r\n\r\n```bash\r\n# Cors\r\ncors = CORS(app, origins=\"http://127.0.0.1\",\r\n            allow_headers=[\"Content-Type\",\r\n                           \"Authorization\",\r\n                           \"X-Requested-With\",\r\n                           \"Access-Control-Allow-Credentials\"],\r\n            supports_credentials=True)\r\n\r\napp.config['CORS_HEADERS'] = 'Content-Type'\r\n```\r\n\r\nThe fact that the 400 bad request is missing something tells us that there is still a difference between what this test stroop-task is posting internally with fetch, and what the ajax does. This suggests that something is missing so the server will accept it period. Speaking of, I tested this too!\r\n\r\n## 3. Is the server rejecting it?\r\nSometimes 400 can be returned by the server (as in, the /save view) so I added some printing / pickle export of variables within the view. If it was the case that the view is hit (and then rejected) I would see the saved files, but I didn't. Which tells us with confidence that the issue is indeed the fetch vs. ajax POST, and something to do with the header.\r\n\r\nIs this a good hint to help us debug and go down the right path? I'm going to zoom out of writing and look at those two pictures now - I think the answer is probably hiding there. I hope you can help!"}}
{"actor":{"display_login":"vsoch"}}