Debriefing return problem

[HannaKdeSouza]

Hello! I'm new to jsPsych and a bit lost. I've gotten my experiment to run after a week of reading documentation and tutorials, but I still have a feedback issue I can't solve. I've read [https://www.jspsych.org/tutorials/rt-task/#part-13-data-aggregation] and followed the instructions but my experiment shows literally the text " you responded correctly on ${accuracy}% of the trials. " instead of showing the actual percentage of correct answers. Can anyone spot the problem from the code below? :

var response_trial = {
type: 'html-button-response',
stimulus: '',
choices: [jsPsych.timelineVariable ('0'), jsPsych.timelineVariable('1')],
prompt: "<p>Click on the word you heard</p>",
trial_duration: 6000,
margin_vertical: '40px',
margin_horizontal: '40px',
response_ends_trial: true,
post_trial_gap: 500,
data: {
    phase: 'response',
    sound: jsPsych.timelineVariable('sound'), 
    condition: jsPsych.timelineVariable('condition'),
    vowel: jsPsych.timelineVariable('vowel'),
    correct_response: jsPsych.timelineVariable('correct_response')
},
on_finish: function(data){
    data.correct= data.response === data.correct_response 
    var curr_progress_bar_value = jsPsych.getProgressBarCompleted ();
        jsPsych.setProgressBar(curr_progress_bar_value + (1/n_trials));
    },
    
};


var test_procedure = {
    timeline: [audio_presentation_trial, response_trial],
    timeline_variables: timeline_variables,
    randomize_order: true

}
timeline.push(test_procedure);

var debrief_block = {
    type: "html-keyboard-response",
    stimulus: function () {
        var trials =jsPsych.data.get().filter({phase:'response'});
        var correct_trials = trials.filter({correct: true});
        var accuracy = Math.round(correct_trials.count() / trials.count() *100);
   
        return '<p> You responded correctly on ${accuracy}% of the trials. </p> <p>If you are unhappy with your score, keep on practicing English vowels</p><p>Press any key to complete the task. Thank you!</p>';
    }
};
timeline.push(debrief_block);

[becky-gilbert]

Hi @HannaKdeSouza, It looks like you're trying to use template strings to combine the accuracy variable with plain text. To do that, you need to put backticks (`) around the string instead of single quotes.

return `<p> You responded correctly on ${accuracy}% of the trials. </p><p>If you are unhappy with your score, keep on practicing English vowels</p><p>Press any key to complete the task. Thank you!</p>`;

The other way to do this is to use the + operator to combine variables and single-quoted strings:

return '<p> You responded correctly on '+accuracy+'% of the trials. </p><p>If you are unhappy with your score, keep on practicing English vowels</p><p>Press any key to complete the task. Thank you!</p>';

Do either of those solutions solve the problem?

p.s. I edited your post so that your code block is easier to read - see #1113 😃

[HannaKdeSouza]

Thank you @becky-gilbert! I hadn't realize that there was a difference between the type of quotes. That totally solved the problem of not showing the message. Thank you!
ps. I knew there must be a way of making the code look prettier on the discussion forum!