HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Simplify audio-button-response plugin DOM structure and make button_html a function parameter

Browse Source
This commit is contained in:
bjoluc 2023-09-05 10:25:06 +02:00
parent fe9f50e615
commit 75e961983d
2 changed files with 43 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/jspsych-audio-button-response.html
View File

@ -43,7 +43,7 @@
stimulus: 'sound/speech_red.mp3', stimulus: 'sound/speech_red.mp3',
choices: ['#00ff00', '#0000ff', '#ff0000'], choices: ['#00ff00', '#0000ff', '#ff0000'],
response_allowed_while_playing: false, response_allowed_while_playing: false,
button_html: '<div style="background-color: %choice%; width:100px; height:100px;"></div>', button_html: (choice) => `<div style="background-color: ${choice}; width:100px; height:100px;"></div>`,
prompt: "<p>Which color was said?</p>" prompt: "<p>Which color was said?</p>"
}); });

109
packages/plugin-audio-button-response/src/index.ts
View File

@ -16,12 +16,16 @@ const info = <const>{
default: undefined, default: undefined,
array: true, array: true,
}, },
/** The HTML for creating button. Can create own style. Use the "%choice%" string to indicate where the label from the choices parameter should be inserted. */ /**
* A function that, given a choice and its index, returns the HTML string of that choice's
* button.
*/
button_html: { button_html: {
type: ParameterType.HTML_STRING, type: ParameterType.FUNCTION,
pretty_name: "Button HTML", pretty_name: "Button HTML",
default: '<button class="jspsych-btn">%choice%</button>', default: function (choice: string, choice_index: number) {
array: true, return `<button class="jspsych-btn">${choice}</button>`;
},
}, },
/** Any content here will be displayed below the stimulus. */ /** Any content here will be displayed below the stimulus. */
prompt: { prompt: {
@ -85,6 +89,8 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
static info = info; static info = info;
private audio; private audio;
private buttonElements: HTMLElement[] = [];
constructor(private jsPsych: JsPsych) {} constructor(private jsPsych: JsPsych) {}
trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) { trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {
@ -135,50 +141,34 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
this.audio.addEventListener("ended", enable_buttons); this.audio.addEventListener("ended", enable_buttons);
} }
//display buttons // Display buttons
var buttons = []; const buttonGroupElement = document.createElement("div");
if (Array.isArray(trial.button_html)) { buttonGroupElement.id = "jspsych-html-button-response-btngroup";
if (trial.button_html.length == trial.choices.length) { buttonGroupElement.style.cssText = `
buttons = trial.button_html; display: flex;
} else { justify-content: center;
console.error( gap: ${trial.margin_vertical} ${trial.margin_horizontal};
"Error in audio-button-response plugin. The length of the button_html array does not equal the length of the choices array" padding: ${trial.margin_vertical} ${trial.margin_horizontal};
); `;
}
} else { for (const [choiceIndex, choice] of trial.choices.entries()) {
for (var i = 0; i < trial.choices.length; i++) { buttonGroupElement.insertAdjacentHTML("beforeend", trial.button_html(choice, choiceIndex));
buttons.push(trial.button_html); const buttonElement = buttonGroupElement.lastChild as HTMLElement;
} buttonElement.dataset.choice = choiceIndex.toString();
buttonElement.addEventListener("click", () => {
after_response(choiceIndex);
});
this.buttonElements.push(buttonElement);
} }
var html = '<div id="jspsych-audio-button-response-btngroup">'; display_element.appendChild(buttonGroupElement);
for (var i = 0; i < trial.choices.length; i++) {
var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
html +=
'<div class="jspsych-audio-button-response-button" style="cursor: pointer; display: inline-block; margin:' +
trial.margin_vertical +
" " +
trial.margin_horizontal +
'" id="jspsych-audio-button-response-button-' +
i +
'" data-choice="' +
i +
'">' +
str +
"</div>";
}
html += "</div>";
//show prompt if there is one // Show prompt if there is one
if (trial.prompt !== null) { if (trial.prompt !== null) {
html += trial.prompt; display_element.insertAdjacentHTML("beforeend", trial.prompt);
} }
display_element.innerHTML = html; if (!trial.response_allowed_while_playing) {
if (trial.response_allowed_while_playing) {
enable_buttons();
} else {
disable_buttons(); disable_buttons();
} }
@ -204,7 +194,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
}; };
// function to handle responses by the subject // function to handle responses by the subject
function after_response(choice) { const after_response = (choice) => {
// measure rt // measure rt
var endTime = performance.now(); var endTime = performance.now();
var rt = Math.round(endTime - startTime); var rt = Math.round(endTime - startTime);
@ -221,7 +211,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
if (trial.response_ends_trial) { if (trial.response_ends_trial) {
end_trial(); end_trial();
} }
} };
// function to end trial when it is time // function to end trial when it is time
const end_trial = () => { const end_trial = () => {
@ -255,32 +245,17 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
trial_complete(); trial_complete();
}; };
function button_response(e) { const disable_buttons = () => {
var choice = e.currentTarget.getAttribute("data-choice"); // don't use dataset for jsdom compatibility for (const button of this.buttonElements) {
after_response(choice); button.setAttribute("disabled", "disabled");
}
function disable_buttons() {
var btns = document.querySelectorAll(".jspsych-audio-button-response-button");
for (var i = 0; i < btns.length; i++) {
var btn_el = btns[i].querySelector("button");
if (btn_el) {
btn_el.disabled = true;
}
btns[i].removeEventListener("click", button_response);
} }
} };
function enable_buttons() { const enable_buttons = () => {
var btns = document.querySelectorAll(".jspsych-audio-button-response-button"); for (const button of this.buttonElements) {
for (var i = 0; i < btns.length; i++) { button.removeAttribute("disabled");
var btn_el = btns[i].querySelector("button");
if (btn_el) {
btn_el.disabled = false;
}
btns[i].addEventListener("click", button_response);
} }
} };
return new Promise((resolve) => { return new Promise((resolve) => {
trial_complete = resolve; trial_complete = resolve;