Custom plug-in: proper way to call JavaScript function for display

[amandajemerson]

What is the proper way to call a JavaScript function for the content I want to display? I am new to jspsych so wanted to check on the proper way to do this. I looked at a few of the existing plug-ins but didn't see an example of this.

I have made a custom plug-in to run my canvas game which is in a JavaScript function called startGame().

If I do: display_element.innerHTML = startGame();

My game displays but underneath it says "undefined". When I inspect the element, it looks like:

<div class="jspsych-content-wrapper">
	<div id="jspsych-content" class="jspsych-content">
		undefined
		<div id="jspsych-content" class="jspsych-content"></div>
	</div>
</div>

Obviously I'm doing something wrong for "undefined" to be displayed to the screen.

If I don't set display_element.innerHTML and just call startGame(), it works. No "undefined" message. But is this the correct way to do it.

Thank you!

[becky-gilbert]

Hi @amandajemerson, there's really no one way to modify the display - you can write a plugin that changes the page content however you like! You're right that many plugins change the display using display_element.innerHTML = 'some HTML-formatted string', and there are some plugins that create HTML elements via JavaScript functions and then add those to the page with functions like append, insertBefore etc.

It sounds like your startGame function handles the display changes itself, which is totally fine! So you can just call startGame() on it's own inside your plugin.trial function, as you're doing now. If you're curious, you could look at the code for this function to see exactly how it changes the display. Or you can post it here if you want any help.

And just in case this isn't already clear: the reason why display_element.innerHTML = startGame(); doesn't work is because the innerHTML property of the page needs to be an HTML string. If your startGame function doesn't return a string then it's return value is undefined, which is what ends up on the page.

I hope this helps. Let us know if you have any other questions.

[amandajemerson]

Thank you so much, Becky. It is very helpful to get your take on this especially since I am new to it. So far the plug-in is working great!
-Amanda