SVG as selection

This question type allows the use of any vector graphic in SVG format as a selection question. Each element within the graphic (e.g. a rectangle or a circle) can be used as a selection option and marked accordingly by the participant.

Warning: Older browsers cannot display SVG graphics correctly or not at all.

The elements in the graphic that are later to be used as selection buttons require an ID. This ID is usually assigned automatically by the drawing software (e.g. the free Inkscape). Save the vector graphic in the Internet-compatible file format SVG.

Tip: PDF files can be opened in Inkscape to convert them into SVG files. With the online service SVGOMG you can remove invisible artifacts from the file, which can reduce the file size massively.

Tip: PowerPoint files can be printed as PDF files and then used as described above.

If you use text in the SVG file, you may want to prevent it from being clicked directly and/or from being marked as text. To do this, open the SVG file in a text editor and enter a <style> tag directly after the open <svg> tag or add an existing <style> tag as follows:

<style>
  /* <![CDATA[ */
  text {
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
  }
  /* ]]> */
</style>

First upload the SVG file under Images and media files to your project directory.

Then create a new question of the type “SVG as selection”. For Graphic file (SVG), select the file you just uploaded. After saving () SoSci Survey automatically determines the image size in pixels as stored in the SVG.

After saving the question SoSci Survey also shows a preview of the SVG file. When you hover the mouse over the preview, the ID of the currently active SVG element and the parent elements are displayed below.

Click an item to automatically enter its ID in the Item Quick Entry (below). Add a description for the selection option (this will be displayed as a tooltip when the participant passes the option) and click the next item to continue.

Tip: Use only area elements (rectangle, circle, polygon, …) as selection elements. In principle, groups and texts can also be used, but you won't see the selection because they don't have frames or background colors.

If the mouse moves over a selectable element or the participant selects an element by clicking on it, the element changes color. Which colors SoSci Survey uses as frame and background color can be set in the Questionnaire Layout tab Questionnaire Elements → Selection Button.

If you don't want to change this setting in the layout universally (e.g. it also affects selection questions that are displayed as cards), you can define definitions for SelBox.svg, SelBox.svg.hover and SelBox.svg.selected in the tab HTML template of the layout in the <style> area. For formatting the selection, the border color (border-color) and the background color (background-color) are used. If necessary, change the border width directly in the SVG graphic.

The SVG selection has a 'disabled' property that can be used to block the selection options from being selected or deselected. For this, the property must be set to 'select' or 'unselect'. It is not possible to read the property.

The following HTML/JavaScript code blocks deselecting options once selected in the “AB01” question. The code must be placed on the same page as the question, the “AB01” may need to be replaced with the question identifier.

<script type="text/javascript">
<!--
 
window.addEventListener("load", function() {
    SoSciTools.questionnaire.AB01.disabled = "unselect";
});
 
// -->
</script>

The individual options can be controlled via hidden input fields in the background. To activate the second option in “AB01” use the following JavaScript code.

document.getElementById("AB01_02").checked = true;

Clicks on the options can be intercepted and processed based on the 'click' event of the hidden input fields.

document.getElementById("AB01_03").addEventListener("click", function(evt) {
    console.log("Click on option 3");
});