bjoluc / jspsych-builder Goto Github PK

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Maybe this doesn't belong as an issue (but discussions are disabled 😉)...

I totally understand how "small" this project is, at the moment, so I'm curious if that largely "explains" the minimal examples (e.g., demonstrating how to use React with this, demonstrating how one could further customize the run(...) function, potentially demonstrating how to integrate React with jsPsych, etc.)

Certainly not on you, especially since each of those MWEs is a fair bit of work to build a self-contained example. 😅 (This is something I'm down to contribute to, as I've sorted out how to do most of these examples, albeit in probably a mostly toy-like capacity.)

Hi @bjoluc,
sorry for bothering you again, but I'm working with the jspsych-builder a lot right now...
I'm actually not a 100% sure if the issue lies with jspsych-builder or with me and my setup, but my knowledge is not deep enough to solve that before posting here...
As to the issue:
Since a couple of days (and I'm suspecting it's since the latest update) I can not get jspsych init to run anymore. The shell throws the following error:

File not found with singular glob: /C:/Users/username/AppData/Roaming/nvm/v16.13.1/node_modules/jspsych-builder//assets/template/package.tmpl.json 

which to me looks like an issue with the file path formatting. I first suspected the interaction between jspsych-builder and nvm for windows to cause the issue, so I uninstalled nvm as well as the jspsych-builder and reinstalled node and the builder. However, the error remains. My second pc (also windows) has the same issue. So I'm starting to think it might be a general issue. I did some digging into your code and suspect the issue to lie with the URL(import.meta.url).pathname function.
Sorry in advance if the error is caused by my own setup, I tried all I could to make sure it's not ;)

Edit:
I think I found out where the error lies. I'm not sure it's restricted to windows...
In tasks.js:

const builderDir = new URL("..", import.meta.url).pathname;

resolves as /C:/Users/username/directory/
instead of C:/Users/username/directory

I'm not sure what it would take to do this (but I think I'm willing to pitch in as-needed)... but I've grown rather annoyed with the import/export loop to test with JATOS. 😅

Do you know if there might be a way to interact with JATOS during a development build? The simplest solution would be to point to something like... locahost:9000/assets/javascripts/jatos.js, but that won't actually emulate a true JATOS environment (a la interacting with jatos.batchSession and equivalents).

I would be interested in using the jspsych-psychophysics plugin. Unfortunately it doesn't seem to be available for use via npm. Is there any way I can use the plugin code to make it accessible for use with jspsych builder?

Thanks in advance, and sorry if this is a trivial question.

I have a few webservers I leave running (locally) to avoid needing to remember to restart them, one of them runs on :3000. I was sad to find that the port is hard-coded to :3000, as per

I'm willing to submit a PR to allow this to be dynamic (with a default of :3000), but wanted to gauge whether it would be an "acceptable" change (as I'm not maintaining this 😅).

No idea how hard this would be, but it could also make sense to let this "walk the ports" like Jupyter and Docker do when opening ports?

Thank you very much for providing this useful tool! I have encountered a problem now, which may be relatively niche, but I really can't solve it.
The situation is as follows: my experiment needs to be divided into two parts, so I wrote two programs separately using jspsych-builder and packaged them through "npm run jatos". Now I need to upload my programs on JATOS, they should be component1 and component2. Here's the problem: because the packaged programs have the same structure and the same name, when JATOS reads the second component, it automatically fills in the content of component1. So I was wondering if I could specify another name (e.g., app2.js) during packaging so that there would be no conflict between component1 and component2.
Can this be achieved? Or do you have a better solution?

Hello, does jsPsych Builder support React? I haven't seen any examples indicating that React can be used.

I'm a bit new to jsPsych and web development in general and I may ask a trivial question, but is it possible to use the jatos library inside the experiment file?

The documentation seems to indicate that the only option is to use return at the end of the function containing the experiment to connect with jatos server, but it would be nice to know if it is possible to load the jatos library to handle session related issues by "hand".

The app.js file calls the run entry point function only with jatos.studyJsonInput. It would be great if JATOS would also pass query parameters to the run function.

E.g.

  ...
  jatos.onLoad(async () => {
    // Get query params
    const queryParams = jatos.urlQueryParameters
    // Run the jsPsych Experiment
    const jsPsych = await run({
      environment: "jatos",
      input: jatos.studyJsonInput,
      queryParams: queryParams,
      ...options,
    });

    if (jsPsych) {
      jatos.submitResultData(jsPsych.data.get().json(), jatos.startNextComponent);
    }
  });
 ...

PS: I could make a PR for this change, but don't yet have permissions.

Version 4.2.0 is broken due to hardcoded asset paths like /home/runner/work/jspsych-builder/jspsych-builder/assets/template/package.tmpl.json. Fixing this tomorrow.

Hi, sorry to bother you. Recently I used the jspsych-builder to create my experiment. In the final step, I want to save my data on the online platform in China (like pavlovia). Unfortunately, this platform only support save data by extensions that import by cdn with script label. How could use this extension by import or any method? Thanks a lot!

