-
Notifications
You must be signed in to change notification settings - Fork 1
/
Week8-Dynamic Trials Pt2-challenge.html
executable file
·120 lines (94 loc) · 3.23 KB
/
Week8-Dynamic Trials Pt2-challenge.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<title>Week 8: Dynamic Trials 2</title>
<!-- Load JS psych -->
<script src="jspsych-7.2/jspsych.js"></script>
<!-- Load all the plugins we will be using today -->
<script src="jspsych-7.2/plugin-html-keyboard-response.js"></script>
<script src="jspsych-7.2/plugin-html-button-response.js"></script>
<!-- Load jspsych's default CSS -->
<link href="jspsych-7.2/jspsych.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
</body>
<script>
// Overview of jspsych plugins: https://www.jspsych.org/plugins/overview/
// A foreword:
// 90% of the time you will not know how to do a programming thing.
// Maybe you forgot it or never knew it.
// The more important skill is knowing how to search for the solution..
// Initialize jsPsych
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
// Define an empty timeline array
var timeline = [];
/*/ Define the trial variables /*/
var welcome = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `Welcome to the study!<p>
Please choose the correct category (dog or cat) for each animal.<p>
Please try to respond as quickly as possible without sacrificing accuracy.<p>
<p>Press ENTER to begin.`,
choices: ['enter']
};
timeline.push(welcome)
// Initialize counter variable
var count = 0
var timeLimit = 5000
// Array of stimuli
var animals = ["img/cat1.jpg","img/cat2.jpg","img/dog1.jpg","img/dog2.jpg"]
var animals = jsPsych.randomization.shuffle(animals)
// Show an image of a cat or a dog, with response buttons.
var catdog = {
type: jsPsychHtmlButtonResponse,
stimulus: function() {
current_animal = animals[count]
count++
return `<img src = ${current_animal} width=200px></p>`
},
choices: ['Cat','Dog'],
trial_duration: timeLimit
};
// Show post-trial feedback. We'll need to modify this.
var feedback = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '?',
choices: "NO_KEYS",
trial_duration: 1000,
};
// Challenges: (you will need to do some searching)
// Challenge 1:
// Change the feedback stimulus parameter so it says "That was a dog/cat" depending on what it was.
// Hint: how do we figure out what the image displayed was?
var feedback1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function() {
if (current_animal.includes("cat")) {
return 'That was a cat!'
}
else {
return 'That was a dog!'
}
},
choices: "NO_KEYS",
trial_duration: 1000,
};
// push catdog trials into timeline
for (i=0; i < animals.length; i++) {
timeline.push(catdog)
timeline.push(feedback1)
}
// Homework //
// Challenge 2:
// Change the feedback stimulus parameter so it says "Your answer was dog/cat" depending on what was clicked in the previous trial.
// Hint: take a look at jsPsych.data.getLastTrialData().values()[0]
// Challenge 3:
// Change the feedback stimulus parameter so it says "Correct" or "Wrong" depending on whether the answer was correct or not.
/*/ Run the timeline /*/
jsPsych.run(timeline);
</script>
</html>