add audio demos, fixes #481

2025-05-10 03:00:54 +00:00 · 2017-12-06 12:57:33 -05:00 · 2017-12-06 12:57:33 -05:00 · 6cce1d3898
commit 6cce1d3898
parent fd78450ecf
7 changed files with 104 additions and 0 deletions
--- a/examples/jspsych-audio-button-response.html
+++ b/examples/jspsych-audio-button-response.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../jspsych.js"></script>
+    <script src="../plugins/jspsych-audio-button-response.js"></script>
+    <link rel="stylesheet" href="../css/jspsych.css"></link>
+  </head>
+  <body></body>
+  <script>
+
+  var timeline = [];
+
+  timeline.push({
+    type: 'audio-button-response',
+    stimulus: 'sound/speech_green.mp3',
+    choices: ['Green', 'Blue', 'Red'],
+    prompt: "<p>What word was said?</p>"
+  });
+
+  timeline.push({
+    type: 'audio-button-response',
+    stimulus: 'sound/speech_red.mp3',
+    choices: ['Green', 'Blue', 'Red'],
+    trial_duration: 2000,
+    response_ends_trial: false,
+    prompt: "<p>What word was said? (trial ends after 2s)</p>"
+  });
+
+  jsPsych.init({
+    timeline: timeline,
+    on_finish: function(){jsPsych.data.displayData();}
+  });
+
+  </script>
+</html>
--- a/examples/jspsych-audio-keyboard-response.html
+++ b/examples/jspsych-audio-keyboard-response.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="../jspsych.js"></script>
+  <script src="../plugins/jspsych-audio-keyboard-response.js"></script>
+  <link rel="stylesheet" href="../css/jspsych.css"></link>
+</head>
+<body></body>
+<script>
+  var trial_1 = {
+    type: 'audio-keyboard-response',
+    stimulus: 'sound/speech_blue.mp3',
+    choices: ['y', 'n'],
+    prompt: '<div style="width: 300px; height: 300px; background-color: #0000ff;"></div><p>Does the color match the word? (Y or N)</p>'
+  }
+
+  var trial_2 = {
+    type: 'audio-keyboard-response',
+    stimulus: 'sound/speech_green.mp3',
+    choices: ['y', 'n'],
+    trial_duration: 5000,
+    prompt: '<div style="width: 300px; height: 300px; background-color: #ff0000;"></div><p>Does the color match the word? (Y or N; 5s time limit)</p>'
+  }
+
+  var trial_3 = {
+    type: 'audio-keyboard-response',
+    stimulus: 'sound/speech_red.mp3',
+    choices: jsPsych.NO_KEYS,
+    trial_duration: 2000,
+    prompt: '<p>No response allowed. 2s wait.</p>'
+  }
+
+  jsPsych.init({
+    timeline: [trial_1, trial_2, trial_3],
+    on_finish: function() {
+      jsPsych.data.displayData();
+    },
+    default_iti: 250
+  });
+</script>
+
+</html>
--- a/examples/jspsych-audio-slider-response.html
+++ b/examples/jspsych-audio-slider-response.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="../jspsych.js"></script>
+  <script src="../plugins/jspsych-audio-slider-response.js"></script>
+  <link rel="stylesheet" href="../css/jspsych.css"></link>
+</head>
+<body></body>
+<script>
+
+  var trial_1 = {
+    type: 'audio-slider-response',
+    stimulus: 'sound/speech_joke.mp3',
+    labels: ['Not Funny', 'Funny'],
+    prompt: '<p>How funny is the joke?</p>'
+  }
+
+  jsPsych.init({
+    timeline: [trial_1],
+    on_finish: function() {
+      jsPsych.data.displayData();
+    },
+    default_iti: 250
+  });
+</script>
+
+</html>
--- a/examples/sound/speech_blue.mp3
+++ b/examples/sound/speech_blue.mp3
--- a/examples/sound/speech_green.mp3
+++ b/examples/sound/speech_green.mp3
--- a/examples/sound/speech_joke.mp3
+++ b/examples/sound/speech_joke.mp3
--- a/examples/sound/speech_red.mp3
+++ b/examples/sound/speech_red.mp3