Skip to content

Commit

Permalink
Add line wrap to prettier config
Browse files Browse the repository at this point in the history
  • Loading branch information
okaycj committed Oct 8, 2024
1 parent 45b9aaf commit 686e507
Show file tree
Hide file tree
Showing 17 changed files with 4,375 additions and 1,074 deletions.
11 changes: 7 additions & 4 deletions .changeset/README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
# Changesets

Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
Hello and welcome! This folder has been automatically generated by
`@changesets/cli`, a build tool that works with multi-package repos, or
single-package repos to help you version and publish your code. You can find the
full documentation for it
[in our repository](https://github.com/changesets/changesets)

We have a quick list of common questions to get you started engaging with this project in
We have a quick list of common questions to get you started engaging with this
project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
3 changes: 2 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@
"prettier-plugin-sort-json",
"prettier-plugin-organize-imports",
"prettier-plugin-jsdoc"
]
],
"proseWrap": "always"
}
47 changes: 36 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Lookit jsPsych

Here is the monorepo containing packages developed by Lookit to be used with jsPsych on the lookit.mit.edu project.
Here is the monorepo containing packages developed by Lookit to be used with
jsPsych on the lookit.mit.edu project.

## Create new package

Expand All @@ -12,7 +13,8 @@ To create a new package, run the following at the root of the project:
npm init --scope @lookit --workspace packages/<name of new package>
```

Giving the default answers to `npm init` seems to work okay. I am sure this will change.
Giving the default answers to `npm init` seems to work okay. I am sure this will
change.

Add build and test script to new package's `package.json`:

Expand Down Expand Up @@ -137,25 +139,38 @@ To run a development server:
npm run dev -w @lookit/<name of package>
```

When the server has started, you should see something very similar to `<script src="http://127.0.0.1:10001/index.browser.js"></script>` printed out. Add this html to `web/templates/web/jspsych-study-detail.html` in the Django lookit api project to test the package in your local development environment.
When the server has started, you should see something very similar to
`<script src="http://127.0.0.1:10001/index.browser.js"></script>` printed out.
Add this html to `web/templates/web/jspsych-study-detail.html` in the Django
lookit api project to test the package in your local development environment.

### Serve multiple packages

