felixhenninger / lab.js

Online research made easy

lab.js

Get started · Open the builder · Learn more · Contribute

lab.js makes it easy to build, run and share studies that help understand the mind. It allows everyone to construct and construct experiments and surveys within the browser; the graphical builder makes it easy to get started without writing code.

---

Get started 🚀

The graphical builder interface is the easiest way to create studies, and the best place to start. The tutorial will walk you through building your first study, step by step.

If you prefer working directly with code, you can build studies using the JavaScript library. Everything you need is bundled in the starter kit, which is provided with every release. There is also a tutorial to help you get started.

If you get stuck or things don't make sense, please don't hesitate to reach out!

Find help ☎️

The easiest and quickest way to find help is to join our Support channel, where there's someone around to discuss things and help out most of the time. You're welcome to just join and say hello, we'd love to have you around!

Keep up-to-date 📮

If you'd like to keep in the loop regarding the development, please subscribe to our newsletter to receive very occasional updates and release notifications.

Help improve lab.js! ✨☀️

We would love to have you as part of this project! There are lots of different ways to contribute, and we recognize and very warmly welcome all kinds of involvement:

• Feedback, ideas and suggestions are always appreciated. If we can make lab.js more useful, we'd love to!
• If you've found something that didn't work, felt harder than it should, or figured out a trick, it's likely that others will benefit from your experience. Please file an issue that describes what's going on, or contribute a brief recipe to the documentation.
• We wholeheartedly invite fellow scientists and students to share your studies: Chances are that others are trying something very similar — by sharing yours, you'll be giving other researchers a head start. We'll happily help you polish your study if you'd like.
• Of course, code contributions are hugely welcome! If you're missing something, we'd love to work with you to extend the project. If you're looking for an area to contribute, let us know, or check out the issues for some ideas — we'd love to support you and help you get started, regardless of your skill level: We are all learners.

Please also let us know if you'd like to join in but are unsure how, we'd be thrilled to help you find something that suits your interests and resources. The contributor's guide provides further information about our process; we have some pointers regarding how to build the project in the documentation.

---

Contributors ❤️

(in alphabetical order)

Code / documentation 🔬

Felix Henninger · Pascal J. Kieslich · Ulf K. Mertens · Yury Shevchenko · Vanessa Sochat

Tasks and templates 🎁️

Michael Kriechbaumer · Felix Ludwig · Folco Panizza · Merle M. Schuckart

Ideas and feedback 💡

Dilek Akkus · Angelo Belardi · Ursa Bernardic · Erin Buchanan · Emily Elliott · Jeffrey Fisher · Kerstin Fröber · Robert Gaschler · Benjamin E. Hilbig · Lea Hildebrandt · Alex Irvine · Dave Kleinschmidt · Kristian Lange · Dano Morrison · Karthikeya Pammi · Shivangi Patel · Kwame Porter Robinson · Nick Robinson · Sophie Scharf · Nikoletta Symeonidou · Hendrik Singmann · Dawid Strzelczyk · Kevin Tiede · Anne Voormann · Andreas Voss · Andrew White · Malte Zimdahl

The students and teaching assistants in the graduate course Research Methods in Cognitive Psychology at the University of Koblenz-Landau inspire the continued development of this software, have provided countless valuable insights, and sparked many of the ideas embodied in this project through questions and discussions.

Sponsors and supporters 🎩

We are wholeheartedly grateful to our generous sponsors for making possible the development of this tool:

FernUniversität in Hagen · GESS, University of Mannheim · Meta Reality Labs · Mozilla Science Lab · Rational Altruists Mannheim · Stifterverband · University of Koblenz-Landau · Volkswagen Foundation · Wikimedia Germany

If you would like to support development as a scientific institution, the easiest way is to host a workshop. We'll gladly show you and your colleagues how to build experiments using this software, and build your favorite paradigm together! We are also open to consulting if you are looking for a particular feature — please don't hesitate to get in touch so that we can discuss things in more detail.

---

Citation 📓

We kindly request that you cite lab.js if you use it in your research. Here's how:

Henninger, F., Shevchenko, Y., Mertens, U. K., Kieslich, P. J., & Hilbig, B. E. (2022). lab.js: A free, open, online study builder. Behavior Research Methods, 54(2), 556–573. https://doi.org/10.3758/s13428-019-01283-5

(There are also version-specific dois if you prefer those)

---

License 👩‍⚖️

All parts of this project are openly available, subject to different licenses:

