Думаю, я довольно застрял.
Так вот что я получил визуально прямо сейчас.
Я добавил этот ком c без заголовка и стрелки в MS paint.
Каждая из этих строк, содержащих образцы цветов, представляет собой тег p. В идеале я хочу, чтобы эти p теги были помещены в центр страницы (именно так они расположены по умолчанию в jspsych ). Однако я также хочу, чтобы все эти теги были выровнены по левому краю. Я по-прежнему хочу, чтобы теги p находились в центре, но я хочу, чтобы каждая строка текста начиналась с одной и той же x координаты.
Снимок экрана выше - это то, что я хочу в идеале. Все по центру, но эти теги swatches / p по-прежнему начинаются с одной и той же координаты x.
Итак, код, который у меня сейчас есть для страницы, на которой я отлаживаю (первый снимок экрана), следующий. Обратите внимание, что у одного загруженного изображения есть путь /static/images/test.png, вы можете просто заменить его на то, что хотите. Файл javascript называется debugjspsych.js, а html - debug.html
Javascript:
timeline_arr = [];
var instructions2 = {
type: "html-keyboard-response",
choices: 13,
stimulus: function() {
var example_stimuli_html = "<div style='width:800px;height:200px;margin:0 auto;'>" + "<div style='float: left;margin-left:200px; margin-top:43px;'><p style='font-size:14px;'>" + "</p><img src='Neuroethics_Behavioral_Task/static/images/test.png' style='width:150px;height:95px;'></img><p class='small'><strong>Option 1</strong></p></div>" +
"<div style='float:right;margin-right:200px;'><div style='width: 150px; height: 95px; border: 3px solid #000000; font-size:12px; background-color: grey;margin-top:44px;'><p style='text-align: center; margin-top:25%;'>No treatment</p></div><p class='small'><strong>Option 2</strong></p></div>" +
"</div>" + "</div>";
return "<p>Some words go here. Look at these rectangles. Pretty rad, right?</p>" +
example_stimuli_html
+ "<p><br>...Then at the relative amounts of <b><font color='gray'>gray</font></b>, <b><font color='#4169e1'>blue</font></b>, and <font color='#ed713a'><b>orange</b></font> in the trial.</p>" +
"<div style='margin: auto 0;'>" +
"<p align='left'><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div><b>Worsens</b> the deficit.</p>" +
"<p align='left'><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Has <b>no effect.</b></p>" +
"<p align='left'><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div><b>Cures</b> the deficit.</p>" +
"</div>"
"<p>You should click the <b>\'z\' key</b> to pick Option 1, and the <b>\'m\'</b> key to pick Option 2. Sometimes the treatment will be on the left, and sometimes it will be on the right.</p> \
<p>In any case, your task is always to choose between the two Options- to give the treatment or not. Sometimes it will seem like the choice is more or less obvious. However, do your best \
to make what you think is the <i>best</i> choice in each case. There is no time limit for each treatment, but there will be many, so please do your best to make\
good choices as quickly as you can without spoiling your response.</p>"
},
prompt: "Press any key to continue."
};
timeline_arr.push(instructions2);
jsPsych.init({
timeline: timeline_arr,
});
<!DOCTYPE html>
<html>
<head>
<title>Debug JsPsych</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/jspsych.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/plugins/jspsych-html-button-response.js"></script>
<link href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/css/jspsych.css", rel="stylesheet" type="text/css">
<script src="debugjspsych.js"></script>
</head>
<body>
</body>
</html>
Последний фрагмент кода, который я собираюсь включить - это код идеализированного снимка экрана.
ideal_trial_obj = {
type: 'html-keyboard-response',
stimulus: function() {
return "<div style='margin:auto 0;top:0px;margin-top:50px;text-align:left;'>" + "<p align='center'>" + "Domain: <strong>" + condition_var + "</strong>" + "<br>Chance that the treatment...</p>" +
"<p><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div><b>Worsens</b> the deficit. The person becomes <b>unable</b> to sustain and switch focus at all.</p>" +
"<p><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Has <b>no effect.</b> The person <b>still</b> has some trouble maintaining and switching focus.</p>" +
"<p><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div><b>Cures</b> the deficit. The person becomes <b>able</b> to sustain and switch focus as needed</p>" +
"</div>" +
jsPsych.timelineVariable('stimulus', true);
}
Я пропустил множество частей в приведенном выше фрагменте кода только потому, что не чувствовал, что они актуальны. Все, что действительно важно здесь, это то, что я могу использовать margin: auto 0;, чтобы получить поведение, которое я желаю для этого объекта испытаний. Но я не могу сделать это в примере.