Online sketchpad fullscreen trial#

Whether to show a timer that counts down until the end of the trial when trial_duration is not null. If null the trial will continue indefinitely (until another way of ending the trial occurs). Specifying 'ALL_KEYS' will mean that all responses are allowed. The default value of 'NO_KEYS' means that no keys will be accepted as valid responses. Any key presses that are not listed in the array will be ignored. Keys should be specified as characters (e.g., 'a', 'q', ' ', 'Enter', 'ArrowDown') - see this page and this page (event.key column) for more examples. This array contains the key(s) that the subject is allowed to press in order to end the trial. The label for the button that enables a redo action. Note that show_undo_button must be true for the redo button to show up. Whether to show the button that enables a redo action. The label for the button that enables an undo action. Whether to show the button that enables an undo action. The label for the button that clears the entire drawing. Whether to show the button that clears the entire drawing. The label for the button that ends the trial. Whether to show the button that ends the trial. Pass in the string representation of the key, e.g., 'a' for the A key or ' ' for the spacebar. The 'ink' will flow when the button is held and stop when it is lifted. If this key is held down then it is like the mouse button being held down. Whether to save the individual stroke data that generated the final image. Whether to save the final image in the data as a base64 encoded data URL.

The location to render the prompt content. 'abovecanvas' or 'belowcanvas' or 'belowbutton' Clicking on the corresponding color button will change the stroke color. Note that a background_image will render on top of the color.Īrray of colors to render as a palette of choices for stroke color. Path to an image to render as the background of the canvasĬolor of the canvas background. Height of the canvas in pixels when canvas_shape is 'rectangle'ĭiameter of the canvas in pixels when canvas_shape is 'circle' Width of the canvas in pixels when canvas_shape is 'rectangle' In addition to the parameters available in all plugins, this plugin accepts the following parameters.

Online sketchpad fullscreen code#

You can do this by putting data saving code inside the on_data_update event handler. If you are going to be collecting a lot of data with this plugin you may want to save your data to your server after each trial and not wait until the end of the experiment to perform a single bulk upload. You can reduce the amount of data generated by turning off storage of the individual stroke data ( save_strokes: false) or storage of the final image ( save_final_image: false) if your use case doesn't require that information. Each trial can easily add 500kb+ of data to a final JSON output. Lastly we need to add the script tag for our script at the bottom of the body.Demo Experiment: Simple Reaction Time Taskĭata Storage, Aggregation, and ManipulationĮxclude Participants Based on Browser Features It will be a canvas element, but for layouting purposes we'll wrap it into a div. The next thing we have to add in our html is the actual drawing board. Lastly I'll add a button with the id of clear and this will be used to clear the drawing board. Don't forget to add the corresponding labels for these input fields. For the color input I add the id of stroke as it will define the color of the stroke and for the number input I'll add the id of lineWidth. Below that we'll add two input fields: one for color and one for the with of the line.

Inside the toolbar we'll add a title for our app in an h1. I also set an id of toolbar for it so it will be easier to work with it in javascript. Inside that we create a div which will hold our toolbar. This will be used to align the toolbar and the drawing board. We'll start by wrapping the whole app into a section with the class of container.

If you would watch a detailed step-by-step video instead you can check out the video I made covering this project on my Youtube Channel: To do that we will use vanilla JS and the Canvas API.Īfter this tutorial you'll have a great overview of the canvas API and event handling in javascript. In this tutorial we will create a simple drawing app in the browser.