• The lab.js core library that is included in your studies is made available under the terms of the Apache License.
• The builder, the graphical interface used to build experiments, is provided under the terms of the GNU Affero General Public License.

The studies you build based on the library, and those you create using the builder, are always your own, and you are free to distribute them as you see fit. When studies include the core library files, these files alone are governed by the aforementioned license.

lab.js's Issues

Missing video instructions on embedding in Qualtrics

Hello! I am working with lab.js for the first time and would like to embed the experiment in Qualtrics. However, the videos are no longer available at this link: https://labjs.readthedocs.io/en/latest/learn/deploy/3a-qualtrics.html

Are the videos perhaps available somewhere else? This is my first time embedding things in Qualtrics so I do not want to screw anything up. Thanks!

Tooltips in timeline editor don't auto-hide (sometimes)

What would you like or expect to see?

Tooltips should auto-hide when they're not active, and get out of the way in general.

What is currently happening?

In the timeline editor, Tooltips can become stuck, and displayed constantly.

Please describe the steps needed to reproduce this phenomenon

On the behavior tab of any component, add a new sound or oscillator to the timeline. In the form below, the input fields are illustrated with various icons.

1. Hover over one of the icons, and observe that a tooltip is shown and removed when the cursor leaves the target.
2. Click on one of the input fields as if to enter a value, then click on the icon next to it.
3. The tooltip never disappears.

Finally, please tell us which browser you're using (and the version thereof)

Replicated in Firefox (75) and Chrome (83).

reproducible experiments?

hey @FelixHenninger ! I stumbled on your page for labjs and it's great! I am finishing up a project that was started years ago, the Experiment Factory, and it's focus isn't around making experiments, but deploying them in a reproducible way (meaning linux containers). A lot of the experiments are from jspsych, or phaser (a game framework) or just simple form --> submit types, and all are simple html/css/javascript. I don't know a lot about labjs, but it seems like the experiments are created and hosted from your server? I am wondering if there is a way to "freeze" or "export" an experiment, then we could add them to the Experiment Factory library. If the user wanted hosting (and not the container) it would link back to you, and if not, they could use the traditional expfactory way of generating the experiment in the container (and then being able to give the container to others to reproduce exactly, cite in papers, etc). Depending on the way labjs works, we could also do some kind of reverse import - meaning an experiment factory library experiment could be imported into labjs. I can offer to help on both these fronts.

Let me know your thoughts! Looking forward to chatting. And your UI is beautiful by the way! I love the marigold yellow.

Variables from one component to another

Dear Lab.js team,

thank you for your amazing tool. I'm currently designing a questionnaire on sound description semantic.

The first panel (after the instructions) would collect informations that condition parameters of the following loop. The thing is, in this framework, i don't know how to pass the variables/data to the next component/canvas.

Also, but it is already the subject of another issue, i have a json file (or csv) full of text inputs that I would like to use as parameters of the loop as stimuli, and I'm looking for a clever way to do it.

Thank you for your help.

KR

Victor

core - css : into scss

What would you like?

Migrate the builder project into scss.

I just need your green light and I'll do it myself.

no-referrer-when-downgrade - no DB creation, error concerning url

Dear Felix,
thank you very much for providing us with lab.js, I am using it to implement a pilot study on our new University server right now.

Your explanations are in general clrear to me, also for the PHP changes: https://labjs.readthedocs.io/en/latest/learn/deploy/2-php.html
Though, I am running into a problem now, see below.

Thanks a lot for your feedback and thoughts!
Best wishes,
Alexandra

What would you like or expect to see?

I find the no-referrer-when-downgrade error in the debug window and it does not create the data/data.sqlite and therefore does not collect the experimental data.

What is currently happening?

I find the no-referrer-when-downgrade error in the debug window and it does not create the data/data.sqlite and therefore does not collect the experimental data.
-> The directory rights are set to 777 at the point of testing. The .htaccess file is present.
-> We are working with a Url with http:// only, hence no https://

We are working with Apache, PHP is installed and activated.
Though I wonder -> do we have to change over to https:// (SSL encryption) or change something on the Apache WebServer to get that error sorted and are able to collect data?

Please describe the steps needed to reproduce this phenomenon

It happens each time, no matter what I change with file directories or removing / renaming .htaccess.

Finally, please tell us which browser you're using (and the version thereof)

Google Chrome and Firefox

Nested template parameter access not supported

Here's a simplified example to showcase the problem.

