push tutorial updates

This commit is contained in:
Josh de Leeuw 2021-02-13 09:12:22 -05:00
parent 7f5870d55e
commit af8ce43784
3 changed files with 26 additions and 4 deletions

View File

@ -10,11 +10,28 @@ Start by downloading the jsPsych library. The most recent version can always be
![releasespage](/img/githubreleases.jpg) ![releasespage](/img/githubreleases.jpg)
!!! warning
We strongly recommend downloading the latest release of the code rather than downloading the zip file of the code via the *Big Green Button* on the GitHub site. Downloading the code via the *Big Green Button* may give you a copy of the library that is in development and contains bugs.
## Step 2: Create a folder to store your experiment files ## Step 2: Create a folder to store your experiment files
Create a folder on your computer to put the experiment files in. Once you've created the folder, open the downloaded archive from step 1, and move the extracted folder (called `jspsych-6.3.0` if using v6.3.0 of jsPsych) into the experiment folder. Here's what it looks like on a Windows machine: Create a folder on your computer to put the experiment files in. Once you've created the folder, open the downloaded archive from step 1, and move the extracted folder (called `jspsych-6.3.0` if using v6.3.0 of jsPsych) into the experiment folder.
![folder setup](/img/folder-setup.png) ```
📂 My Experiment
-- 📂 jspsych-6.3.0
```
If you open up the `jspsych-6.3.0` folder you should see this structure.
```
📂 My Experiment
-- 📂 jspsych-6.3.0
---- 📂 css
---- 📂 examples
---- 📂 plugins
---- 📄 jspsych.js
```
## Step 3: Create a new HTML file ## Step 3: Create a new HTML file
@ -22,7 +39,11 @@ To edit jsPsych code you'll need a programming-friendly text editor. A great fre
Once you've got a text editor that you like, create a new file in the experiment folder called `experiment.html` Once you've got a text editor that you like, create a new file in the experiment folder called `experiment.html`
![folder setup](/img/folder-with-html.png) ```
📂 My Experiment
-- 📂 jspsych-6.3.0
-- 📄 experiment.html
```
## Step 4: Add the bare-minimum HTML code ## Step 4: Add the bare-minimum HTML code

View File

@ -61,6 +61,7 @@ jsPsych.init({
timeline: timeline timeline: timeline
}); });
``` ```
After each step in the tutorial you can view the complete code up to that point by clicking on the expandable box below.
??? example "The complete code so far" ??? example "The complete code so far"
``` html ``` html

View File

@ -13,7 +13,7 @@ extra:
link: 'https://github.com/jspsych' link: 'https://github.com/jspsych'
- icon: 'fontawesome/brands/twitter' - icon: 'fontawesome/brands/twitter'
link: 'https://twitter.com/joshdeleeuw' link: 'https://twitter.com/joshdeleeuw'
copyright: 'Copyright © 2012-2020 Josh de Leeuw' copyright: 'Copyright © 2012-2021 Josh de Leeuw'
google_analytics: google_analytics:
- 'UA-50563838-1' - 'UA-50563838-1'
- 'auto' - 'auto'