The above command will serve a single package and wait for changes. If you need to serve multiple packages locally, you can open separate terminals for each package and run the `npm run dev` command in each. Another option is to install [Honcho](https://github.com/nickstenning/honcho) and write a Procfile to serve/watch multiple packages in the same terminal.
The above command will serve a single package and wait for changes. If you need
to serve multiple packages locally, you can open separate terminals for each
package and run the `npm run dev` command in each. Another option is to install
[Honcho](https://github.com/nickstenning/honcho) and write a Procfile to
serve/watch multiple packages in the same terminal.

Create a file called `Procfile` in the root project directory, and list the `npm run dev` commands for each package that you want to serve, preceded by the label you want to give it (to identify the print statements associated with each package in the terminal).
Create a file called `Procfile` in the root project directory, and list the
`npm run dev` commands for each package that you want to serve, preceded by the
label you want to give it (to identify the print statements associated with each
package in the terminal).

```
lookit-initjspsych: npm run dev -w @lookit/lookit-initjspsych
lookit-api: npm run dev -w @lookit/lookit-api
lookit-helpers: npm run dev -w @lookit/lookit-helpers
```

This method is optional (Honcho should not be added to the project dependencies, and Procfile has been added to our gitignore).
This method is optional (Honcho should not be added to the project dependencies,
and Procfile has been added to our gitignore).

## Documentation

To run documentation development server you will need to have Python 3.12 and [Poetry](https://python-poetry.org/docs/#installation) installed. To start the local development server:
To run documentation development server you will need to have Python 3.12 and
[Poetry](https://python-poetry.org/docs/#installation) installed. To start the
local development server:

```
make serve
Expand All @@ -167,10 +182,20 @@ To build the documentation:
make build
```

This will create/update a "site" directory in the project root, containing all of the static files.
This will create/update a "site" directory in the project root, containing all
of the static files.

### Structure

The documentation pages are generated from the README markdown files in the project root directory and the individual package directories. The main project documentation page comes from the root markdown file at `packages/index.md` and the documentation for each package comes from the README markdown files in each package root (e.g. `packages/data/README.md` for the `Data` package.) This documentation structure is defined in `mkdocs.yml`.

The reason for having the documentation pages in these different locations throughout the repository is so that they can be re-used as the package's landing page on NPM. This way, the documentation is bundled into each package, and the NPM site `npmjs.com` will automatically use the README.md file as the package's landing page.
The documentation pages are generated from the README markdown files in the
project root directory and the individual package directories. The main project
documentation page comes from the root markdown file at `packages/index.md` and
the documentation for each package comes from the README markdown files in each
package root (e.g. `packages/data/README.md` for the `Data` package.) This
documentation structure is defined in `mkdocs.yml`.

The reason for having the documentation pages in these different locations
throughout the repository is so that they can be re-used as the package's
landing page on NPM. This way, the documentation is bundled into each package,
and the NPM site `npmjs.com` will automatically use the README.md file as the
package's landing page.
10 changes: 7 additions & 3 deletions packages/data/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,16 @@ This package will do the following:

## Load

When an experiment begins, some data will be loaded for use during the experiment. This function is called before an experiment is ran and doesn't need to be called again.
When an experiment begins, some data will be loaded for use during the
experiment. This function is called before an experiment is ran and doesn't need
to be called again.

```javascript
await chsData.load(responseUuid);
```

Once this data has been loaded, it can be accessed on the `window` interface. The data should be structured as follows:
Once this data has been loaded, it can be accessed on the `window` interface.
The data should be structured as follows:

```javascript
window.chs = {
Expand All @@ -25,4 +28,5 @@ window.chs = {
};
```

For example, child information can be accessed at `window.chs.child` and can be used within your experiment.
For example, child information can be accessed at `window.chs.child` and can be
used within your experiment.
10 changes: 7 additions & 3 deletions packages/index.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
# CHS Custom jsPsych Plugins And Extensions

This documentation will provide explanations and use cases for the packages written by CHS for the jsPsych experiment runner.
This documentation will provide explanations and use cases for the packages
written by CHS for the jsPsych experiment runner.

If you're just starting out, a great place to start would be with [jsPsych's documentation]({{ jsPsych }}). It's well written and will provide the majority of what one would need to know to create an experiment.
If you're just starting out, a great place to start would be with [jsPsych's
documentation]({{ jsPsych }}). It's well written and will provide the majority of
what one would need to know to create an experiment.

## Developer Documentation

Documentation for developers can be found in the [README](https://github.com/lookit/lookit-jspsych) for the monorepo.
Documentation for developers can be found in the
[README](https://github.com/lookit/lookit-jspsych) for the monorepo.
13 changes: 10 additions & 3 deletions packages/lookit-initjspsych/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,24 @@

[Version History](https://github.com/lookit/lookit-jspsych/blob/main/packages/lookit-initjspsych/CHANGELOG.md)

This package contains the repackaging of jsPsych's initjsPsych function. We needed to give ourselves the ability to do two things:
This package contains the repackaging of jsPsych's initjsPsych function. We
needed to give ourselves the ability to do two things:

- Validate the trial timeline.
- Record trial data to CHS's API.

## chsInitJsPsych

This function will make available `initJsPsych()` and it can be expected to operate as the original.
This function will make available `initJsPsych()` and it can be expected to
operate as the original.

```javascript
initJsPsych = chsInitJsPsych(responseUuid);
```

The above code is already placed into the experiment before your code. For transparency, you can always find `chsInitJsPsych()` on [npmjs](https://www.npmjs.com/package/@lookit/lookit-initjspsych?activeTab=code), [github](https://github.com/lookit/lookit-jspsych/tree/main/packages/lookit-initjspsych/src), and [unpkg](https://unpkg.com/browse/@lookit/lookit-initjspsych/src/). Please feel free to reach out with any questions or concerns.
The above code is already placed into the experiment before your code. For
transparency, you can always find `chsInitJsPsych()` on
[npmjs](https://www.npmjs.com/package/@lookit/lookit-initjspsych?activeTab=code),
[github](https://github.com/lookit/lookit-jspsych/tree/main/packages/lookit-initjspsych/src),
and [unpkg](https://unpkg.com/browse/@lookit/lookit-initjspsych/src/). Please
feel free to reach out with any questions or concerns.
30 changes: 22 additions & 8 deletions packages/record/README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
# Record

This package contains the plugins and extensions to record audio and/or video of either a single trial or multiple trials.
This package contains the plugins and extensions to record audio and/or video of
either a single trial or multiple trials.

## Video Configuration

To record _any_ video during an experiment, including a consent video, you must add a video configuration trial. This trial allows the user to give permissions and select the correct camera and microphone. This trial also does some basic checks on the webcam and mic inputs, so that the participant can fix common problems before the experiment starts.
To record _any_ video during an experiment, including a consent video, you must
add a video configuration trial. This trial allows the user to give permissions
and select the correct camera and microphone. This trial also does some basic
checks on the webcam and mic inputs, so that the participant can fix common
problems before the experiment starts.

Create a video configuration trial and put it in your experiment timeline prior to any other trials that use the participant's webcam/microphone. The trial type is `chsRecord.VideoConfigPlugin`.
Create a video configuration trial and put it in your experiment timeline prior
to any other trials that use the participant's webcam/microphone. The trial type
is `chsRecord.VideoConfigPlugin`.

```javascript
const videoConfig = { type: chsRecord.VideoConfigPlugin };
Expand All @@ -30,15 +37,18 @@ const videoConfig = {

## Trial Recording

To record a single trial, you will have to first load the extension in `initJsPsych`.
To record a single trial, you will have to first load the extension in
`initJsPsych`.

```javascript
const jsPsych = initJsPsych({
extensions: [{ type: chsRecord.TrialRecordExtension }],
});
```

Next, create a video configuration trial as described above. Add trial recording to the extensions parameter of the trial that needs to be recorded. Any trial you design can be recorded by add this extension.
Next, create a video configuration trial as described above. Add trial recording
to the extensions parameter of the trial that needs to be recorded. Any trial
you design can be recorded by add this extension.

```javascript
const trialRec = {
Expand All @@ -55,7 +65,9 @@ jsPsych.run([videoConfig, trialRec]);

## Session Recording

You might prefer to record across multiple trials in a study session. This can be done by using trials created with the start and stop recording plugins. This gives a bit of flexibility over which of the study trials are recorded.
You might prefer to record across multiple trials in a study session. This can
be done by using trials created with the start and stop recording plugins. This
gives a bit of flexibility over which of the study trials are recorded.

To record a study session, create the start and stop recording trials.

Expand All @@ -72,13 +84,15 @@ const evening = {type: jsPsychHtmlKeyboardResponse stimulus: "Good evening!"};
const night = { type: jsPsychHtmlKeyboardResponse, stimulus: "Good night!" };
```

Lastly, add these trials to the timeline. Again, the video configuration trial must come before any other recording trials.
Lastly, add these trials to the timeline. Again, the video configuration trial
must come before any other recording trials.

```javascript
jsPsych.run([videoConfig, startRec, morning, evening, night, stopRec]);
```

It's possible to record only some of the trials. This can be done by moving the stop or start recording trials within the timeline.
It's possible to record only some of the trials. This can be done by moving the
stop or start recording trials within the timeline.

```javascript
jsPsych.run([videoConfig, startRec, morning, evening, stopRec, night]);
Expand Down
Loading

0 comments on commit 686e507

Please sign in to comment.