const experiment = new lab.flow.Sequence({
  content: [
    new lab.flow.Loop({
      template: new lab.html.Screen({
        content: '${parameters.userPrompt}',
        parameters: {
          userPrompt: 'Hello ${parameters.user}',
        },
      }),
      templateParameters: [{ user: 1 }, { user: 2 }, { user: 3 }, { user: 4 }],
    }),
  ],
});

This snippet displays Hello ${parameters.user} instead of Hello 1. We've come across this use case a few times now, so it would be nice if we can find a way to support this.

This seems to be related to #83, in that the templateParameters only become available in the onPrepare step instead of the constructor. Thanks for the help in advance!

404 File Not Found After Clicking on a Submit in HTML Screen

What would you like or expect to see?

Hi, I have the following HTML screen form:

What's your name?
How old are you?
I agree

Continue

It should go to the next Screen when I click on Continue button.

What is currently happening?

It shows a 404 File Not Found Page with this message:
The requested URL /api/labjs_preview/index.html was not found on this server.
located at:
https://labjs.felixhenninger.com/api/labjs_preview/index.html?name=s&age=18&ok=on

Thanks a lot for the great tool!
Best regards,
Vassili

lab.js integration to soscisurvey.de issue

Dear Felix,

thank you so much for your great work. I have some trouble integrating the experiment within the survey. I use soscisurvey.de as survey software. The experiment is displayed correctly, but the event is not fired [alert("blubb") not shown]. Do you have a suggestion how to fix this error? Thank you.

Tobias

PS. Wir können auch gern auf Deutsch kommunizieren :)

<iframe
  src="https://tobias-kuhl.de/labjs/"
  style="width: 100%; min-height: 600px; border: none;"
></iframe>
<script>
  // Listen for the study sending data
  window.addEventListener('message', function _labjs_data_handler(event) {
alert("blubb");
    // Make sure that the event is from lab.js, then ...
    if (event.data.type === 'labjs.data') {

      // ... extract the data lab.js is sending.

      // The collected data is available via:
      // - event.data.json for json-encoded data
      // - event.data.csv for csv-formatted data
      // - event.data.raw for the raw data array
      const data = event.data.json;

      // ... process data and submit page
      // (the specific code here will depend on the tool
      // you're using to process and store the data)
      // ...
document.getElementById("LA01_01").value=data;
SoSciTools.submitPage();
      // ... finally, stop listening for further data
      window.removeEventListener('message', _labjs_data_handler)
    }
  })
</script>

Can't add content to "Content" area of a screen or form

According to the docs, it looks like you should be able to add HTML to the Content area. There is no apparent way to add anything to this area. This is happening both on my local build and on https://labjs.felixhenninger.com/. I would have expected that when I click on the Content area, I get a cursor and can start typing, but no such thing happens.

Design images for social media

@katjaq has asked for a nice illustration of our project for sharing on social media. That's a fantastic idea, but we don't have a go-to-option that represents our project well. Let's make one!

How you can help

• Any ideas, thoughts and feedback on the material are super-welcome!
• Please be warmly invited to doodle, draw or design, any contribution is hugely appreciated!

Builder exports outdated static files / overcaches library

What would you like or expect to see?

Running an experiment generated by PHP Export (several times over the last days) does not run (stuck on: "Loading Experiment
The experiment is loading and should start in a few seconds."

What is currently happening?

Experiment is stuck on "Loading Experiment. The experiment is loading and should start in a few seconds."

An older PHP export (mid of September 2018) does run fine.

Please describe the steps needed to reproduce this phenomenon

I believe that this would happen with any PHP Export right now: Save, chose Generic webhost (PHP backend), upload it on our server, adjusting the rights for the data directory.

I can attach a print screen of an error in the debug window.

Finally, please tell us which browser you're using (and the version thereof)

Firefox, Google chrome, IE (on Windows 10).

Improve tree view UX

In the builder interface, we use a tree view to represent the nested study structure on the left. This works well for the most part, but the user experience is still somewhat fiddly and it seems likely that it could be improved (but we have no idea how). For this issue we're looking for ideas how to improve this.

Here are the steps needed to reproduce:

1. If you navigate to the builder, and open an example (click on the rocket icon, and select one of the examples from the list), you'll see a nested/hierarchical structure on the left.
2. Right now, users add new parts to the study by moving their mouse between items in this tree, where add buttons appear/expand when the mouse moves there.
3. Users can also drag around individual nodes, and drop them at different places in the tree.

All of these steps feel like they could be more polished; they work kinda-ok with the mouse, but the targets are harder to hit with a touchpad. We've tried to make this better, but it might be that our approach is wrong, and it looks like we're missing something. Any ideas are hugely appreciated! We're looking for a new perspective here, not an implementation (though you're welcome to give that a shot, of course!)

