我想我很卡住。
所以这就是我现在在视觉上得到的。
我在 MS 油漆中添加了漫画无标题和箭头。
包含色样的每一行都是一个p标签。理想情况下，我希望将这些p标签放在页面的中心（这是它们在jspsych中的默认位置）。但是，我也希望所有这些标签都向左对齐。我仍然希望p标签在中心，但我想让每行文本从相同的x坐标开始。
上面的屏幕截图是我理想中想要的。事物居中，但这些样本/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;该试验对象获得我想要的行为。但我似乎无法在示例中做到这一点。
