switch example files to string-based keys #396

examples/data-add-properties.html

@@ -16,7 +16,7 @@
   var block_1 = {
     type: 'image-keyboard-response',
     stimulus: 'img/happy_face_1.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'],
     prompt: '<p>The data displayed on the next page should have a subject and completed property. Press Y or N.</p>'
   }
 

examples/data-as-function.html

@@ -16,7 +16,7 @@
   var block_1 = {
     type: 'image-keyboard-response',
     stimulus: 'img/happy_face_1.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'],
     prompt: '<p>Data should have a random int 0-19 on next page. Y or N.</p>',
     data: function() {
       return {

examples/data-from-timeline.html

@@ -22,7 +22,7 @@
   var node = {
     type: 'image-keyboard-response',
     timeline: [trial_1, trial_2, trial_3],
-    choices: [89, 78], // Y or N
+    choices: ['y','n'], 
     prompt: '<p>Have you seen this face before? Y or N.</p>',
     stimulus_width: 300,
     data: {

examples/demo-flanker.html

@@ -54,15 +54,15 @@
         var test = {
           timeline: [{
             type: 'image-keyboard-response',
-            choices: [37, 39],
+            choices: ['ArrowLeft', 'ArrowRight'],
             trial_duration: 1500,
             stimulus: jsPsych.timelineVariable('stimulus'),
             data: jsPsych.timelineVariable('data'),
             on_finish: function(data){
               var correct = false;
-              if(data.direction == 'left' &&  data.key_press == 37 && data.rt > -1){
+              if(data.direction == 'left' &&  data.key_press == 'ArrowLeft' && data.rt > -1){
                 correct = true;
-              } else if(data.direction == 'right' && data.key_press == 39 && data.rt > -1){
+              } else if(data.direction == 'right' && data.key_press == 'ArrowRight' && data.rt > -1){
                 correct = true;
               }
               data.correct = correct;

examples/demos/demo_2.html

@@ -16,22 +16,25 @@
 	var trial_1 = {
 		type: "image-keyboard-response",
 		stimulus: '../img/happy_face_1.jpg',
-		choices: [89, 78],
+    choices: ['y','n'],
-		prompt: '<p>Is this face happy? Y or N.</p>'
+    render_on_canvas: false,
+		prompt: '<p>Is this face happy? Press "y" or "n".</p>'
   }
 
   var trial_2 = {
     type: 'image-keyboard-response',
     stimulus: '../img/sad_face_2.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'], 
-    prompt: '<p>Is this face happy? Y or N.</p>'
+    render_on_canvas: false,
+    prompt: '<p>Is this face happy? Press "y" or "n".</p>'
   }
 
   var trial_3 = {
     type: 'image-keyboard-response',
     stimulus: '../img/happy_face_2.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'], 
-    prompt: '<p>Is this face happy? Y or N.</p>',
+    render_on_canvas: false,
+    prompt: '<p>Is this face happy? Press "y" or "n".</p>',
   }
 
 

examples/demos/demo_3.html

@@ -23,7 +23,7 @@
         var test = {
           timeline: [{
             type: 'html-keyboard-response',
-            choices: [37, 39],
+            choices: ["ArrowLeft", "ArrowRight"],
             stimulus: jsPsych.timelineVariable('stimulus'),
             data: jsPsych.timelineVariable('data'),
             post_trial_gap: 1500,

examples/display-element-to-embed-experiment.html

@@ -31,27 +31,28 @@
   var trial_1 = {
     type: 'image-keyboard-response',
     stimulus: 'img/happy_face_1.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'], 
     prompt: '<p>Have you seen this face before? Y or N.</p>',
-    stimulus_width: 300
+    stimulus_width: 300,
+    render_on_canvas: false
   }
 
   var trial_2 = {
     type: 'image-keyboard-response',
     stimulus: 'img/happy_face_2.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'],
     trial_duration: 5000,
     prompt: '<p>Have you seen this face before? Y or N. (5s time limit).</p>',
-    stimulus_width: 300
+    stimulus_width: 300,
+    render_on_canvas: false
   }
 
   var trial_3 = {
     type: 'html-keyboard-response',
-    choices: jsPsych.NO_KEYS, // Y or N
+    choices: jsPsych.NO_KEYS, 
     trial_duration: 5000,
     prompt: '<p>No response allowed. 5s wait.</p>',
-    stimulus: '<p>:)</p>',
+    stimulus: '<p>:)</p>'
-    is_html: true
   }
 
   var node = {

examples/end-active-node.html

@@ -1,17 +1,10 @@
 <!DOCTYPE html>
 <html>
-
 <head>
-
   <script src="../jspsych.js"></script>
   <script src="../plugins/jspsych-html-keyboard-response.js"></script>
   <script src="../plugins/jspsych-image-keyboard-response.js"></script>
   <link rel="stylesheet" href="../css/jspsych.css">
-  <style>
-    img {
-      width: 300px;
-    }
-  </style>
 </head>
 <body></body>
 <script>
@@ -26,10 +19,12 @@
 
   var block = {
     type: 'image-keyboard-response',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'],
-    prompt: '<p>Press Y to Continue. Press N to end this node of the experiment.</p>',
+    stimulus_width: 300,
+    render_on_canvas: false,
+    prompt: '<p>Press "y" to continue. Press "n" to end this node of the experiment.</p>',
     on_finish: function(data) {
-      if (data.key_press == 78) {
+      if (data.key_press == "n") {
         jsPsych.endCurrentTimeline();
       }
     },
@@ -38,7 +33,7 @@
 
   var after_block = {
     type: 'html-keyboard-response',
-    stimulus: '<p>The next node</p>',
+    stimulus: '<p>The next node.</p>',
   }
 
   jsPsych.init({

examples/end-experiment.html

@@ -24,10 +24,11 @@
 
   var block = {
     type: 'image-keyboard-response',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'], 
-    prompt: '<p>Press Y to Continue. Press N to end the experiment</p>',
+    prompt: '<p>Press "y" to continue. Press "n" to end the experiment.</p>',
+    render_on_canvas: false,
     on_finish: function(data) {
-      if (data.key_press == 78) {
+      if (data.key_press == 'n') {
         jsPsych.endExperiment('The experiment was ended. This is the end message.');
       }
     },

examples/jspsych-categorize-animation.html

@@ -6,9 +6,6 @@
   <script src="../plugins/jspsych-categorize-animation.js"></script>
   <link rel="stylesheet" href="../css/jspsych.css">
   <style>
-    img {
-      width: 300px;
-    }
     #jspsych-categorize-animation-stimulus {
       width: 300px;
       height: 225px;
@@ -24,18 +21,19 @@
   var trials = {
     type: 'categorize-animation',
     stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
-    key_answer: 68,
+    key_answer: 'd',
-    choices: [68, 83],
+    choices: ['d', 's'],
     text_answer: 'different',
     feedback_duration: 1000,
     correct_text: "<p>Correct. The faces had %ANS% expressions.</p>",
     incorrect_text: "<p>Incorrect. The faces had %ANS% expressions.</p>",
-    prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
+    prompt: "<p>Press &quot;d&quot; if the faces had different emotional expressions. Press &quot;s&quot; if the faces had the same emotional expression.</p>",
     //render_on_canvas: false
   };
 
   jsPsych.init({
     timeline: [trials],
+    preload_images: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
     on_finish: function() {
       jsPsych.data.displayData();
     }

examples/jspsych-categorize-html.html

@@ -5,23 +5,18 @@
   <script src="../jspsych.js"></script>
   <script src="../plugins/jspsych-categorize-html.js"></script>
   <link rel="stylesheet" href="../css/jspsych.css">
-  <style>
-    img {
-      width: 300px;
-    }
-  </style>
 </head>
 <body></body>
 <script>
   var trial = {
     type: 'categorize-html',
     stimulus: '<div style="margin: auto; width: 200px; height: 200px; background-color: blue;"></div>',
-    key_answer: 66,
+    key_answer: 'b',
-    choices: [66, 80],
+    choices: ['b', 'p'],
     text_answer: 'blue',
     correct_text: "<p>Correct. This color is %ANS%.</p>",
     incorrect_text: "<p>Incorrect. This color is %ANS%. Please press the correct key to continue.</p>",
-    prompt: "<p>Press B if the square is blue. Press P if the square is purple.</p>",
+    prompt: "<p>Press &quot;b&quot; if the square is blue. Press &quot;p&quot; if the square is purple.</p>",
     trial_duration: 1500,
     show_feedback_on_timeout: false,
     force_correct_button_press: true

examples/jspsych-categorize-image.html

@@ -16,12 +16,12 @@
   var trials = {
     type: 'categorize-image',
     stimulus: 'img/happy_face_1.jpg',
-    key_answer: 72,
+    key_answer: 'h',
-    choices: [72, 83],
+    choices: ['h', 's'],
     text_answer: 'happy',
     correct_text: "<p>Correct. This face is %ANS%.</p>",
     incorrect_text: "<p>Incorrect. This face is %ANS%. Please press the correct key to continue.</p>",
-    prompt: "<p>Press H if the face is happy. Press S if the face is sad.</p>",
+    prompt: "<p>Press 'h' if the face is happy. Press 's' if the face is sad.</p>",
     trial_duration: 1500,
     show_feedback_on_timeout: false,
     force_correct_button_press: true

examples/jspsych-fullscreen.html

@@ -23,8 +23,9 @@
   var trial_1 = {
     type: 'image-keyboard-response',
     stimulus: 'img/happy_face_1.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'], 
-    prompt: '<p>Have you seen this face before? Y or N.</p>'
+    prompt: '<p>Have you seen this face before? Press "y" or "n".</p>',
+    render_on_canvas: false
   }
 
   var fullscreen_trial_exit = {
@@ -32,7 +33,6 @@
     fullscreen_mode: false
   }
 
-
   jsPsych.init({
     timeline: [ fullscreen_trial, trial_1, fullscreen_trial_exit ],
     on_finish: function() {

examples/progress-bar.html

@@ -16,31 +16,34 @@
   var trial_1 = {
     type: 'image-keyboard-response',
     stimulus: 'img/happy_face_1.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'],
-    prompt: '<p>Have you seen this face before? Y or N.</p>'
+    render_on_canvas: false,
+    prompt: '<p>Have you seen this face before? Press "y" or "n".</p>'
   }
 
   var trial_2 = {
     type: 'image-keyboard-response',
     stimulus: 'img/happy_face_2.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'],
-    prompt: '<p>Have you seen this face before? Y or N.</p>'
+    render_on_canvas: false,
+    prompt: '<p>Have you seen this face before? Press "y" or "n".</p>'
   }
 
   var trial_3 = {
     type: 'image-keyboard-response',
     stimulus: 'img/happy_face_3.jpg',
-    choices: [89, 78], // Y or N
+    choices: ['y','n'],
-    prompt: '<p>Have you seen this face before? Y or N.</p>'
+    render_on_canvas: false,
+    prompt: '<p>Have you seen this face before? Press "y" or "n".</p>'
   }
 
-  var cnt = 0;
+  var count = 0;
 
   var block_set = {
     timeline: [trial_1, trial_2, trial_3],
     loop_function: function() {
-      cnt++;
+      count++;
-      return cnt < 2;
+      return count < 2;
     }
   }
 
@@ -49,7 +52,6 @@
     stimulus: 'The experiment is over.'
   }
 
-
   jsPsych.init({
     timeline: [trial_1, trial_2, trial_3], //block_set, end_screen],
     show_progress_bar: true,

examples/timeline-variables.html

@@ -25,15 +25,17 @@
     timeline: [
       {
         type: 'html-keyboard-response',
-        choices: ['none'], // Y or N
+        choices: jsPsych.NO_KEYS,
         stimulus: "<p style='text-align:center; font-size:80px;'>+</p>",
         trial_duration: 500
       },
       {
         type: 'image-keyboard-response',
-        choices: [89, 78], // Y or N
+        choices: ['y','n'], 
         stimulus: jsPsych.timelineVariable('v1'),
-        prompt: function() { return '<p>Have you seen '+jsPsych.timelineVariable('v2', true)+ ' before? Y or N.</p>' },
+        prompt: function() { 
+          return '<p>Have you seen '+jsPsych.timelineVariable('v2', true)+ ' before? Press "y" or "n".</p>' 
+        },
         stimulus_width: 300
       }
     ],