enhance - script/dropDown : disable choice once already selected

What would you like or expect to see?

As discussed on the slack channel
Since having multiple time the same event listener will override the former one, we may do something to prevent user having trouble misunderstanding why his function didn't work.

Ideas

1 - Add a disable class with a text

We could color the already selected one in light-gray + we may add a text to describe that this is already been used (used).
Pro:

• This may help the user realize that he cannot select multiple
• This may help the user realize what have already been used
  

2 - Remove the option

We could just remove the option, so the user wouldn't be able to select it

Pro:

• Easier and faster to select which one to chose

Con:

• Won't have the pro from the nr. 1
• May disturb the user, since he didn't see the option anymore and may don't know why

Clarify / add hint to responses UI

In the lab.js builder interface, small hint components provide additional frequently-used information where it might be needed, so that users don't need to look up things in the documentation too often. Right now, these hints are not as frequent as they could be, and one area where they are missing is the part of the UI where users define the responses available to participants. For example:

• It is not entirely clear what the filter and target fields are for.
• Similarly, the use of the label field is not directly apparent.

These questions are covered in the documentation:

• UI tutorial: Adding responses
• Code reference: The responses option

Your mission, should you choose to accept it, would be to add the most important parts of this information to the builder UI. A hint would be a great help to many users -- should you find a way to improve the UI along the way, you are in no way limited to the hint alone.

refactor - global : new folder structure

What would you like

A new folder structure

I'm coming from angular and I'm struggling a little bit with th actual folder structure.
I hope it will make sens, but I want to add this issue so, maybe, we could debate with some react developers about the right good folder structure. I know I still have a lot to learn here :)

I've already published a folder structure for angular that we can use.
I also had a look at this article which was talking about how the guy was structuring his react project.

So, here is a quick proposal (I'm not a react pro and hope it will make sense, if not then I excuse myself '^^).

src
├── assets (will contain flask_micro.png & logo.blue.png if it is still used)
├── components (*components)
├── layouts (*layouts - further explenation)
├── pages (*pages)
├── core (*core)
│ └── logic
└── store (store.js)
├── actions
└── reducers

I see the problem that will arrise about paths, but once we will have update to typescript, we would be able to use path from our tsconfig.json file and it will make everything much more cleaner :)

Further explanation :

*components
the actual folder, I also wanted to add a fragment folder (I explain the difference here), but it isn't really react standard

*layouts
We already have a layout folder but it is quite static, what I would do is :

• Create a main-layout (or grid-wrapper) that contains grid-sidebar and grid-contents
• Create a sidebar-layout which will contains sidebar-header, sidebar-content and sidebar-footer

Doing it like this would help us :

