【发布时间】：2020-01-16 23:47:45
【问题描述】：
我猜我被困住了。
这就是我现在看到的。
我在 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>
我要包含的最后一个代码 sn-p 是理想化屏幕截图的代码。
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);
}
我在上面的代码 sn-p 中省略了很多部分，只是因为我觉得它们不相关。这里真正重要的是我能够使用margin: auto 0; 来获得我想要的那个试验对象的行为。但是在这个例子中我似乎做不到。
【问题讨论】：
标签： javascript html css jspsych