Merge branch 'main' of https://github.com/jspsych/jsPsych into plugin-visual-search-add-fixed-offset

This commit is contained in:
jade 2024-11-04 19:32:52 -05:00
commit 7b0c99f72a
545 changed files with 23037 additions and 25405 deletions

View File

@ -9,43 +9,34 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
strategy: strategy:
matrix: matrix:
node: [14, 16] node: [18, 20]
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Setup Node.js ${{ matrix.node }} - name: Setup Node.js ${{ matrix.node }}
uses: actions/setup-node@v2 uses: actions/setup-node@v3
with: with:
node-version: ${{ matrix.node }} node-version: ${{ matrix.node }}
cache: npm cache: npm
- name: Install npm@v7
run: npm install -g npm@7
- name: Install dependencies - name: Install dependencies
run: npm ci run: npm ci
# Running this after `npm ci` because `npm ci` removes `node_modules`: # Running this after `npm ci` because `npm ci` removes `node_modules`:
- name: Download Turborepo cache - name: Download Turborepo cache
uses: actions/cache@v2 uses: actions/cache@v3
with: with:
path: node_modules/.cache/turbo path: node_modules/.cache/turbo
key: ${{ runner.os }}-node-${{ matrix.node }}-turbo-${{ hashFiles('node_modules/.cache/turbo') }} key: ${{ runner.os }}-node-${{ matrix.node }}-turbo-${{ hashFiles('node_modules/.cache/turbo') }}
restore-keys: | restore-keys: |
${{ runner.os }}-node-${{ matrix.node }}-turbo- ${{ runner.os }}-node-${{ matrix.node }}-turbo-
- name: Check types
run: npm run tsc
- name: Build packages - name: Build packages
run: npm run build run: npm run build
# TODO setup linting
# - name: Lint
# run: npm run lint
- name: Run tests - name: Run tests
run: npm run test -- --ci --coverage --maxWorkers=2 run: npm run test -- --ci --coverage --maxWorkers=2 --reporters=default --reporters=github-actions
env:
NODE_OPTIONS: "--max-old-space-size=4096" # Increase heap size for jest
# TODO setup codecov or coveralls
# - name: Upload coverage to Codecov
# uses: codecov/codecov-action@v1

50
.github/workflows/publish-docs.yml vendored Normal file
View File

@ -0,0 +1,50 @@
name: Publish Docs
on:
workflow_dispatch:
jobs:
deploy-docs:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Setup python
uses: actions/setup-python@v5
with:
python-version: '3.8'
- name: Install poetry using pip
run: pipx install poetry==1.8.0
- name: Get major version only
id: version_major
run: echo "version_major=v$(node -p "require('./packages/jspsych/package.json').version" | awk -F. '{print $1}')" >> "$GITHUB_ENV"
- name: Config git
run: |
git config --global user.name docs-bot
git config --global user.email docs@jspsych.org
- name: Deploy docs
run: npm run docs:deploy ${{ env.version_major }} latest
- name: Switch to gh-pages branch
run: git checkout gh-pages
- name: Push gh-pages branch
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
branch: gh-pages

View File