1. Remove the sidebar in one click (if we want to hide it when we are on smaller laptop)
2. Adding into the sidebar-content some specificity (useful for #51 and #56)

*pages
I cannot find the main page '^^ I thought at the beginning that it was the App folder but doesn't look like, is this folder still used?
Objective : put our page here, so when someone starts working on the repo he would be able to see directly where the app start, also see that we have only one page and so on. (this folder isn't that important, but could be useful if the app need another page or so one)

*core
Contains global function that our app need to run, will make sense later if we add interfaces, although I'm not really sure how to organize it in this project.
I also added the logic folder inside (can possibly don't make any sense '^^)

Well, I hope I didn't tell too much foolish things.

add - global: short cut description

What would you like to see?

I saw that, when I use the short cut it's automatically download the json file. But it was juste luck.
If we would have a description of the element on hover it may help finding out those short cut.

Another Idea in the same issue. But beeing able to start the survey with a short cut would also be amazing

JATOS connection - better use jatos.startNextComponent instead of jatos.endStudy

I'd suggest to use jatos.startNextComponent in lab.js/packages/builder/src/logic/io/export/modifiers/jatos.js. The currently used jatos.endStudy always finishes the study - even if other JATOS components exists. On the other side jatos.startNextComponent starts the next component and only if there is no other component it finishes the study. This way lab.js would allow subsequent components; often users have a component with a last screen displaying some results or a confirmation code.

Be all-around awesome

This is not really a bug, but somehow I couldn't make our first issue a regular one. I guess we'll figure out what to do with this one later!

Collect feedback and ideas for the project logo

Our project logo has served us well, and we still enjoy it, but it's clear that there's potential to do better. We chose the flask icon when lab.js was still very much an experiment we were brewing, but our project is much bigger and more stable now. It would be great to work toward an adjusted or updated logo that more clearly reflects what the project is about -- our users are interested in the mind more than chemistry.

Any thoughts or ideas are very much welcome!

add - loop/parameters : import - export from json

What would you like or expect to see?

Since, some times we need to have multiple study with the same parameters (a list of colors, letter,...)
It would be nice, having the possibility to import / export those parameters as JSON

event listener javascript functions

What would you like or expect to see?

Ability to update elements of screen depending on the users action like for exemple "click on a button >>> change some text on screen.

What is currently happening?

Currently, we can't update content depending on the user's action, which is too bad, considering the possibilities of javascripts methods.

Please describe the steps needed to reproduce this phenomenon

Try adding the call of a javascript function declared in the script with the "onclick" attribute for exemple. Or use the addEventListener method...

Finally, please tell us which browser you're using (and the version thereof)

I am using Mozilla 74.0

Thank you

Implementing labjs experiment in questback

I made an experiment using labjs. Because my uni uses questback EFS for online surveys, I have to use questback too and implement the labjs experiment there.
As described in the labjs documentation for interfacing with third party tools, I embedded the experiment within an iframe. This works, the experiment is running within the questback survey from another URL.
Does anybody know the specific code that is needed to submit the labjs data and store it in a questback variable?

enhance - behavior/parameters : add a second random variable

What would you like to see?

We can use the ${ parameters } variable to randomize the experience.

It would be useful to have the possibility to have x parameters, (it would be an array instead of an object) which let us access the variable like that ${ parameters[0].rgb }.

In the loop, when we set the variable, it would loop trough those variable and create parameters.

What do you think of the Idea?

Feature request: draw stratifically

hi felix,

we often want to specify, say, 20 trials, and then replicate these a number of times, say 5, and then draw randomly. that way each participant gets each trial 5 times.

at the moment we have to do this replication outside of labjs, and import the data set, but it would be nice if this were another option alongside 'draw with replacement'.

jonathon

Is there a feature for audio input?

What would you like or expect to see?

I am quite new for lab.js. I was wondering whether there is a feature for voice recording?

What is currently happening?

Please describe the steps needed to reproduce this phenomenon

Finally, please tell us which browser you're using (and the version thereof)

add - navbar : restore recently deleted components

As said here. We would be able to restore recently deleted component into the tree.

Design

Design improved header for readme and/or project homepage

Both the project readme and the homepage use the project logo alone as their main header image. The header image is what people will notice first when they visit our project, and therefore it might be worthwhile making it nicer and potentially more relevant to the target audience, for example by

• Highlighting the applications of the library in the cognitive and other sciences (the flask logo does not bear that much relation to our users)
• Underlining our goal to be friendly and accessible rather than overly technical

These are just suggestions – any ideas, sketches, or artwork would be totally fantastic and are very welcome! Please leave a note if you need a vector version of the logo or any other resource to get you started.

enhance - sidenav/footer : add link

a small isssue

What would you like or expect to see?

could we link this button to this url ? https://lab.js.org/

bug - study/open : on wrong format

This issue isn't that bad, but if somebody have the time to fix it :)

What is currently happening?

On opening a project that doesn't have the right format (ex, an array withing a json) the website just start an infinite Loop

Please describe the steps needed to reproduce this phenomenon

1. save the json
2. surround it with []
3. open this file within the app

Finally, please tell us which browser you're using (and the version thereof)

Chrome - V76.0.3809.100

use .zenodo.json

This way, when I import your Zenodo pages into Paperpile, I automatically get the correct metadata. See here for an example.

Document code-based integration with JATOS

What would you like or expect to see?

How to export studies into a format that i can upload to JATOS when coding them from scratch

What is currently happening?

No information about it, the documentation just describes how to do it with the builder

Please describe the steps needed to reproduce this phenomenon

const instructions1 = new lab.html.Screen({
  title: 'Title',
  content: `
  <p> ETC </p>
  `,

  responses: {
    'keypress(Enter)': 'response',
  },
})

const instructions2 = new lab.html.Screen({})
const instructions3 = new lab.html.Screen({})

const study = new lab.flow.Sequence({
  content: [
    instructions1,
    instructions2,
    instructions3
  ],
  events: {
    visibilitychange: function (event) {
      if (document.hidden) {
        alert(`Please don't change windows while the experiment is running`)
      }
    },
  },
})

study.run()

Add drag-and-drop to grid component

One of the most frequently used components in the interface is the grid, which is used throughout to represent tabular data. It lives in packages/builder/src/components/Grid, and you can see it in action for example by adding a loop (open the builder and click on the plus button in the left pane, select loop, a grid view now appears on the right-hand side).

The grid already expands in both dimensions (use the plus buttons to add rows and columns), but it would be great to allow users to reorder rows. Could you help us with that? If you'd be interested or have any questions, we'd love to help you get started. Thank you so much!

Recognize data type in CSV import for loops

What would you like or expect to see?

Recognize the type of data (numerical, boolean) when importing parameters for a loop from a CSV file. Alternatively, it would be helpful to issue a warning or pop-up to remind the user to check the data type of all parameters manually.

What is currently happening?

All parameters are imported as text (categorical) even if a column only has numbers (double, integer) or only true/false values.

This actually caused an issue in data collection since I overlooked to change the data type manually. Hence, the left-right presentation of stimuli as encoded by a boolean variable with true and false values was not randomized because the JavaScript code on the page within the loop did not work (since a character variable always returns the value true even if the text says "false").

Please describe the steps needed to reproduce this phenomenon

Create a loop and import the following as a CSV file:

boolean  , numeric  , integer , text
true     , 3.32     , 4       , a
false    , 2.33     , 1       , b
true     , 4.31     , 3       , c

Thanks,
Daniel

[idea] mobile experiments

I haven't thought much about this, but how well does lab.js export to a mobile device?

Arguably, if it's a web experiment, it could be a matter of just having media definitions in the css styling, and then the same URL will render appropriately on mobile vs. computer browser. But if there is some difference / optimization with respect to a platform, maybe it would be worth looking into mobile frameworks? For example, flutter is going strong, both for ios and android, and it stuck out to me because a framework that @FelixHenninger likes (material design) is one of the main base templates. Eg, here are some links of interest:

• https://code.tutsplus.com/tutorials/flutter-from-scratch-understanding-widgets--cms-31547
• https://flutter.io/widgets/

Loop and Images (media)

Hi Folks,

I please have a question.
I would like to create an experiment and make my screen loop with each time a different image.
In the online tutorial, it is shown how to loop a word and the color of the word with ${parameters.word} in the stimulus page and a column word in the loop page. but i do not know how to make an image vary at each loop.
When I add an image, it is referenced as ${ this.files["XXX.bmp"] }
So I tried to change it to ${ this.files["${parameters.word}.bmp"] } in the stimulus page, under the "word" column I inscribed the name of the picture but it did not work .
I hope I was clear enough.
Someone would please help me?
Thank you very much
Kindest regard.
Ricky

Add option to skip component

During development, it is often helpful to skip parts of a study. If a study is written in code, the skip option can be used to achieve this: It terminates a component immediately after it is run, effectively skipping it.

This option, however, is not yet represented in the builder interface. To complete this issue, users should be able to skip a component from the UI. The easiest way of achieving this would probably be to add a checkbox in the 'advanced options' section, but you might find it more intuitive to add an option to the drop-down menu visible for the selected component in the sidebar.

As a bonus, you might think about representing the skipped state in the sidebar. That's a stretch goal, however, and in no way necessary to complete this issue.

Data transmission template & Microsoft Edge

When adding the data transmission template (beta) to the study, the study cannot be started when running Microsoft Edge (Firefox and Opera are okay). The browser gets stuck while showing: "The experiment is loading".

The website https://jshint.com/ indicates the following issues with the JavaScript code exported for the php backend, which could be relevant:

'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
'Trailing comma in arguments lists' is only available in ES8 (use 'esversion: 8').

PS: This is not very urgent, since the data are stored incrementally anyways.

[greater good pledge] request for participation

hey @FelixHenninger !

I'm creating a new initiative, The Greater Good that aims to highlight projects with no underlying incentives or ulterior motives - those that are "for the greater good." LabJS (I believe) fit strongly within the criteria, and I'm hoping that the community (you?) would like to participate. Participation simply means adding the community name to the pledge, and then (optionally) adding a badge to any associated project repos.

Details are provided at the page, and any maintainers / users here are welcome to also join the organization The Good Labs if open source transparency is important to them. It's still early (I'm going to be creating media and other community interactions) and right now I'm getting in touch with projects that I've worked with.

enhance - nav : add multiple project tree

What would you like to see?

Would be nice to be able to have multiple project in the same lab.
So we could:

• select the project
• run the specific project
• have every project in the same place and beeing able to export 1 project or an array of project

[expfactory] template modifiers

Hey @FelixHenninger ! I've been testing the labjs integration, and there are a few tweaks to make so that the experiment will function properly!

jquery

should be added in the basic header of index.html, like this -->
https://github.com/expfactory/builder-labjs/blob/master/experiments/stroop-task/index.html#L7

I 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.

response
This 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

bug in transmit
When 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:

    {
      "type": "lab.plugins.Transmit",
      "url": "/save",
      "updates": {
        "staging": false,
        "headers": {"X-CSRFToken": csrf_token}
      },
      "callbacks": {
        "full": function full(response) {
        if (response && response.ok) {
          console.log(response);
          window.location = '/next';
        } else {
          console.log(response);          
        }
      }
      }

And this I think is generated from here? https://github.com/FelixHenninger/lab.js/blob/master/packages/library/src/plugins/transmit.js#L3

The 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:

        $.ajax({
                         type: "POST",
                         url: '/save',
                         data: { "data": data },
                         success: function(){ document.location = "/next" },
                         dataType: "application/json",
                         // Endpoint not running, local save
                         error: function(err) {
                             if (err.status == "200"){
                                 document.location = "/next";
                             } else {
                                 // if error, assume local save
                                 jsPsych.data.localSave('breath-counting-experiment_results.csv', 'csv');
                             }
                         }
                     });

We need some tweaking somewhere to get this finished up!

And 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:

• Here is the repo --> https://github.com/expfactory/builder-labjs
• Here is the build and deploy on Circle --> https://circleci.com/workflow-run/7913bb01-4b2a-44be-94a6-0439dbc6bfae
• And deployment (Docker Hub) is here --> https://hub.docker.com/r/vanessa/expfactory-stroop/

So - to run this experiment on your computer with docker, just do:

docker run -d -p 80:80 --name stroop vanessa/expfactory-stroop start

And then open to 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:

and 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!

[Suggestion] Workflow for Development through Experiment Library

I would like to make a suggestion that would allow for any of the following use cases:

Case 1: The user

The user just wants to find an experiment, maybe try it out, and use it:

• [find an experiment] --> [deploy to desired place]

Case 2: The developer

The developer wants to browse existing experiments, and modify an existing, or start a completely new experiment.

• [find a development workflow] --> [version control and test] --> share

Case 3: The Researcher

The researcher is a developer and a user, but they also want to get credit for their work (and possibly publish). The researcher would also need help/education to know how to design and build their experiment, but then they would want it tested and reviewed for others to find.

Right now, we have labjs to do the development. We have various avenues for deployment (expfactory my bias but only one of them). Based on the other issue, we can work on tutorials and examples to address the problem of finding and using. What is missing is a start to finish pipeline that goes from development through peer review and publication, and then archive in a library for others to find. Here is what I am thinking - each of these things we can work on separately.

1. Experiment Design is the documentation / tutorials for labjs. We teach the user to create something that can be exported.
2. Reproducibility: before publication or peer review, the user must ensure that:
   • the experiment is under version control
   • the version control is hooked up to a template that builds a container to deploy it, tests, versions, and on successful testing, deploys the experiment

These two point aren't hard, and labjs could provide a template to "plug an experiment into" that would do this! (I've done this before on circleci). Once we have an experiment in this format... it's ready for peer review!
3. Publication The researcher can (independently from the work that uses the experiment) publish the software --> http://joss.theoj.org
4. Library A published experiment that is now version controlled, tested, and deployed, plugs easily into a library. I have a simple one, example for expfactory --> https://expfactory.github.io/experiments/ and could create a similar one (but based on the containers) where a new user could find an experiment and use it, OR contribute, OR extend.

CORS request error when attempting to follow stroop example

What would you like or expect to see?

I am a new user that would like to adapt the stroop code-based example.

When opening the example's index.html (tasks/Stroop (code-based)/index.html) I expected the experiment to load to the intro

What is currently happening?

Every request for content in pages results in a cannot fetch error:

URL scheme must be "http" or "https" for CORS request.
(anonymous) @ html.js:21
html.js:26 Error while loading content:  TypeError: Failed to fetch
    at html.js:21
    at async Screen.value (eventAPI.js:153)
    at async Screen.value (core.js:377)
    at async Promise.all (index 1)
    at async Sequence.value (flow.js:55)
    at async Sequence.value (eventAPI.js:153)
    at async Sequence.value (core.js:448)
    at async Sequence.value (core.js:490)

Please describe the steps needed to reproduce this phenomenon

I replicated this by both using the lib from the latest release and building master.

Also when starting from the minimal example in the starter kit, screen objects such as

      new lab.html.Screen({
          content: 'Hello world!'
      }),

are fine, but objects with content such as:

      new lab.html.Screen({
          contentUrl: 'pages/1-welcome.html',
          responses: {
              'keypress(Space)': 'continue'
          },
      }),

result with a cors error

Finally, please tell us which browser you're using (and the version thereof)

Tested on firefox 68.0.1 (64-bit) and brave 0.67.119 Chromium: 76.0.3809.72 (Official Build) unknown (64-bit)

Apologies if I'm missing something.

enhance - modal : size

What would you like to see?

Modals could be much bigger (like 90vh / 90vw)

enhance - parameters : autoCompletion

What would you like to see?

nice to have

When we're inside the ${ } and type parameters, it would be nice to have at p an auto completion like parameters

lab.js problem - creating a 6x4 array filled up with random values from a given set of parameters

hi Team,

I'm trying to work with the lab.js.org interface. trying to create a loop with the following:

parameter 1.) letters from A-L
parameter 2.) hexa colours