P.S The CDN of the extension below there:

Hey!

First of all, thanks, your project is awesome.

I'm actually not sure if this is an issue or not, but I just discovered a file called app.js.LICENSE.txt next to the app.js bundle, which says that the "Microsoft Corporation" has a copyright on the bundle. Is this the expected behavior?

This is the content:

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

Regards,
r

jspsych-builder allows for packaging the experiment to run on a JATOS server, and that's a great thing. When an experiment run with JATOS ends, a basic end of study message is displayed, but JATOS allows for customizing this by supplying an endPage.html file. I think it would be very convenient, if one could supply such a file to jspsych-builder to have it added to the built JATOS packages.

I tried using the @miscDir pragma, but it does not seem to work for me.

What do you think of this?

I have customized the webpack configuration in builder.config.mjs and want to use CDN to reference external resources. However, the resources were not successfully included in the index.html file in js-builder.

import HtmlWebpackExternalsPlugin from 'html-webpack-externals-plugin';
/** @param {import("webpack").Configuration} config */
const embedPlugin = new HtmlWebpackExternalsPlugin({
    externals: [{
        module: 'Naodao',
        entry: 'https://www.naodao.com/public/experiment/libs/extension/naodao-2021-12.js',
        global: 'Naodao'
    }]
})
export function webpack(config) {
    console.log(config)
    const a= {
        ...config,
        plugins: Array.isArray(config.plugins) ? [embedPlugin, ...config.plugins,] : [
            embedPlugin
        ],
    };
    return a
};

after npm run start，the index.html in .js-builder is：

<!doctype html><html><head><meta charset="utf-8"><title>source-motivation</title><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="js/app.js"></script><link href="css/main.css" rel="stylesheet"></head><body></body></html>

How would I refactor the Preload Plugin, so I can use it from an external file?

Right now I am having a file in ./components/preload.js which looks like this:

import PreloadPlugin from '@jspsych/plugin-preload';

const assetPaths = 'assets/'; // <- this must be wrong

export const preload = {
  type: PreloadPlugin,
  images: assetPaths.images,
  audio: assetPaths.audio,
  video: assetPaths.video,
};

my experiment.js

/**
 * @title Demo
 * @description
 * @version 0.1.0
 */
import '../styles/main.scss';

import { preload } from './components/preload';
import { welcome } from './components/welcome';
import { fullscreen } from './components/fullscreen';
// etc.

This fails because the run function cannot find assetPaths. I tried putting assetPath in my export object and reference to it, but that also failed...

export async function run({
  assetPaths,
  input = {},
  environment,
  title,
  version,
})

any ideas how to solves? I guess this is more a JS is issue that I create, instead of jsPsychBuilder issue; yet, I would love to keep my experiment.js as minimal as possible

I am first-time jsPsych user. Love the project!

Since you provided a bin entry in package.json, I could successfully set up my environment with:
npx jspsych-builder init, which has generally a lot of benefits compared to npm -g .... Yet, as this is my first day reading about the setup, maybe I miss the reason to not do that?

Otherwise, I would actually promote that method also in your README.md.

Hey!

jspsych-builder version: 4.3.0

I don't want to completely rule out the possibility that I have messed something up on my side, but I think I have discovered a bug. 🐞

I'm using the new @assets pragma to include images in my experiment:

/*
 * @assets media/images
 */

While I'm developing using the integrated webpack-dev-server, everything works fine. But when I export the experiment to either a zip to run directly in the browser or a jzip to import it to JATOS, the "compiled" asset paths seem to be broken. In both environments, the images are not displayed, but instead a symbol is signifying that they could not be found:

I'm not sure what might me causing this. The repo where this occurs is the following:

• https://github.com/kogpsy/imadet-experiment-3-refined

Edit: I accidentally sent the issue too early 🤦

Hey!

I'm programming a jsPsych study with your tool and just tried to make the shift to TypeScript, as it could add some robustness to my code. Now, as far as I can tell, jspsych-builder does not yet support TypeScript (if I specify experiment.ts as my experiment-file, I get an error stating the Experiment file ./src/experiment.ts.js does not exist.).

Since you are using Webpack and Babel internally already, I think it would be not that much effort to add TypeScript support. Have you thought about including that functionality? Would be awesome :).

Kind regards,
r

This could definitely be resolved by specifying something like...

// experiment.{ts,js}
const VERSION = ...

But since we're already specifying a version in the docblock, could we have ctx.meta (at this seemed to be where the pragmas were getting stored?) passed through to the run(...) function? I'm not sure it's a tonne of work to do that, but wanted to check-in before working on that.

Of course, we can write separate experiments, but I'm a fan of DRY, and most of the experiments I've worked on usually vary in stimuli, but not the actual study design. (Changes in study design seems to be the pattern across research projects, not within them.)

Hello,

Thank you for packaging and supplying this builder! I'm trying to add an external-html (via the plugin that comes with jspsych) to the createTimeline function and I can't seem to figure it out. Here's what I included in the function:

