This shows you the differences between two versions of the page.
Next revision | |||
— | en:create:questions:svg-select [08.11.2019 23:21] – created d.aulenkamp | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== 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: | ||
+ | |||
+ | |||
+ | |||
+ | ===== Preparing the graphic ====== | ||
+ | |||
+ | 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 [[https:// | ||
+ | |||
+ | **Tip:** PDF files can be opened in [[https:// | ||
+ | |||
+ | **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 ''< | ||
+ | |||
+ | <code css> | ||
+ | < | ||
+ | /* < | ||
+ | text { | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | /* ]]> */ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Settings in the question ====== | ||
+ | |||
+ | 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" | ||
+ | |||
+ | 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. | ||
+ | |||
+ | |||
+ | ===== Adjusting the 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 [[: | ||
+ | |||
+ | 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 '' |