what I'm trying to create on the screen is a 6x4 matrix of random coloured letters, showing up for one second and then looping it 10 times.

if I add ${this.parameters.letter} multiple times, it always pops up the same letters. randomly, but always the same. how can I ensure to use that given parameters in various random letters which are different in colour as well?

many thanks,
Zol

Error in "Building a local copy" tutorial

When building lab.js, I noticed the output went to a dist/ instead of build/. I think that in the "Building a local copy" tutorial, the text "will output a transpiled version in the packages/library/build directory" should be "will output a transpiled version in the packages/library/dist directory"
https://labjs.readthedocs.io/en/latest/meta/contribute/build.html

Add continuous integration/headless testing for existing test suite

The library part of lab.js includes a set of unit tests that can be run in the browser to test functionality and compatibility (in the library/test/ directory). Ensuring that the software passes these is currently a manual process that requires diligence with every commit and release.

It would be awesome to have an automated test runner that checks the library logic without requiring manual intervention, so that at least the logic could be validated continuously. At the same time, it would be (if possible) great to keep the existing tests so that browser support can be tested if required.

The current testing framework uses Mocha and Chai, but a change of libraries might be necessary to support the idea outlined above. We'd like to use a widely used framework, though.

Even if you can't implement the change, any suggestions regarding possible technical solutions are very welcome!

