@bdelab/roav-ran 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.html ADDED
@@ -0,0 +1,12 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Rollup Bundle</title>
7
+ <link href="resources/roav-ran.css" rel="stylesheet">
8
+ </head>
9
+ <body>
10
+ <script src="index.b85a7143.js" type="module"></script>
11
+ </body>
12
+ </html>
@@ -0,0 +1,276 @@
1
+ @font-face {
2
+ font-family: primerRegular;
3
+ src: url(https://storage.googleapis.com/roar-ak/font/primer_print.ttf) format("truetype");
4
+ }
5
+ @font-face {
6
+ font-family: primerBold;
7
+ src: url(https://storage.googleapis.com/roar-ak/font/primer_print_bold.ttf) format("truetype");
8
+ }
9
+ .jspsych-display-element {
10
+ height: 100%;
11
+ width: 100%;
12
+ margin: 0;
13
+ font-family: "Source Sans Pro", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
14
+ touch-action: manipulation;
15
+ -webkit-touch-callout: none; /* iOS Safari */
16
+ -webkit-user-select: none; /* Safari */
17
+ -khtml-user-select: none; /* Konqueror HTML */
18
+ -moz-user-select: none; /* Old versions of Firefox */
19
+ -ms-user-select: none; /* Internet Explorer/Edge */
20
+ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
21
+ }
22
+ .jspsych-display-element .jspsych-content-wrapper {
23
+ height: 100%;
24
+ width: 100%;
25
+ }
26
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content {
27
+ height: 100%;
28
+ width: 100%;
29
+ display: flex;
30
+ flex-direction: column;
31
+ justify-content: center;
32
+ align-items: center;
33
+ }
34
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content #fullScreen {
35
+ width: 80vw;
36
+ text-align: center;
37
+ color: rgb(76, 101, 139);
38
+ font-size: 1.7rem;
39
+ }
40
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content #jspsych-fullscreen-btn {
41
+ width: 17vw;
42
+ height: 10vh;
43
+ background-color: rgb(76, 101, 139);
44
+ color: white;
45
+ border-radius: 1rem;
46
+ border: 0rem;
47
+ font-size: 3vw;
48
+ font-weight: bold;
49
+ cursor: pointer;
50
+ }
51
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content #fixation-container {
52
+ display: flex;
53
+ justify-content: center;
54
+ align-items: center;
55
+ color: black;
56
+ font-size: 4rem;
57
+ }
58
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content #prompt {
59
+ font-size: 2rem;
60
+ padding-bottom: 2rem;
61
+ text-align: center;
62
+ }
63
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content #stimulus {
64
+ padding-bottom: 4rem;
65
+ font-size: 3.5rem;
66
+ margin: 0;
67
+ text-align: center; /* To ensure the text is centered if it wraps to more than one line */
68
+ }
69
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .default-layout {
70
+ display: flex;
71
+ max-width: 100%;
72
+ }
73
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .default-layout div {
74
+ box-sizing: border-box;
75
+ margin: 0;
76
+ padding: 0;
77
+ max-width: calc(25% + 10px);
78
+ }
79
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .default-layout div button {
80
+ font-family: primerBold;
81
+ width: 100%;
82
+ color: black;
83
+ font-size: clamp(2rem, 4vw, 2.5rem);
84
+ cursor: pointer;
85
+ }
86
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .column-layout {
87
+ display: grid;
88
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* two columns of equal width */
89
+ gap: 2rem;
90
+ place-items: center;
91
+ }
92
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .column-layout div {
93
+ box-sizing: border-box;
94
+ margin: 0;
95
+ padding: 0;
96
+ max-width: 50%;
97
+ }
98
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .column-layout div button {
99
+ font-family: primerBold;
100
+ width: 100%;
101
+ color: black;
102
+ font-size: 5vw;
103
+ cursor: pointer;
104
+ }
105
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .grid-layout {
106
+ display: grid;
107
+ grid-template-columns: 1fr 1fr; /* two columns of equal width */
108
+ grid-template-rows: 1fr 1fr; /* two rows of equal height */
109
+ gap: 2rem;
110
+ }
111
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .grid-layout div {
112
+ box-sizing: border-box;
113
+ margin: 0;
114
+ padding: 0;
115
+ max-width: 100%;
116
+ }
117
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .grid-layout div button {
118
+ font-family: primerBold;
119
+ width: 100%;
120
+ color: black;
121
+ font-size: 5vw;
122
+ cursor: pointer;
123
+ }
124
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .triple-layout {
125
+ display: grid;
126
+ grid-template-columns: repeat(3, 1fr); /* three columns of equal width */
127
+ grid-template-rows: auto; /* rows sized according to content */
128
+ gap: 2rem;
129
+ /* Specific styles for individual buttons */
130
+ }
131
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .triple-layout div {
132
+ box-sizing: border-box;
133
+ margin: 0;
134
+ padding: 0;
135
+ max-width: 100%;
136
+ }
137
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .triple-layout div button {
138
+ font-family: primerBold;
139
+ width: 100%;
140
+ color: black;
141
+ font-size: 5vw;
142
+ cursor: pointer;
143
+ }
144
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .triple-layout .button1 {
145
+ grid-column: 2; /* Centered in the middle column */
146
+ grid-row: 1;
147
+ }
148
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .triple-layout .button2 {
149
+ grid-column: 1; /* First column in the second row */
150
+ grid-row: 2;
151
+ }
152
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .triple-layout .button3 {
153
+ grid-column: 3; /* Third column in the second row */
154
+ grid-row: 2;
155
+ }
156
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .diamond-layout {
157
+ display: grid;
158
+ grid-template-columns: repeat(3, 1fr); /* three columns of equal width */
159
+ grid-template-rows: auto auto auto; /* three rows, size according to content */
160
+ gap: 2rem;
161
+ /* Specific styles for individual buttons */
162
+ }
163
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .diamond-layout div {
164
+ box-sizing: border-box;
165
+ margin: 0;
166
+ padding: 0;
167
+ max-width: 100%;
168
+ }
169
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .diamond-layout div button {
170
+ font-family: primerBold;
171
+ width: 100%;
172
+ color: black;
173
+ font-size: 5vw;
174
+ cursor: pointer;
175
+ }
176
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .diamond-layout .button1 {
177
+ grid-column: 2; /* Centered in the middle column */
178
+ grid-row: 1;
179
+ }
180
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .diamond-layout .button2 {
181
+ grid-column: 1; /* First column in the second row */
182
+ grid-row: 2;
183
+ }
184
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .diamond-layout .button3 {
185
+ grid-column: 3; /* Third column in the second row */
186
+ grid-row: 2;
187
+ }
188
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .diamond-layout .button4 {
189
+ grid-column: 2; /* Centered in the middle column */
190
+ grid-row: 3;
191
+ }
192
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .arrow-key-border {
193
+ border: 1px solid black; /* Thin and black border */
194
+ border-radius: 10px; /* Curved corners */
195
+ padding: 1rem !important;
196
+ max-width: 100% !important;
197
+ }
198
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .arrow-key-border .arrow-key {
199
+ font-size: 1.5rem;
200
+ margin: 0;
201
+ }
202
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .disabled-btn {
203
+ background-color: #e0e0e0; /* Gray background */
204
+ color: #a0a0a0; /* Gray text */
205
+ cursor: not-allowed; /* Indicate that the button is not interactive */
206
+ pointer-events: none; /* Prevent all click and hover interactions */
207
+ opacity: 0.6;
208
+ }
209
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .glowingButton {
210
+ animation: glowing 1300ms infinite;
211
+ }
212
+ @keyframes glowing {
213
+ 0% {
214
+ background-color: #2ba805;
215
+ box-shadow: 0 0 5px #2ba805;
216
+ }
217
+ 50% {
218
+ background-color: #49e819;
219
+ box-shadow: 0 0 20px #49e819;
220
+ }
221
+ 100% {
222
+ background-color: #2ba805;
223
+ box-shadow: 0 0 5px #2ba805;
224
+ }
225
+ }
226
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content #replay {
227
+ position: absolute;
228
+ bottom: 80%;
229
+ right: 10%;
230
+ cursor: pointer;
231
+ }
232
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .prompt-container {
233
+ display: flex;
234
+ justify-content: center;
235
+ align-items: center;
236
+ flex-direction: column;
237
+ }
238
+ .jspsych-display-element .jspsych-content-wrapper .jspsych-content .prompt-container .task-graphic {
239
+ width: 20%;
240
+ }
241
+ .jspsych-display-element .go-button {
242
+ position: fixed;
243
+ bottom: 5vh;
244
+ height: 15vh;
245
+ right: 5vh;
246
+ z-index: 999;
247
+ background: none;
248
+ border: none;
249
+ }
250
+ .jspsych-display-element #jspsych-progressbar-container {
251
+ color: #555;
252
+ border-bottom: 1px solid #dedede;
253
+ background-color: #f9f9f9;
254
+ text-align: center;
255
+ padding: 8px 0px;
256
+ width: 100%;
257
+ line-height: 1em;
258
+ }
259
+ .jspsych-display-element #jspsych-progressbar-container span {
260
+ font-size: 14px;
261
+ padding-right: 14px;
262
+ }
263
+ .jspsych-display-element #jspsych-progressbar-container #jspsych-progressbar-outer {
264
+ background-color: #eee;
265
+ width: 50%;
266
+ margin: auto;
267
+ height: 14px;
268
+ display: inline-block;
269
+ vertical-align: middle;
270
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
271
+ }
272
+ .jspsych-display-element #jspsych-progressbar-container #jspsych-progressbar-outer #jspsych-progressbar-inner {
273
+ background-color: #aaa;
274
+ width: 0%;
275
+ height: 100%;
276
+ }
package/package.json ADDED
@@ -0,0 +1,109 @@
1
+ {
2
+ "name": "@bdelab/roav-ran",
3
+ "version": "1.0.0",
4
+ "description": "",
5
+ "main": "lib/index.b85a7143.js",
6
+ "module": "lib/index.b85a7143.js",
7
+ "type": "module",
8
+ "files": [
9
+ "lib"
10
+ ],
11
+ "scripts": {
12
+ "test": "echo \"Error: no test specified\" && exit 1",
13
+ "build:dev": "npx webpack --mode production --env dbmode=development",
14
+ "build:prod": "npx webpack --mode production --env dbmode=production",
15
+ "prepackage": "rimraf lib/",
16
+ "package": "npx rollup -c",
17
+ "postpackage": "node postBuildPackage.js",
18
+ "prepublishOnly": "npm run package",
19
+ "preversion": "npm run lint",
20
+ "version": "npm run format && git add -A",
21
+ "postversion": "GIT_REMOTE=$(git remote -v | grep \"yeatmanlab/roar-swr.git \\(push\\)\" | cut -f 1) && git push $GIT_REMOTE && git push $GIT_REMOTE --tags",
22
+ "predev": "fkill :8000 -f || true",
23
+ "dev": "npx webpack serve --open --mode development --env dbmode=development",
24
+ "preprod": "fkill :8000 -f || true",
25
+ "prod": "npx webpack serve --open --mode development --env dbmode=production",
26
+ "lint": "npx eslint --ext .ts,.tsx,.js,.jsx .",
27
+ "format": "npx prettier . --write",
28
+ "cypress:open": "cypress open"
29
+ },
30
+ "repository": {
31
+ "type": "git",
32
+ "url": "git+https://github.com/yeatmanlab/roav-ran.git"
33
+ },
34
+ "author": "Aryaman Taore",
35
+ "license": "Stanford Academic Software License for ROAR",
36
+ "bugs": {
37
+ "url": "https://github.com/yeatmanlab/roav-ran"
38
+ },
39
+ "homepage": "https://github.com/yeatmanlab/roav-ran",
40
+ "dependencies": {
41
+ "@bdelab/jscat": "^4.0.0",
42
+ "@bdelab/roar-firekit": "^4.7.0",
43
+ "@bdelab/roar-utils": "^1.0.18",
44
+ "@jspsych-contrib/plugin-audio-multi-response": "^1.0.0",
45
+ "@jspsych/plugin-audio-button-response": "^1.1.2",
46
+ "@jspsych/plugin-audio-keyboard-response": "^1.1.0",
47
+ "@jspsych/plugin-call-function": "^1.1.2",
48
+ "@jspsych/plugin-fullscreen": "^1.1.0",
49
+ "@sentry/browser": "^7.111.0",
50
+ "@sentry/integrations": "^7.111.0",
51
+ "@sentry/wasm": "^7.111.0",
52
+ "@xenova/transformers": "^1.3.2",
53
+ "dotenv": "^16.4.5",
54
+ "fscreen": "^1.2.0",
55
+ "hugo": "^0.0.3",
56
+ "i18next": "^22.4.15",
57
+ "i18next-browser-languagedetector": "^7.0.1",
58
+ "jspsych": "^7.2.1",
59
+ "lodash": "^4.17.21",
60
+ "node-fetch": "^2.6.6",
61
+ "papaparse": "^5.4.1",
62
+ "regenerator-runtime": "^0.13.9",
63
+ "store2": "^2.13.2"
64
+ },
65
+ "devDependencies": {
66
+ "@babel/cli": "^7.22.5",
67
+ "@babel/core": "^7.22.5",
68
+ "@babel/preset-env": "^7.22.5",
69
+ "@rollup/plugin-commonjs": "^25.0.3",
70
+ "@rollup/plugin-dsv": "^3.0.2",
71
+ "@rollup/plugin-html": "^1.0.3",
72
+ "@rollup/plugin-json": "^6.0.0",
73
+ "@rollup/plugin-node-resolve": "^15.1.0",
74
+ "@rollup/plugin-terser": "^0.4.3",
75
+ "@sentry/rollup-plugin": "^2.16.1",
76
+ "@sentry/webpack-plugin": "^2.16.1",
77
+ "babel-loader": "^9.1.2",
78
+ "copy-webpack-plugin": "^12.0.2",
79
+ "css-loader": "^6.7.1",
80
+ "csv-loader": "^3.0.5",
81
+ "cypress": "^13.7.3",
82
+ "eslint": "^8.12.0",
83
+ "eslint-config-airbnb-base": "^15.0.0",
84
+ "eslint-config-prettier": "^8.8.0",
85
+ "eslint-plugin-cypress": "^2.15.2",
86
+ "eslint-plugin-import": "^2.25.4",
87
+ "file-loader": "^6.2.0",
88
+ "fkill-cli": "^8.0.0",
89
+ "html-loader": "^5.0.0",
90
+ "html-webpack-plugin": "^5.5.0",
91
+ "node-loader": "^2.0.0",
92
+ "path-browserify": "^1.0.1",
93
+ "prettier": "3.0.0",
94
+ "process": "^0.11.10",
95
+ "rimraf": "^5.0.1",
96
+ "rollup": "^3.26.3",
97
+ "rollup-plugin-postcss": "^4.0.2",
98
+ "rollup-plugin-serve": "^1.1.1",
99
+ "rollup-plugin-string": "^3.0.0",
100
+ "sass": "^1.64.2",
101
+ "sass-loader": "^13.3.2",
102
+ "stream-browserify": "^3.0.0",
103
+ "style-loader": "^3.3.1",
104
+ "webpack": "^5.90.3",
105
+ "webpack-cli": "^5.1.4",
106
+ "webpack-dev-server": "^4.15.1",
107
+ "webpack-merge": "^5.8.0"
108
+ }
109
+ }