HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-13 00:58:12 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

adding prompt

Browse Source
This commit is contained in:
Josh de Leeuw 2013-11-11 09:39:39 -05:00
parent 61b0916a3f
commit d1948e28e9
1 changed files with 57 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
examples/jspsych-categorize.html
View File

@ -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>