Template parameters in Loop flow are not predictably defined on Screen construction

I keep running into unexpected behaviour related to template parameters in the Loop flow.

When a number of Screens are declared in a Loop, they will all be constructed when the experiment loads with the parameters defined in the template. However, it seems that they do not have the parameters that are generated for them by the Loop until they are run.

Is this an implementation detail that allows some more flexible runtime Loop parameterization or something? It seems to me that if the flow is being generated on experiment load, it would make sense to set the parameters there as well. The problem is when we're trying to extend the lab.js Screen with more complex components we keep running having to write complex parameter management code in order to make sure we're running with the correct parameters.

Setup interface tour/walkthrough

For new users, it would be fantastic to set up a tour of the interface to demonstrate its most important parts. In this issue, we'd like to lay the ground work: Set up the infrastructure and a simple proof-of-concept. We'll happily provide additional content separately (though of course we won't stop you if you'd like to work on this too!)

You'll probably want to look into the following things -- but don't at all feel bound by them!

• I'm not really sure where to start, so it would be awesome if you could briefly investigate and choose/recommend a library that you could use, possibly something like react-joyride or driver.js. It should be one that's well-maintained and that ideally fits in well with our bootstrap-based layout.
• Maybe set up a minimal walkthrough (just a single step will do) that is started from the welcome screen (whose code is in packages/builder/src/components/ComponentOptions/components/Welcome). If you like, you're welcome add more steps to the tour; these don't need to be super-well thought out: We can, for example, add detailed text later, and we'd love to work with you to setup a sequence of highlights.