export function createTimeline(input = {}) {

    // ...

    var check_consent = function(elem) {
        if (document.getElementById('consent_checkbox').checked) {
            return true;
        } else {
            alert(
                "If you wish to participate, you must check the box next to the statement 'I agree to participate in this study.'");
            return false;
        }
        return false;
    };

    // create timeline
    let timeline = [];

    var ifc = {
        type: 'external-html',
        url: "./consent.html",
        cont_btn: "start",
        check_fn: check_consent
    };

   timeline.push(ifc);

As you can see this is almost an exact copy of the example from the external-html plugin page for jspsych. However, when I run the experiment, it hang son the "loading" screen and won't continue. I've tried including consent.html in the src and the media/subfolder folders, but the issue persists.

Any help would be appreciated. And apologies in advanced if it is a simple fix. I'm new to nodeJS coming from "straight" JavaScript.

EDIT:
I've run across a couple of other issues (survey-multi-select, writing to disk with on_finish), so I'd be grateful to discuss them with you, as I hope they will help others adopt this cli more readily!

I'm not sure if I'm missing something here, but would it be possible to use the version specified in package.json instead of specifying it there and in the @version pragma?

From my standpoint I don't really see the benefit of this pragma. Right now, I have to think of multiple places to change the version before a release. If there is a valid reason this pragma exists, we could also use the version specified in package.json as a fallback in those cases where the pragma is omitted.

What do you think?

I do not have experience with webpack that much. Can you please point out on how I can add additional javascript extensions in the experiment.ts file?

Here is what I tried inside the run function:

const jsPsych = initJsPsych({
  extensions: [
    {
      type: jsPsychExtensionWebgazer,
      params: {
        auto_initialize: true,
      }
    }
  ]
});
const timeline: { type: any; [key: string]: any }[] = [];

// Preload assets
timeline.push({
  type: PreloadPlugin,
  images: assetPaths.images,
  audio: assetPaths.audio,
  video: assetPaths.video,
});

// initialize eye tracking
timeline.push({
  type: jsPsychWebgazerInitCamera
})
timeline.push({
  type: jsPsychWebgazerCalibrate,
  calibration_points: [[25,50], [50,50], [75,50], [50,25], [50,75]],
  calibration_mode: 'click'
})

But I get the following error while running:

Error: Webgazer extension failed to initialize. webgazer.js not loaded. Load webgazer.js before calling initJsPsych()
    at JsPsych.<anonymous> (http://localhost:3000/js/app.js:31248:15)
    at Generator.throw (<anonymous>)
    at rejected (http://localhost:3000/js/app.js:27640:32)

How can I load webgazer.js before calling initJsPsych()?

I see that app.js calls jsPsych.data.displayData() by default, but I'm struggling to disable it for both development and packaged versions.

For instance, specifying an empty function for on_finish doesn't help:

  const jsPsych = initJsPsych({
    on_finish: function() {
    }
  });

Hi, thanks for your work on this.

According to the docs,

If you want to serve your experiment using JATOS, run npm run jatos instead to create a JATOS study file (.jzip) that can be imported via the JATOS web interface.

But when I run npm run jatos:

> [email protected] jatos
> npm run jspsych build --jatos


> [email protected] jspsych
> jspsych -e experiment "build"

[10:39:45] Building  [started]
[10:39:45] Building experiment [title changed]
[10:39:45] Reading experiment file [started]
[10:39:45] Reading ./src/experiment.js [title changed]
[10:39:45] Reading ./src/experiment.js [completed]
[10:39:45] Cleaning build directory [started]
[10:39:45] Cleaning build directory [completed]
[10:39:45] Copying assets [started]
[10:39:46] Copying assets [completed]
[10:39:46] Building scripts and styles [started]
[10:39:51] Building scripts and styles [completed]
[10:39:51] Building experiment [completed]
[10:39:51] Packaging experiment [started]
[10:39:51] Packaging experiment [completed]
Your build has been exported to packaged/experiment_0.1.0.zip

As you can see, no jzip is generated, just a regular zip file.

I can't import this file in Jatos and when I unzip it study_assets_root the enviroment is not set correctly when running the experiment.

Kind regards.

Every time I need to debug with the backend, I have to package the code and deploy it to the server where the backend is located. This process is quite cumbersome. Therefore, can I set up a proxy for the development server to save a lot of time?

How to install this tool? I'm on a MAC and would like to know how to get started for a nonprogrammer. Thanks!

See #12 (comment) for details

Maybe this is out of the scope of jspsych-builder (and maybe I'm among the few that prefer markdown to raw HTML), but... I think having the ability to leverage mdx, since we can use React would be awesome. 😅

I'm not too sure if this starts approaching the maintenance/usage level of an SSG (e.g., next.js), but having the ability to specify instructions/whatnot in mdx would certainly be preferable to writing HTML as strings or at all (imo).

(If this does increase the management load to something akin to an SSG, feel free to close this. 😅)

Maybe this makes more sense as a "open up projects to customizing Webpack through a top-level webpack.config.js" or equivalent? (I wager this would minimize workload on your end while enabling users to "do what they want".)