From d1948e28e9263d948c0290da250dcda26a44df66 Mon Sep 17 00:00:00 2001
From: Josh de Leeuw <josh.deleeuw@gmail.com>
Date: Mon, 11 Nov 2013 09:39:39 -0500
Subject: [PATCH] adding prompt

---
 examples/jspsych-categorize.html | 82 ++++++++++++++++++++++----------
 1 file changed, 57 insertions(+), 25 deletions(-)
diff --git a/examples/jspsych-categorize.html b/examples/jspsych-categorize.html
index 6eee4032..eff85ad2 100644
--- a/examples/jspsych-categorize.html
+++ b/examples/jspsych-categorize.html
@@ -1,68 +1,100 @@
 <!doctype html>
 <html>
+    
     <head>
         <title>jspsych-categorize plugin example</title>
         <!-- jQuery -->
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <!-- jsPsych -->
         <script src="scripts/jspsych.js"></script>
         <script src="scripts/plugins/jspsych-text.js"></script>
         <script src="scripts/plugins/jspsych-categorize.js"></script>
         <!-- style -->
         <style>
-            #jspsych_target { margin: 50px auto 50px auto; width: 600px; font-size:18px; text-align: center;}
-            #instructions { text-align: left; }
-            #stimulus { width: 150px; height: 150px; background-color: #777; font-size:124px; font-family: 'Impact'; }
-            pre { text-align: left; }
+            #jspsych_target {
+                margin: 50px auto 50px auto;
+                width: 600px;
+                font-size:18px;
+                text-align: center;
+            }
+            #instructions {
+                text-align: left;
+            }
+            #stimulus {
+                width: 150px;
+                height: 150px;
+                background-color: #777;
+                font-size:124px;
+                font-family:'Impact';
+            }
+            .prompt {
+                font-size:14px;
+            }
+            pre {
+                text-align: left;
+            }
         </style>
     </head>
+    
     <body>
-        <div id="jspsych_target">
-        </div>
+        <div id="jspsych_target"></div>
     </body>
     <script type="text/javascript">
         // number of trials
         var n_trials = 15;
-        
+
         // this is an example of using HTML objects as stimuli.
         // you could also use images.
-        var numbers = ["1","2","3","4","5"];
-        var letters = ["I","Z","B","A","S"];
-        
+        var numbers = ["1", "2", "3", "4", "5"];
+        var letters = ["I", "Z", "B", "A", "S"];
+
         var stimuli = [];
         var answers = [];
         var text_answers = [];
-        
+
         // randomly choose stimuli
-        for(var i=0; i<n_trials; i++) {
-            if(Math.floor(Math.random()*2)===0){
+        for (var i = 0; i < n_trials; i++) {
+            if (Math.floor(Math.random() * 2) === 0) {
                 // pick a number
-                stimuli.push("<div id='stimulus'><p>"+numbers[Math.floor(Math.random*numbers.length)]+"</p></div>");
+                stimuli.push("<div id='stimulus'><p>" + numbers[Math.floor(Math.random * numbers.length)] + "</p></div>");
                 answers.push(81);
                 text_answers.push("number");
-            } else {
+            }
+            else {
                 // pick a letter
-                stimuli.push("<div id='stimulus'><p>"+letters[Math.floor(Math.random*numbers.length)]+"</p></div>");
+                stimuli.push("<div id='stimulus'><p>" + letters[Math.floor(Math.random * numbers.length)] + "</p></div>");
                 answers.push(80);
                 text_answers.push("letter");
             }
         }
-        
+
         // create categorization block for jspsych
-        var categorization_block = {type:'categorize', stimuli: stimuli, key_answer: answers, text_answer: text_answers, choices: [80,81]};
-        
+        var categorization_block = {
+            type: 'categorize',
+            stimuli: stimuli,
+            key_answer: answers,
+            text_answer: text_answers,
+            choices: [80, 81],
+            is_html: true,
+            prompt: "<p class='prompt'>Press P for letter. Press Q for number.</p>"
+        };
+
         // create a block of instructions
-        var instructions_block = {type:'text', text:["<div id='instructions'><p>Press P if you see a letter. Press Q if you see a number.</p><p>Press ENTER to begin.</p></div>"]};
-        
+        var instructions_block = {
+            type: 'text',
+            text: ["<div id='instructions'><p>Press P if you see a letter. Press Q if you see a number.</p><p>Press ENTER to begin.</p></div>"]
+        };
+
         // launch jspsych experiment
         jsPsych.init({
             display_element: $('#jspsych_target'),
             experiment_structure: [instructions_block, categorization_block],
-            on_finish:function(data){
-                $('#jspsych_target').append($("<pre>",{
-                    html: JSON.stringify(data,undefined,2)
+            on_finish: function(data) {
+                $('#jspsych_target').append($("<pre>", {
+                    html: JSON.stringify(data, undefined, 2)
                 }));
             }
         });
     </script>
+
 </html>
\ No newline at end of file
