====== Custom Input Buttons ======

There are already a number of different display options in the //General Settings// tab in [[:en:create:layout|Questionnaire Layout]] that can be selected as the input button in //Input button style//. Selecting the option "custom input buttons" allows you to use your own image.


  * To do this, create an image (image set) according to the specifications below.
  * Upload the image into the survey project in **Images and Media Files** (do __not__ use //protected filing//)
  * Choose this image for the //Image set// in the layout in //Input button style// -> "Custom input buttons".
 
After the layout is saved, the new input buttons can be seen in the layout preview (below).

**Note:** Many participants are used to the default input buttons on their operating systems. Different input buttons can annoy some people. Therefore, Windows makes a clear distinction between radio buttons (round) and checkboxes (square). Other operating systems do not make a visual distinction between the two. 

**Note:** Sometimes custom input buttons appear a little pixelated/blurry on high-resolution displays (e.g. on cell phone devices).

===== Image Set Guidelines =====

  * All images required for custom input buttons are arranged in __one___ image with a total size of 96 x 256 pixels in a 32-pixel grid. 
  * The necessary items are arranged as in the grid displayed below.
  * The image is put to the top left in every cell. The number of grid cells displayed is determined in the //side length// option in "Questionnaire Layout". 
  
^  Radio button\\   ^  Checkbox\\   ^  Other  ^
|  not selected\\ default  |  not selected\\ default   |  category in\\ Extended Selection  |
|  selected\\ default   |  selected\\ default  |  not\\ used  |
|  not selected\\ focused  |  not selected\\ focused  |  not\\ selected  |
|  selected\\ focused  |  selected\\ focused  |  not\\ used  |
|  not selected\\ mouse over  |  not selected\\ mouse over  |  not\\ used  |
|  selected\\ mouse over   |  selected\\ mouse over  |  not\\ used  |
|  not selected\\ grayed out  |  not selected\\ grayed out  |  not\\ used  |
|  selected\\ grayed out  |  selected\\ grayed out   |  not\\ used  |



A completed image set looks as follows (only with a transparent background and without guides and frames)

^Image Set with Different Displays for Radio Buttons and Checkboes^Image Set with a Standardized Display of all Input Buttons^
|{{:de:create:exp.inputs-custom.medium.png?nolink|Image Set for Larger Input Buttons}}|{{:de:create:exp.inputs-custom.circles.png?nolink|Image Set for Circles with Crosses (non-differentiated)}}|


===== Disable Selectively =====

The custom modification may be disabled for single questions or inputs. To do so, the input must contain the CSS class "preventCustomInputs" or a parent HTML element must contain this class.

For complete questions, it's sensible to use a surrounding ''<div>'' HTML element:

<code php>
html('<div class="preventCustomInputs">');
question('AB01');
html('</div>');
</code>

You may also place the question in the questionnaire via drag & drop and place //HTML code// elements before and after. The result is the same:

<code html>
<div class="preventCustomInputs">
</code>

<code html>
</div>
</code>

To display single inputs in the browser's default layout, [[:en:create:javascript|JavaScript]] is helpful. This JavaScript code will prevent the layout modification for the input ''AB01_021'', if placed below the question.

<code html>
<script type="text/javascript">
<!--
document.getElementById("AB01_021").classList.add("preventCustomInputs");
// -->
</script>
</code>