Display prompt above the button in jspsych-audio-button-response

[zhangchi199133]

Dear all,

Hello! I believe this should be a very simple problem, but somehow I could not find way to solve it. I am using the plugin jspsych-audio-button-response to play an audio clip while display a picture. Since I could not find a way to put the image stimuli into the "stimulus" variable, I displayed it as a prompt. This led to the problem that the image display is always beneath the button. I was wondering whether there is some way I can change the spatial order of the button and the prompt? Thank you so much!

Best,

Chi

[vijaymarupudi]

Take a look at this discussion! #773 (reply in thread)

[zhangchi199133]

Hello Vijay, thank you so much for the suggestion!

I tried to follow the approach by cutting line 125-127 and paste them above line 81 in jspsych-audio-button-response.js. But it did not work. And the prompt cannot be displayed. I was wondering whether there was something wrong with how I move the codes. Thank you in advance!

[vijaymarupudi]

The changes had to be different but the idea is the same

diff --git a/plugins/jspsych-audio-button-response.js b/plugins/jspsych-audio-button-response.js
index 6341e2c..71ec1ce 100644
--- a/plugins/jspsych-audio-button-response.js
+++ b/plugins/jspsych-audio-button-response.js
@@ -114,17 +114,21 @@ jsPsych.plugins["audio-button-response"] = (function() {
       }
     }
 
-    var html = '<div id="jspsych-audio-button-response-btngroup">';
+
+    var html = ""
+
+		//show prompt if there is one
+		if (trial.prompt !== null) {
+			html += trial.prompt;
+		}
+
+    html += '<div id="jspsych-audio-button-response-btngroup">';
     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
-		if (trial.prompt !== null) {
-			html += trial.prompt;
-		}
 
 		display_element.innerHTML = html;
 

[zhangchi199133]

Hello Vijay! This works perfectly. Thank you so much for the help!