如何根據試用更改背景顏色？
[英]How to change background color depending on trial?
問題描述
我對 JsPsych 很陌生，我想知道如何根據試驗改變實驗中的背景顏色。 我實施了指令試驗和實踐試驗，包括編碼和回憶試驗。 我希望教學階段的背景顏色為#BFBFBF，練習階段（編碼和回憶試驗）的背景顏色為#green。
我嘗試實現兩個不同的樣式表，使用“document.body.style.backgroundColor”功能並創建不同的類，但每次只顯示一種（主要是最后一種）顏色。
這是我的實際代碼（目前我已經通過 body-element 定義了背景顏色）：
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Instruktionen</title>
<script src="jspsych-6.1.0/jspsych.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-instructions.js"></script>
<script src="jspsych-6.1.0/plugins/ComplexSpanWM_jspsych-image-mouse-response.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-html-button-response.js"></script>
<link href="jspsych-6.1.0/css/jspsych.css" rel="stylesheet" type="text/css">
</head>
<body style=background-color:#BFBFBF>
</body>
<script>
var timeline = [];
/////////////////////////////// INSTRUCTION PHASE ///////////////////////////////
var instructions_1_to_4 = {
type: 'instructions',
pages: [
'<p><strong>Herzlich Willkommen bei der Merkaufgabe: Tiere merken.</p>',
// instruction page 1
'<p><strong>Die Aufgabe besteht aus zwei wichtigen Teilen:</p>' +
'<p>Zuerst müssen Sie entscheiden, ob ein gezeigtes Tier auf den Füßen oder auf dem Kopf steht.</strong></p>' +
'<p>Wenn das Tier auf den Füßen steht, drücken Sie die rechte Maustaste.' +
'<p>Wenn das Tier auf dem Kopf steht, drücken Sie die linke Maustaste.</p>' +
'<p>Zur Erinnerung sehen Sie rechts einen grünen und links einen roten Mann, dies sind aber keine Boxen zum Anklicken! Ihre Antwort erfolgt allein über die Maustaste.</p>' +
'<p>Sobald Sie eine Maustaste geklickt haben, erscheint das nächste Tier.</p>' +
'<img src="Stimuli/instruction1.jpg" width="500" height="300" ></img>',
// instruction page 2
'<p><strong>Der zweite Teil der Aufgabe ist genauso wichtig:</p>' +
'<p>Merken Sie sich die Reihenfolge, in der die Tiere gezeigt werden.</strong></p>' +
'<p>Sobald Sie diesen Bildschirm sehen, klicken Sie mit der Maus auf die Tiere in der Reihenfolge, in der Sie angezeigt wurden.' +
'<p>Ob das Tier auf dem Kopf oder auf den Füßen stand, ist dabei egal.' +
'<p>Sobald Sie auf ein Tier klicken, erscheint die Antwort. Sie können ihre Antwort nicht mehr korrigieren.</p>' +
'<img src="Stimuli/instruction2.jpg" width="500" height="300" ></img>' ,
// instruction page 3
'<p><strong>Das Ziel ist es, möglichst viele Punkte zu erspielen.</strong></p>' +
'<p>Für richtige Antworten werden Punkte gesammelt.</p>' +
'<p>Bei falschen oder zu langsamen Antworten gibt es keine Punkte.</p>' +
'<p>Zusätzlich sehen Sie nach jedem Durchgang einen Highscore. Das ist die Anzahl an Tieren, die Sie sich in der richtigen Reihenfolge merken konnten. Im Laufe der Aufgaben werden es immer mehr Tiere und es ist ganz normal, dabei Fehler zu machen.</p>',
// instruction page 4
'<p>Bitte antworten Sie so schnell und so korrekt wie möglich!</p>' +
'<p>Beginnen wir mit Probe-Durchgängen zur Übung</p>'
],
show_clickable_nav: true,
button_label_next: 'Weiter',
allow_backward: false,
allow_keys: false,
post_trial_gap: 1
}
timeline.push(instructions_1_to_4);
/////////////////////////////// PRACTICE PHASE ///////////////////////////////
var images = [
'Stimuli/cow_feet.jpg',
'Stimuli/cow_head.jpg',
'Stimuli/dog_feet.jpg',
'Stimuli/dog_head.jpg',
'Stimuli/horse_feet.jpg',
'Stimuli/horse_head.jpg',
'Stimuli/pig_feet.jpg',
'Stimuli/pig_head.jpg'
];
// ENCODING PHASE
var animals = [
{ animal: 'Stimuli/cow_feet.jpg', data: {correct_response: 2} },
{ animal: 'Stimuli/cow_head.jpg', data: {correct_response: 0} },
{ animal: 'Stimuli/dog_feet.jpg', data: {correct_response: 2} },
{ animal: 'Stimuli/dog_head.jpg', data: {correct_response: 0} },
{ animal: 'Stimuli/horse_feet.jpg', data: {correct_response: 2} },
{ animal: 'Stimuli/horse_head.jpg', data: {correct_response: 0} },
{ animal: 'Stimuli/pig_feet.jpg', data: {correct_response: 2} },
{ animal: 'Stimuli/pig_head.jpg', data: {correct_response: 0} }
];
var Encoding_Phase = {
timeline: [
{
type: 'image-mouse-response',
stimulus: jsPsych.timelineVariable('animal'),
stimulus_height: 457,
stimulus_width: 604,
choices: [0, 2]
}
],
timeline_variables: animals,
sample: {
type: 'with-replacement',
size: 2
},
data: {test_part: 'Encoding_Phase'}
};
// RECALL PHASE
var solution1 = function() {
var trial = jsPsych.data.get().filter({test_part: 'Encoding_Phase'});
var displayed_animal = trial.values()[0].stimulus;
if (displayed_animal == 'Stimuli/cow_feet.jpg') {
return "<img src='Stimuli/cow_feet.jpg' width='213' height='216' align=left >";
} else if (displayed_animal == 'Stimuli/dog_feet.jpg') {
return "<img src='Stimuli/dog_feet.jpg' width='213' height='216' align=left >";
} else if (displayed_animal == 'Stimuli/horse_feet.jpg') {
return "<img src='Stimuli/horse_feet.jpg' width='213' height='216' align=left >";
} else if (displayed_animal == 'Stimuli/pig_feet.jpg') {
return "<img src='Stimuli/pig_feet.jpg' width='213' height='216' align=left >";
} else if (displayed_animal == 'Stimuli/cow_head.jpg') {
return "<img src='Stimuli/cow_feet.jpg' width='213' height='216' align=left >";
} else if (displayed_animal == 'Stimuli/dog_head.jpg') {
return "<img src='Stimuli/dog_feet.jpg' width='213' height='216' align=left >";
} else if (displayed_animal == 'Stimuli/horse_head.jpg') {
return "<img src='Stimuli/horse_feet.jpg' width='213' height='216' align=left >";
} else if (displayed_animal == 'Stimuli/pig_head.jpg') {
return "<img src='Stimuli/pig_feet.jpg' width='213' height='216' align=left >";
}
};
var solution2 = function() {
var trial = jsPsych.data.get().filter({test_part: 'Encoding_Phase'});
var displayed_animal = trial.values()[1].stimulus;
if (displayed_animal == 'Stimuli/cow_feet.jpg') {
return "<img src='Stimuli/cow_feet.jpg' width='213' height='216' >";
} else if (displayed_animal == 'Stimuli/dog_feet.jpg') {
return "<img src='Stimuli/dog_feet.jpg' width='213' height='216' >";
} else if (displayed_animal == 'Stimuli/horse_feet.jpg') {
return "<img src='Stimuli/horse_feet.jpg' width='213' height='216' >";
} else if (displayed_animal == 'Stimuli/pig_feet.jpg') {
return "<img src='Stimuli/pig_feet.jpg' width='213' height='216' >";
} else if (displayed_animal == 'Stimuli/cow_head.jpg') {
return "<img src='Stimuli/cow_feet.jpg' width='213' height='216' >";
} else if (displayed_animal == 'Stimuli/dog_head.jpg') {
return "<img src='Stimuli/dog_feet.jpg' width='213' height='216' >";
} else if (displayed_animal == 'Stimuli/horse_head.jpg') {
return "<img src='Stimuli/horse_feet.jpg' width='213' height='216' >";
} else if (displayed_animal == 'Stimuli/pig_head.jpg') {
return "<img src='Stimuli/pig_feet.jpg' width='213' height='216' >";
}
};
var Recall_Phase = {
timeline: [
{
type: 'html-button-response',
timeline: [
{stimulus: '1', prompt: ''},
{stimulus: '2', prompt: solution1},
{stimulus: '2', prompt: solution2}
],
choices: [
"<img src='Stimuli/horse_feet.jpg' width='213' height='216' >",
"<img src='Stimuli/pig_feet.jpg' width='213' height='216' >",
"<img src='Stimuli/dog_feet.jpg' width='213' height='216' >",
"<img src='Stimuli/cow_feet.jpg' width='213' height='216' >"
]
}
]
};
var Practice_Phase = {
timeline: [Encoding_Phase, Recall_Phase]
}
timeline.push(Practice_Phase);
jsPsych.init({
timeline: timeline,
preload_images: images
})
</script>
</html>
有誰知道在同一個實驗中簡單地使用兩個不同背景 colors 的命令？
1 個解決方案
解決方案1
0 2021-02-24 10:31:29
我注意到這個問題並認為我會回答，因為我必須在實驗中做同樣的事情（在實驗中間更改背景顏色）。 我所做的是將背景 colors 設置為函數，然后將函數添加為參數，所以這就是你的情況：
function set_html_style_1() {
document.body.style.backgroundColor = '#BFBFBF'
}
function set_html_style_2() {
document.body.style.backgroundColor = 'green'
}
var your_block = {
type: 'html-keyboard-response',
on_start: set_html_style_1,
stimulus: 'Hello world!',
choices: [' '],
}
我還建議檢查此討論： https://github.com/jspsych/jsPsych/discussions/936
如何根據值reactjs更改段落中的背景顏色
[英]How to change background color in paragraph depending on the values reactjs
如何根據數組的結果更改html節的背景色
[英]how to change the background color of a html section depending on the result of an array
如何根據reactjs中的值更改段落中的背景顏色
[英]How to change background color in paragraph depending on the value in reactjs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.