@ -16,29 +16,33 @@ jobs:
name: Release name: Release
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Setup Node.js 16 - name: Setup Node.js
uses: actions/setup-node@v2 uses: actions/setup-node@v3
with: with:
node-version: 16 node-version: 20
cache: npm cache: npm
- name: Install dependencies - name: Install dependencies
run: npm ci run: npm ci
- name: Download Turborepo cache - name: Download Turborepo cache
uses: actions/cache@v2 uses: actions/cache@v3
with: with:
path: node_modules/.cache/turbo path: node_modules/.cache/turbo
key: ${{ runner.os }}-node-16-turbo-${{ hashFiles('node_modules/.cache/turbo') }} key: ${{ runner.os }}-node-20-turbo-${{ hashFiles('node_modules/.cache/turbo') }}
restore-keys: | restore-keys: |
${{ runner.os }}-node-16-turbo- ${{ runner.os }}-node-20-turbo-
- name: Check types
run: npm run tsc
- name: Build packages
run: npm run build
- name: Run tests - name: Run tests
run: npm run test -- --ci --maxWorkers=2 run: npm run test -- --ci --maxWorkers=2
env:
NODE_OPTIONS: "--max-old-space-size=4096" # Increase heap size for jest
- name: Create Release Pull Request or Publish Packages - name: Create Release Pull Request or Publish Packages
id: changesets id: changesets
@ -52,58 +56,70 @@ jobs:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Pack Dist Archive - name: Pack Dist Archive
if: steps.changesets.outputs.published == 'true'
run: npm run build:archive run: npm run build:archive
- name: Upload Release Assets - name: Upload Release Assets
uses: actions/github-script@v4 uses: actions/github-script@v7
if: steps.changesets.outputs.published == 'true'
with: with:
script: | script: |
const fs = require("fs"); const fs = require("fs");
const publishedPackages = ${{ steps.changesets.outputs.publishedPackages }};
const { owner, repo } = context.repo; const { owner, repo } = context.repo;
const distFile = "dist.zip"; const distFile = "dist.zip";
const assetName = "jspsych.zip";
let errorMessage; /**
for (const { name, version } of publishedPackages) { * Returns all recent releases without a dist archive asset, up to (excluding) the first release
const tag = `${name}@${version}`; * that has a dist archive asset.
// Only upload the dist archive for the core package, plugins, and extensions **/
if (name === "jspsych" || name.includes("/plugin-") || name.includes("/extension-")) { async function fetchReleasesWithoutDistArchive() {
console.log(`Uploading dist archive release asset for ${tag}`); const releasesWithoutDistArchive = [];
try {
// https://docs.github.com/en/rest/reference/repos#get-a-release-by-tag-name for await (const response of github.paginate.iterator(github.rest.repos.listReleases, {
const releaseId = (
await github.request("GET /repos/{owner}/{repo}/releases/tags/{tag}", {
owner, owner,
repo, repo,
tag, })) {
}) for (const release of response.data) {
).data.id; if (!release.assets.some((asset) => asset.name === assetName)) {
releasesWithoutDistArchive.push(release);
} else {
return releasesWithoutDistArchive;
}
}
}
// https://octokit.github.io/rest.js/v18#repos-upload-release-asset return releasesWithoutDistArchive;
await github.repos.uploadReleaseAsset({ }
console.log("Collecting recent releases that do not have a dist archive");
const releasesWithoutDistArchive = await fetchReleasesWithoutDistArchive();
if (releasesWithoutDistArchive.length === 0) {
console.log("The most recent release already has a dist archive. Skipping asset upload.");
return;
}
console.log(`Found ${releasesWithoutDistArchive.length} recent releases without a dist archive.`);
const distFileSize = fs.statSync(distFile).size;
const distFileContents = fs.readFileSync(distFile);
// Upload dist archive for each release without a dist archive, in reverse order so re-running an
// aborted or failed job will pick up where it left off last time
for (const release of releasesWithoutDistArchive.reverse()) {
console.log(`Uploading dist archive release asset for ${release.tag_name}`);
// https://octokit.github.io/rest.js/v20#repos-upload-release-asset
await github.rest.repos.uploadReleaseAsset({
owner, owner,
repo, repo,
release_id: releaseId, release_id: release.id,
name: `jspsych.zip`, name: assetName,
label: "Dist archive (zip)", label: "Dist archive (zip)",
headers: { headers: {
"content-type": "application/zip", "content-type": "application/zip",
"content-length": fs.statSync(distFile).size, "content-length": distFileSize,
}, },
data: fs.readFileSync(distFile), data: distFileContents,
}); });
} catch (error) {
console.log(error);
errorMessage = error.message;
}
}
}
if (errorMessage) {
core.setFailed(errorMessage);
} else {
console.log(`Release assets successfully uploaded`);
} }

47
CITATION.cff Normal file
View File

@ -0,0 +1,47 @@
cff-version: "1.2.0"
authors:
- family-names: Leeuw
given-names: Joshua R.
name-particle: de
orcid: "https://orcid.org/0000-0003-4815-2364"
- family-names: Gilbert
given-names: Rebecca A.
orcid: "https://orcid.org/0000-0003-4574-7792"
- family-names: Luchterhandt
given-names: Björn
orcid: "https://orcid.org/0000-0002-9225-2787"
contact:
- family-names: Leeuw
given-names: Joshua R.
name-particle: de
orcid: "https://orcid.org/0000-0003-4815-2364"
doi: 10.5281/zenodo.7702307
message: If you use this software, please cite our article in the
Journal of Open Source Software.
preferred-citation:
authors:
- family-names: Leeuw
given-names: Joshua R.
name-particle: de
orcid: "https://orcid.org/0000-0003-4815-2364"
- family-names: Gilbert
given-names: Rebecca A.
orcid: "https://orcid.org/0000-0003-4574-7792"
- family-names: Luchterhandt
given-names: Björn
orcid: "https://orcid.org/0000-0002-9225-2787"
date-published: 2023-05-11
doi: 10.21105/joss.05351
issn: 2475-9066
issue: 85
journal: Journal of Open Source Software
publisher:
name: Open Journals
start: 5351
title: "jsPsych: Enabling an Open-Source Collaborative Ecosystem of
Behavioral Experiments"
type: article
url: "https://joss.theoj.org/papers/10.21105/joss.05351"
volume: 8
title: "jsPsych: Enabling an Open-Source Collaborative Ecosystem of
Behavioral Experiments"

View File

