jspsych · jodeleeuw · Nov 5, 2021 · Oct 7, 2021 · Oct 8, 2021 · Oct 8, 2021
diff --git a/.changeset/khaki-rice-retire.md b/.changeset/khaki-rice-retire.md
@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-browser-check": major
+---
+
+Initial release of the browser-check plugin. The plugin can measure various features and properties of the participant's browser and optionally exclude participants from the study based on these features and properties.
diff --git a/.changeset/new-llamas-remember.md b/.changeset/new-llamas-remember.md
@@ -0,0 +1,5 @@
+---
+"jspsych": minor
+---
+
+`jsPsych.endExperiment()` has a new, optional second parameter for saving data. Passing in an object of key-value pairs will store the pairs in the data for the final trial of the experiment.
diff --git a/docs/demos/jspsych-browser-check-demo1.html b/docs/demos/jspsych-browser-check-demo1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/jspsych@7.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
+</head>
+<body></body>
+<script>
+
+  var jsPsych = initJsPsych();
+
+  var start = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var trial = {
+    type: jsPsychBrowserCheck
+  };
+
+  var show_data = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.run([start, trial_data_loop]);
+  } 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>
diff --git a/docs/demos/jspsych-browser-check-demo2.html b/docs/demos/jspsych-browser-check-demo2.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/jspsych@7.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
+</head>
+<body></body>
+<script>
+
+  var jsPsych = initJsPsych();
+
+  var start = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var trial = {
+    type: jsPsychBrowserCheck,
+    inclusion_function: (data) => {
+      return ['chrome', 'firefox'].contains(data.browser);
+    },
+    exclusion_message: `<p>You must use Chrome or Firefox to complete this experiment.</p>`
+  };
+
+  var show_data = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.run([start, trial_data_loop]);
+  } 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>
diff --git a/docs/demos/jspsych-browser-check-demo3.html b/docs/demos/jspsych-browser-check-demo3.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/jspsych@7.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
+</head>
+<body></body>
+<script>
+
+  var jsPsych = initJsPsych();
+
+  var start = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: '<p>If you want to test the interactive resize, make your browser window small before continuing.</p>',
+    choices: ['Run demo']
+  };
+
+  var trial = {
+    type: jsPsychBrowserCheck,
+    minimum_width: 1000,
+    minimum_height: 600
+  };
+
+  var show_data = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.run([start, trial_data_loop]);
+  } 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>
diff --git a/docs/demos/jspsych-browser-check-demo4.html b/docs/demos/jspsych-browser-check-demo4.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/jspsych@7.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
+</head>
+<body></body>
+<script>
+
+  var jsPsych = initJsPsych();
+
+  var start = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var trial = {
+    type: jsPsychBrowserCheck,
+    inclusion_function: (data) => {
+      return data.browser == 'chrome' && data.mobile === false
+    },
+    exclusion_message: (data) => {
+      if(data.mobile){
+        return '<p>You must use a desktop/laptop computer to participate in this experiment.</p>';
+      } else if(data.browser !== 'chrome'){
+        return '<p>You must use Chrome as your browser to complete this experiment.</p>'
+      }
+    }
+  };
+
+  var show_data = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.run([start, trial_data_loop]);
+  } 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>
diff --git a/docs/overview/exclude-browser.md b/docs/overview/exclude-browser.md
@@ -1,30 +1,12 @@
 # Exclude Participants Based on Browser Features
+*Changed in 7.1*
 
-Online subjects will use many different kinds of browsers. Depending on the experiment, it may be important to specify a minimum feature set of the browser. jsPsych makes this straightforward. Simply specify certain exclusion criteria in the `initJsPsych` method call. If a subject's browser doesn't meet the criteria the experiment will not start and the subject will see a message explaining the problem. For size restrictions the subject will see a message that displays the current size of their browser window and the minimum size needed to start the experiment, giving the subject an opportunity to enlarge the browser window to continue.
+Online subjects will use many different kinds of browsers. 
+Depending on the experiment, it may be important to specify a minimum feature set of the browser. 
 
-Current exclusion options:
-* Minimum browser width & height
-* Support for the WebAudio API
+As of v7.1 of jsPsych, the recommended way to do this is using the [browser-check plugin](../plugins/browser-check.md). 
+This plugin can record many features of the subject's browser and exclude subjects who do not meet a defined set of inclusion criteria.
+Please see the [browser-check plugin documentation](../plugins/browser-check.md) for more details.
 
-## Examples
-
-#### Exclude browsers that are not at least 800x600 pixels
-
-```javascript
-initJsPsych({
-  exclusions: {
-    min_width: 800,
-    min_height: 600
-  }
-});
-```
-
-#### Exclude browsers that do not have access to the WebAudio API
-
-```javascript
-initJsPsych({
-  exclusions: {
-    audio: true
-  }
-});
-```
+The prior approach of using the `exclusions` parameter in `initJsPsych()` is deprecated and will be removed in `v8.0`. 
+You can find the documentation for it in the [7.0 docs](https://www.jspsych.org/7.0/overview/exclude-browser).