@ -48,15 +48,21 @@ See the [contributing to jsPsych](https://www.jspsych.org/latest/developers/cont
## Citation ## Citation
If you use this library in academic work, please cite the [paper that describes jsPsych](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y): If you use this library in academic work, the preferred citation is:
de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:10.3758/s13428-014-0458-y de Leeuw, J.R., Gilbert, R.A., & Luchterhandt, B. (2023). jsPsych: Enabling an open-source collaborative ecosystem of behavioral experiments. *Journal of Open Source Software*, *8*(85), 5351, [https://joss.theoj.org/papers/10.21105/joss.05351](https://joss.theoj.org/papers/10.21105/joss.05351).
This paper is an updated description of jsPsych and includes all current core team members. It replaces the earlier paper that described jsPsych:
de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:[10.3758/s13428-014-0458-y](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y)
Citations help us demonstrate that this library is used and valued, which allows us to continue working on it.
## Contributors ## Contributors
jsPsych is open source project with [numerous contributors](https://github.com/jspsych/jsPsych/graphs/contributors). jsPsych is open source project with [numerous contributors](https://github.com/jspsych/jsPsych/graphs/contributors).
The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)), Becky Gilbert ([@becky-gilbert](https://github.com/becky-gilbert)), and Björn Luchterhandt ([@bjoluc](https://github.com/bjoluc)). The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)), Becky Gilbert ([@becky-gilbert](https://github.com/becky-gilbert)), and Björn Luchterhandt ([@bjoluc](https://github.com/bjoluc)).
jsPsych was created by [Josh de Leeuw](http://www.twitter.com/joshdeleeuw). jsPsych was created by [Josh de Leeuw](https://www.vassar.edu/faculty/jdeleeuw).
We're also grateful for the generous support from a [Mozilla Open Source Support award](https://www.mozilla.org/en-US/moss/), which funded development of the library from 2020-2021. We're also grateful for the generous support from a [Mozilla Open Source Support award](https://www.mozilla.org/en-US/moss/), which funded development of the library from 2020-2022.

View File

@ -34,6 +34,7 @@ The following people have contributed to the development of jsPsych by writing c
* kupiqu - https://github.com/kupiqu * kupiqu - https://github.com/kupiqu
* Daiichiro Kuroki - https://github.com/kurokida * Daiichiro Kuroki - https://github.com/kurokida
* Jonas Lambers * Jonas Lambers
* Max Lovell - https://github.com/max-lovell
* madebyafox - https://github.com/madebyafox * madebyafox - https://github.com/madebyafox
* Shane Martin - https://github.com/shamrt * Shane Martin - https://github.com/shamrt
* Vijay Marupudi - https://github.com/vijaymarupudi * Vijay Marupudi - https://github.com/vijaymarupudi
@ -61,3 +62,6 @@ The following people have contributed to the development of jsPsych by writing c
* Rob Wilkinson - https://github.com/RobAWilkinson * Rob Wilkinson - https://github.com/RobAWilkinson
* Andy Woods - https://github.com/andytwoods * Andy Woods - https://github.com/andytwoods
* Reto Wyss - https://github.com/retowyss * Reto Wyss - https://github.com/retowyss
* Shaobin Jiang - https://github.com/Shaobin-Jiang
* Haotian Tu - https://github.com/thtTNT
* Joshua Unrau - https://github.com/joshunrau

View File

@ -2,10 +2,16 @@
jsPsych is open source project with [numerous contributors](https://github.com/jspsych/jsPsych/graphs/contributors). The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)), Becky Gilbert ([@becky-gilbert](https://github.com/becky-gilbert)), and Björn Luchterhandt ([@bjoluc](https://github.com/bjoluc)). jsPsych is open source project with [numerous contributors](https://github.com/jspsych/jsPsych/graphs/contributors). The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)), Becky Gilbert ([@becky-gilbert](https://github.com/becky-gilbert)), and Björn Luchterhandt ([@bjoluc](https://github.com/bjoluc)).
jsPsych was created by [Josh de Leeuw :fontawesome-brands-twitter:](http://www.twitter.com/joshdeleeuw). jsPsych was created by [Josh de Leeuw](https://www.vassar.edu/faculty/jdeleeuw).
### Citation ### Citation
If you use jsPsych please cite the following paper. If you use this library in academic work, the preferred citation is:
de Leeuw, J. R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a web browser. _Behavior Research Methods_, _47_(1), 1-12. [doi:10.3758/s13428-014-0458-y](https://doi.org/10.3758/s13428-014-0458-y). de Leeuw, J.R., Gilbert, R.A., & Luchterhandt, B. (2023). jsPsych: Enabling an open-source collaborative ecosystem of behavioral experiments. *Journal of Open Source Software*, *8*(85), 5351, [https://joss.theoj.org/papers/10.21105/joss.05351](https://joss.theoj.org/papers/10.21105/joss.05351).
This paper is an updated description of jsPsych and includes all current core team members. It replaces the earlier paper that described jsPsych:
de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:[10.3758/s13428-014-0458-y](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y)
Citations help us demonstrate that this library is used and valued, which allows us to continue working on it.

View File

@ -1,19 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-webgazer-init-camera@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-webgazer-init-camera@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-webgazer-calibrate@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-webgazer-calibrate@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-webgazer-validate@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-webgazer-validate@2.0.0"></script>
<script src="js/webgazer/webgazer.js"></script> <script src="js/webgazer/webgazer.js"></script>
<script src="https://unpkg.com/@jspsych/extension-webgazer@1.0.2"></script> <script src="https://unpkg.com/@jspsych/extension-webgazer@1.1.0"></script>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css"
/> />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
@ -121,7 +121,7 @@
} }
var begin = { var begin = {
type: jsPsychHtmKeyboardResponse, type: jsPsychHtmlKeyboardResponse,
stimulus: `<p>The next screen will show an image to demonstrate adding the webgazer extension to a trial.</p> stimulus: `<p>The next screen will show an image to demonstrate adding the webgazer extension to a trial.</p>
<p>Just look at the image while eye tracking data is collected. The trial will end automatically.</p> <p>Just look at the image while eye tracking data is collected. The trial will end automatically.</p>
<p>Press any key to start.</p> <p>Press any key to start.</p>
@ -142,7 +142,7 @@
} }
var show_data = { var show_data = {
type: jsPsychHtmKeyboardResponse, type: jsPsychHtmlKeyboardResponse,
stimulus: function() { stimulus: function() {
var trial_data = jsPsych.data.getLastTrialData().values(); var trial_data = jsPsych.data.getLastTrialData().values();
var trial_json = JSON.stringify(trial_data, null, 2); var trial_json = JSON.stringify(trial_data, null, 2);

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-animation@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-animation@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<style> <style>
#jspsych-animation-image { #jspsych-animation-image {
height: 80% !important; height: 80% !important;

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.0.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.0.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>
@ -30,7 +30,7 @@
stimulus: 'sound/roar.mp3', stimulus: 'sound/roar.mp3',
choices: images, choices: images,
prompt: "<p>Which animal made the sound?</p>", prompt: "<p>Which animal made the sound?</p>",
button_html: '<img src="%choice%" />' button_html: (choice)=>`<img style="cursor: pointer; margin: 10px;" src="${choice}" />`
}; };
timeline.push(trial); timeline.push(trial);

View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@8.0.3"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.0.1"></script>-->
<script src="../../packages/plugin-audio-button-response/dist/index.browser.js"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<!--<link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />-->
<link rel="stylesheet" href="../../packages/jspsych/css/jspsych.css" />
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const timeline = [];
// sound source: https://www.videvo.net/sound-effect/lion-growl-angry-gene-pe931902/249942/
// images source: http://clipart-library.com/cartoon-animal-clipart.html
const images = ['img/lion.png', 'img/elephant.png', 'img/monkey.png']
const preload = {
type: jsPsychPreload,
auto_preload: true,
images: images
}
const trial = {
type: jsPsychAudioButtonResponse,
stimulus: 'sound/telephone.mp3',
prompt: '<p>Which key was pressed first?</p>',
choices: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'],
button_layout: 'grid',
grid_rows: 4,
grid_columns: 3
}
timeline.push(trial);
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@2.0.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@2.0.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-browser-check@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-browser-check@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-browser-check@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-browser-check@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-call-function@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-call-function@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-call-function@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>
@ -22,13 +22,13 @@
} }
// To use the canvas stimulus function with timeline variables, // To use the canvas stimulus function with timeline variables,
// the jsPsych.timelineVariable() function can be used inside your stimulus function. // the jsPsych.evaluateTimelineVariable() function can be used inside your stimulus function.
// In addition, this code demonstrates how to check whether participants' answers were correct or not. // In addition, this code demonstrates how to check whether participants' answers were correct or not.
const circle_procedure = { const circle_procedure = {
timeline: [{ timeline: [{
type: jsPsychCanvasButtonResponse, type: jsPsychCanvasButtonResponse,
stimulus: function(c) { stimulus: function(c) {
filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color')); filledCirc(c, jsPsych.evaluateTimelineVariable('radius'), jsPsych.evaluateTimelineVariable('color'));
}, },
canvas_size: [300, 300], canvas_size: [300, 300],
choices: ['Red', 'Green', 'Blue'], choices: ['Red', 'Green', 'Blue'],

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-categorize-animation@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<style> <style>
#jspsych-categorize-animation-stimulus { #jspsych-categorize-animation-stimulus {
height: 80% !important; height: 80% !important;

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-categorize-animation@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<style> <style>
#jspsych-categorize-animation-stimulus { #jspsych-categorize-animation-stimulus {
height: 80% !important; height: 80% !important;

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-categorize-html@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-categorize-html@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-categorize-image@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-categorize-image@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script> <script src="https://unpkg.com/@jspsych/plugin-cloze@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script> <script src="https://unpkg.com/@jspsych/plugin-cloze@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script> <script src="https://unpkg.com/@jspsych/plugin-cloze@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<!--<script src="../../packages/extension-mouse-tracking/dist/index.browser.js"></script>--> <!--<script src="../../packages/extension-mouse-tracking/dist/index.browser.js"></script>-->
<script src="https://unpkg.com/@jspsych/extension-mouse-tracking@1.0.2"></script> <script src="https://unpkg.com/@jspsych/extension-mouse-tracking@1.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,13 +2,13 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<!-- <script src="../../packages/extension-record-video/dist/index.browser.js"></script> --> <!-- <script src="../../packages/extension-record-video/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/extension-record-video@1.0.1"></script> <script src="https://unpkg.com/@jspsych/extension-record-video@1.1.0"></script>
<!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-external-html@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-external-html@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-free-sort@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-free-sort@2.0.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-fullscreen@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-fullscreen@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<style> <style>
html, html,
body { body {

View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
<style> <style>
.jspsych-btn {margin-bottom: 10px;} .jspsych-btn {margin-bottom: 10px;}
</style> </style>

View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
<style> <style>
.jspsych-btn {margin-bottom: 10px;} .jspsych-btn {margin-bottom: 10px;}
</style> </style>

View File

@ -1,12 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.0.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
<style> <style>
.jspsych-btn {margin-bottom: 10px;} .jspsych-btn {margin-bottom: 10px;}
</style> </style>
@ -61,7 +61,7 @@
}, },
prompt: '<p>Click the object the matches the spoken name.</p>', prompt: '<p>Click the object the matches the spoken name.</p>',
choices: ['img/9.gif','img/10.gif','img/11.gif','img/12.gif'], choices: ['img/9.gif','img/10.gif','img/11.gif','img/12.gif'],
button_html: '<img src="%choice%" style="width:100px; padding: 20px;"></img>' button_html: (choice) => `<img src=${choice} style="width:100px; padding: 20px;"></img>`
} }
var trial_loop = { var trial_loop = {

View File

@ -2,9 +2,9 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css">
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const timeline = [];
const trial = {
type: jsPsychHtmlButtonResponse,
stimulus: `<div style="width: 600px">
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: green; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: blue; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: green; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: blue; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: gray; display: inline-block"></div>
</div>`,
choices: ['red', 'green', 'blue'],
prompt: "<p>What color should the gray block be?</p>",
button_html: (choice) => `<div style="width: 80px; height: 80px; margin: 20px; background-color: ${choice}; cursor: pointer;"></div>`
};
timeline.push(trial);
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-slider-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-slider-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,14 +2,14 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> --> <!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-html-video-response@2.0.0"></script>
<!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
<!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,14 +2,14 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> --> <!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-html-video-response@2.0.0"></script>
<!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
<!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,15 +2,15 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> --> <!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-video-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-video-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-html-video-response@2.0.0"></script>
<!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
<!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-iat-html@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-iat-html@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-iat-image@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-iat-image@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-slider-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-slider-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
<style> <style>
.jspsych-btn {margin-bottom: 10px;} .jspsych-btn {margin-bottom: 10px;}
</style> </style>

View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
<style> <style>
.jspsych-btn {margin-bottom: 10px;} .jspsych-btn {margin-bottom: 10px;}
</style> </style>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-instructions@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-instructions@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-instructions@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-maxdiff@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-maxdiff@2.0.1"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -3,13 +3,13 @@
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> --> <!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<!-- <script src="../../packages/plugin-mirror-camera/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-mirror-camera/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-mirror-camera@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-mirror-camera@2.0.0"></script>
<!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> --> <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script> <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-reconstruction@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-reconstruction@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-resize@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-resize@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-same-different-html@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-same-different-html@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-same-different-image@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-same-different-image@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.3"></script> <script src="https://unpkg.com/@jspsych/plugin-sketchpad@2.0.1"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.3"></script> <script src="https://unpkg.com/@jspsych/plugin-sketchpad@2.0.1"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.3"></script> <script src="https://unpkg.com/@jspsych/plugin-sketchpad@2.0.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script> <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css"> <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>
@ -16,28 +16,29 @@
const trial = { const trial = {
type: jsPsychSurvey, type: jsPsychSurvey,
pages: [ survey_json: {
showQuestionNumbers: false,
elements:
[ [
{ {
type: 'html', type: 'radiogroup',
prompt: 'Please answer the following questions:', title: "Which of the following do you like the most?",
name: 'vegetablesLike',
choices: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas', 'Broccoli']
}, },
{ {
type: 'multi-choice', type: 'checkbox',
prompt: "Which of the following do you like the most?", title: "Which of the following do you like?",
name: 'VegetablesLike', name: 'fruitLike',
options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'], description: "You can select as many as you want.",
required: true choices: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Kiwi', 'Mango'],
showOtherItem: true,
showSelectAllItem: true,
showNoneItem: true,
required: true,
}, },
{
type: 'multi-select',
prompt: "Which of the following do you like?",
name: 'FruitLike',
options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'],
required: false,
}
] ]
], },
}; };
const timeline = [trial]; const timeline = [trial];

View File

@ -3,11 +3,11 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script> <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css"> <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>
@ -17,45 +17,60 @@
const trial = { const trial = {
type: jsPsychSurvey, type: jsPsychSurvey,
survey_json: {
showQuestionNumbers: false,
title: 'My questionnaire',
completeText: 'Done!',
pageNextText: 'Continue',
pagePrevText: 'Previous',
pages: [ pages: [
[ {
name: 'page1',
elements: [
{ {
type: 'text', type: 'text',
prompt: "Where were you born?", title: 'Where were you born?',
placeholder: 'City, State, Country', placeholder: 'City, State/Region, Country',
name: 'birthplace', name: 'birthplace',
required: true, size: 30,
isRequired: true,
}, },
{ {
type: 'text', type: 'text',
prompt: "How old are you?", title: 'How old are you?',
name: 'age', name: 'age',
textbox_columns: 5, isRequired: false,
required: false, inputType: 'number',
min: 0,
max: 100,
defaultValue: 0
} }
], ]
[ },
{ {
type: 'multi-choice', name: 'page2',
prompt: "What's your favorite color?", elements: [
options: ['blue','yellow','pink','teal','orange','lime green','other','none of these'], {
type: 'radiogroup',
title: "What's your favorite color?",
choices: ['Blue','Yellow','Pink','Teal','Orange','Lime green'],
showNoneItem: true,
showOtherItem: true,
colCount: 0,
name: 'FavColor', name: 'FavColor',
}, },
{ {
type: 'multi-select', type: 'checkbox',
prompt: "Which of these animals do you like? Select all that apply.", title: 'Which of these animals do you like? Select all that apply.',
options: ['lion','squirrel','badger','whale'], choices: ['Lion','Squirrel','Badger','Whale', 'Turtle'],
option_reorder: 'random', choicesOrder: 'random',
columns: 0, colCount: 0,
name: 'AnimalLike', name: 'FavAnimals',
} }
] ]
], }
title: 'My questionnaire', ]
button_label_next: 'Continue', }
button_label_back: 'Previous',
button_label_finish: 'Submit',
show_question_numbers: 'onPage'
}; };
const timeline = [trial]; const timeline = [trial];

View File

@ -3,11 +3,11 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script> <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css"> <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>
@ -17,62 +17,79 @@
const trial = { const trial = {
type: jsPsychSurvey, type: jsPsychSurvey,
survey_json: {
showQuestionNumbers: false,
title: 'Likert scale examples',
pages: [ pages: [
[
{ {
type: 'likert', elements: [
prompt: 'I like to eat vegetables.', {
likert_scale_min_label: 'Strongly Disagree', type: 'rating',
likert_scale_max_label: 'Strongly Agree', name: 'like-vegetables',
likert_scale_values: [ title: 'I like to eat vegetables.',
{value: 1}, description: 'Button rating scale with min/max descriptions',
{value: 2}, minRateDescription: 'Strongly Disagree',
{value: 3}, maxRateDescription: 'Strongly Agree',
{value: 4}, displayMode: 'buttons',
{value: 5} rateValues: [1,2,3,4,5]
]
}, },
{ {
type: 'likert', type: 'rating',
prompt: 'I like to eat fruit.', name: 'like-cake',
likert_scale_min_label: 'Strongly Disagree', title: 'I like to eat cake.',
likert_scale_max_label: 'Strongly Agree', description: 'Star rating scale with min/max descriptions',
likert_scale_values: [ minRateDescription: 'Strongly Disagree',
{value: 1}, maxRateDescription: 'Strongly Agree',
{value: 2}, rateType: 'stars',
{value: 3}, rateCount: 10,
{value: 4}, rateMax: 10,
{value: 5}
]
}, },
{ {
type: 'likert', type: 'rating',
prompt: 'I like to eat meat.', name: 'like-cooking',
likert_scale_min_label: 'Strongly Disagree', title: 'How much do you enjoy cooking?',
likert_scale_max_label: 'Strongly Agree', description: 'Smiley rating scale without min/max descriptions',
likert_scale_values: [ rateType: 'smileys',
{value: 1}, rateCount: 10,
{value: 2}, rateMax: 10,
{value: 3}, scaleColorMode: 'colored',
{value: 4},
{value: 5}
]
},
],
[
{
type: 'likert-table',
prompt: ' ',
statements: [
{prompt: 'I like to eat vegetables', name: 'VeggiesTable'},
{prompt: 'I like to eat fruit', name: 'FruitTable'},
{prompt: 'I like to eat meat', name: 'MeatTable'},
],
options: ['Strongly Disagree', 'Disagree', 'Neutral', 'Agree', 'Strongly Agree'],
} }
] ]
}, {
elements: [
{
type: 'matrix',
name: 'like-food-matrix',
title: 'Matrix question for rating mutliple statements on the same scale.',
alternateRows: true,
isAllRowRequired: true,
rows: [
{text: 'I like to eat vegetables.', value: 'VeggiesTable'},
{text: 'I like to eat fruit.', value: 'FruitTable'},
{text: 'I like to eat cake.', value: 'CakeTable'},
{text: 'I like to cook.', value: 'CookTable'},
], ],
columns: [{
"value": 5,
"text": "Strongly agree"
}, {
"value": 4,
"text": "Agree"
}, {
"value": 3,
"text": "Neutral"
}, {
"value": 2,
"text": "Disagree"
}, {
"value": 1,
"text": "Strongly disagree"
}]
}
]
}
]
}
}; };
const timeline = [trial]; const timeline = [trial];

View File

@ -3,11 +3,11 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script> <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css"> <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>
@ -15,19 +15,57 @@
const jsPsych = initJsPsych(); const jsPsych = initJsPsych();
const survey_function = (survey) => {
// If it's the question page, then hide the buttons and move on automatically.
// If it's the feedback page, then show the navigation buttons.
function updateNavButtons(sender, options) {
if (options.newCurrentPage.getPropertyValue("name") === "feedback") {
survey.showNavigationButtons = "bottom";
} else {
survey.showNavigationButtons = "none";
}
}
survey.onCurrentPageChanging.add(updateNavButtons);
}
const trial = { const trial = {
type: jsPsychSurvey, type: jsPsychSurvey,
pages: [ survey_json: {
[ showQuestionNumbers: false,
title: 'Conditional question visibility.',
showNavigationButtons: "none",
goNextPageAutomatic: true,
allowCompleteSurveyAutomatic: true,
pages: [{
name: 'question',
elements: [
{ {
type: 'multi-choice', type: 'radiogroup',
prompt: 'During the experiment, are allowed to write things down on paper to help you?', title: 'During the experiment, are you allowed to write things down on paper to help you?',
options: ["Yes", "No"], choices: ["Yes", "No"],
correct_response: "No", name: "WriteOK",
required: true isRequired: true
}, }
]
], ],
}, {
name: 'feedback',
elements: [
{
type: 'html',
name: 'incorrect',
visibleIf: '{WriteOK} = "Yes"',
html: '<h4>That response was incorrect.</h4><p>Please return to the previous page and try again.</p>'
},
{
type: 'html',
name: 'correct',
visibleIf: '{WriteOK} == "No"',
html: '<h4>Congratulations!</h4>'
}
]
}]
},
survey_function: survey_function
}; };
const timeline = [trial]; const timeline = [trial];

View File

@ -3,11 +3,11 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script> <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css"> <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>
@ -15,53 +15,71 @@
const jsPsych = initJsPsych(); const jsPsych = initJsPsych();
const question_info = [ // values that change across survey trials - each object represents a single trial
const question_variables = [
{ {
'fruit': 'apples', 'fruit': 'apples',
'Q1_prompt': 'Do you like apples?', 'Q1_prompt': 'Do you like apples?',
'Q1_type': 'regular' 'Q1_type': 'regular',
'Q2_word': 'like'
},
{
'fruit': 'pears',
'Q1_prompt': 'Do you like pears?',
'Q1_type': 'regular',
'Q2_word': 'like'
}, },
{ {
'fruit': 'bananas', 'fruit': 'bananas',
'Q1_prompt': 'Do you NOT like bananas?', 'Q1_prompt': 'Do you NOT like bananas?',
'Q1_type': 'reverse' 'Q1_type': 'reverse',
'Q2_word': 'hate'
}, },
]; ];
const survey = { // create an array to store all of our survey trials so that we can easily randomize their order
type: jsPsychSurvey, survey_trials = [];
pages:[
[ // construct the survey trials dynamically using an array of question-specific information
for (let i=0; i<question_variables.length; i++) {
// set up the survey JSON for this trial
// any question-specific variables come from the appropriate object in the question_variables array
let survey_json = {
showQuestionNumbers: false,
title: 'Dynamically constructing survey trials.',
completeText: 'Next >>',
elements: [
{ {
type: 'multi-choice', type: 'radiogroup',
prompt: jsPsych.timelineVariable('Q1_prompt'), title: question_variables[i].Q1_prompt,
options: ['Yes', 'No'], choices: ['Yes', 'No'],
name: 'Q1' name: 'Q1'
}, },
{ {
type: 'text', type: 'text',
prompt: function() { title: 'What do you '+question_variables[i].Q2_word+' most about '+question_variables[i].fruit+'?',
return `What's your favorite thing about ${jsPsych.timelineVariable('fruit')}?`;
},
name: 'Q2' name: 'Q2'
} }
] ]
], };
// set up a survey trial object using the JSON we've just created for this question,
// and add the trial object to the survey trials array
survey_trials.push({
type: jsPsychSurvey,
survey_json: survey_json,
data: { data: {
'Q1_prompt': jsPsych.timelineVariable('Q1_prompt'), 'Q1_prompt': question_variables[i].Q1_prompt,
'Q1_type': jsPsych.timelineVariable('Q1_type'), 'Q1_type': question_variables[i].Q1_type,
'fruit': jsPsych.timelineVariable('fruit') 'Q2_word': question_variables[i].Q2_word,
}, 'fruit': question_variables[i].fruit
button_label_finish: 'Continue' }
}; });
const survey_procedure = { }
timeline: [survey],
timeline_variables: question_info,
randomize_order: true
};
const timeline = [survey_procedure]; const timeline = jsPsych.randomization.shuffle(survey_trials);
if (typeof jsPsych !== "undefined") { if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline)); jsPsych.run(generateDocsDemoTimeline(timeline));

View File

@ -0,0 +1,144 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="../../packages/plugin-survey/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
<style>
/* center the audio player and all image question types in the survey */
div.sd-question--image,
div.sd-question[data-name="audio-player"] {
text-align: center;
}
/* use 'data-name' to select any specific question by name */
div[data-name="audio-response"] {
text-align: center;
margin-top: 30px;
}
</style>
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
// Embed HTML, images, videos and audio into the survey
const image_video_html_trial_info = {
pages: [{
elements: [{
type: "panel",
name: "html-img-panel",
description: "This panel contains an HTML element and an image element.",
elements: [{
type: "html",
name: "html",
html: "<div style='text-align: center; align-items: center; align-content: center; justify-content: center;'><p style='text-align: center; color: darkgreen; font-size: 2em;'>This demo shows how you can add <em>HTML</em>, <strong>images</strong>, and <sub>video</sub> to your jsPsych survey trial.</p></div>"
}, {
type: "image",
name: "monkey",
imageLink: "img/monkey.png",
altText: "Monkey",
imageWidth: 300
}]
}, {
type: "panel",
name: "video-panel",
description: "This panel contains a fun fish video.",
elements: [{
type: "image",
name: "jspsych-tutorial",
imageLink: "video/fish.mp4",
imageWidth: 700,
imageHeight: 350
}],
}]
}],
widthMode: "static",
width: 900,
completeText: 'Next'
};
const image_video_html_trial = {
type: jsPsychSurvey,
survey_json: image_video_html_trial_info
};
// Using images as response options
const image_choice_trial_info = {
elements: [{
type: "imagepicker",
name: "animals",
title: "Which animals would you like to see in real life?",
description: "Please select all that apply.",
choices: [{
value: "lion",
imageLink: "img/lion.png",
text: "Lion"
}, {
value: "monkey",
imageLink: "img/monkey.png",
text: "Monkey"
}, {
value: "elephant",
imageLink: "img/elephant.png",
text: "Elephant"
}],
showLabel: true,
multiSelect: true
}],
showQuestionNumbers: "off",
completeText: 'Next',
};
const image_choice_trial = {
type: jsPsychSurvey,
survey_json: image_choice_trial_info
};
// Add sound to an HTML element
// This also demonstrates response validation
const sound_trial_info = {
elements: [{
type: "html",
name: "audio-player",
html: "<audio controls><source src='sound/speech_red.mp3' type='audio/mp3'></audio>"
},
{
type: "text",
name: "audio-response",
title: "Please play the sound above and then type the word that you heard in the box below.",
description: "Try getting it wrong to see the response validation.",
required: true,
validators: [{
type: "regex",
text: "Oops, that's not correct. Try again!",
regex: "[rR]{1}[eE]{1}[dD]{1}"
}],
}],
completeText: "Check my response",
showQuestionNumbers: "off"
};
const sound_trial = {
type: jsPsychSurvey,
survey_json: sound_trial_info
}
const timeline = [image_video_html_trial, image_choice_trial, sound_trial];
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

View File

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="../../packages/plugin-survey/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const timeline = [];
const text_masking_json = {
elements: [
{
type: "html",
name: "intro",
html: "<h3>Input masking examples</h3><p>You can use input masking with text questions to add automatic formatting to the participant's answer. The mask types are: currency, decimal, pattern, and datetime. These masks will also restrict the types of characters that can be entered, e.g. only numbers or letters."
},
{
type: "text",
name: "currency",
title: "Currency:",
description: "This currency mask adds a prefix/suffix to the number to indicate the currency. Enter some numbers to see the result.",
maskType: "currency",
maskSettings: {
prefix: "$",
suffix: " USD"
}
},
{
type: "text",
name: "decimal",
title: "Decimal:",
description: "This numeric mask will specify the number of decimals allowed. You can enter numbers with up to three decimals (precision: 3).",
maskType: "numeric",
maskSettings: {
precision: 3
}
},
{
type: "text",
name: "phone",
title: "Phone:",
description: "This pattern mask will format the numbers as a phone number.",
maskType: "pattern",
maskSettings: {
pattern: "+9 (999)-999-9999"
}
},
{
type: "text",
name: "creditcard",
title: "Credit card number:",
description: "This pattern mask will format the numbers as a credit card number.",
maskType: "pattern",
maskSettings: {
pattern: "9999 9999 9999 9999"
}
},
{
type: "text",
name: "licenseplate",
title: "License plate number:",
description: "A pattern mask can also be used with letters. Enter a license plate number in the format ABC-1234.",
maskType: "pattern",
maskSettings: {
pattern: "aaa-9999"
}
}
],
showQuestionNumbers: false
};
timeline.push({
type: jsPsychSurvey,
survey_json: text_masking_json
});
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-html-form@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-html-form@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-html-form@1.0.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-html-form@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-likert@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-likert@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css" /> <link rel="stylesheet" href="docs-demo.css" type="text/css" />
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

View File

@ -2,11 +2,11 @@
<html> <html>
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.1"></script> <script src="https://unpkg.com/jspsych@8.0.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-video-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-video-button-response@2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css"> <link rel="stylesheet" href="docs-demo.css" type="text/css">
</head> </head>
<body></body> <body></body>

Some files were not shown because too many files have changed in this diff Show More