| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| en:create:texts [23.04.2021 17:58] – [Text elements] sophia.schauer | en:create:texts [13.02.2024 19:00] (current) – admin |
|---|
| ====== Text elements ====== | ====== Text Elements ====== |
| |
| Texts are -- besides questions -- the most important component of questionnaires. You need them for greetings, longer explanations and often as stimuli (e.g. articles). Texts are created likely questions in a section. Select the desired section and click //Add text// in the **Questionnaire** on the left. | Texts are -- besides questions -- the most important component of questionnaires. You need them for greetings, longer explanations and often as stimuli (e.g. articles). Texts are created likely questions in a section. Select the desired section and click //Add text// in the **Questionnaire** on the left. |
| * The "Formatted Text" display allows formatting with an editor. **Important:** Please do __not__ copy text directly from Microsoft Word into a formatted text. This will copy a lot of unnecessary formatting, which can lead to display errors later. | * The "Formatted Text" display allows formatting with an editor. **Important:** Please do __not__ copy text directly from Microsoft Word into a formatted text. This will copy a lot of unnecessary formatting, which can lead to display errors later. |
| * For more sophisticated design, you can directly enter HTML or JavaScript using the "HTML Code" display. For example, you can also include videos ([[:en:create:media]]). | * For more sophisticated design, you can directly enter HTML or JavaScript using the "HTML Code" display. For example, you can also include videos ([[:en:create:media]]). |
| | * You can display extensive information clearly as a text ([[:en:create:accordion|accordion]]) |
| |
| If desired, you can also enter text content in the //Title// tab that will be formatted like a question. As soon as you save the text ({{:button.save.png?nolink|Save button}}), it will appear in the question catalog. | If desired, you can also enter text content in the //Title// tab that will be formatted like a question. As soon as you save the text ({{:button.save.png?nolink|Save button}}), it will appear in the question catalog. |
| |
| |
| ===== Other possibilities ===== | ===== Use in Questionnaire ===== |
| |
| There are 4 different ways how to implement texts into the questionnaire. | There are 4 possibilities of embedding texts in questionnaires. On the one hand you can enter HTML code directly in the questionnaire, on the other hand you can use text modules (see above). Direct typing of HTML code makes the **Questionnaire compilation** quite confusing, therefore we recommend creating texts in the question catalog. In addition to different formatting, these also support [[:en:create:multilang|multilingual questionnaires]]. |
| |
| * //Text elements//\\ Try to always use text elements for texts. The questionnaire will stay clean and slim, and you are able to use functions like multilingual surveys. | * //Texts//\\ Texts from the question catalog are included in the questionnaire in the same way as questions under **Composing questionnaire**: |
| * [[:en:glossary#drag_drop|Dragging and dropping]] text elements into the questionnaire. | * Drag text via [[:en:glossary#drag_drop|Drag & Drop]] into the questionnaire. |
| * Implementing text elements using the php function ''[[:en:create:functions:text|text()]]''. | * Include text with the PHP function ''[[:en:create:functions:text|text()]]'' or ''[[:en:create:functions:show|show()]]''. |
| * //HTML-Code directly in the questionnaire//\\ Use HTML-code only to insert short snippets of code (e.g. when placing questionnaire elements) or if you have to insert dynamically created content without using placeholders. | * //HTML code directly in the questionnaire//\\ Use HTML code in the questionnaire only if you need either very short snippets of HTML code (e.g. to place questionnaire elements) or if you need to insert dynamically generated content directly (not using placeholders). |
| * Drag a //HTML-code//-element into the questionnaire and enter your HTML-code. | * Drag a block of type //HTML-Code// into the questionnaire and type HTML code directly there. |
| * Insert HTML-code using the PHP-function ''[[:en:create:functions:html|html()]]''. The following example shows HTML-code divided into several lines for better legibility. | * Include HTML code in the questionnaire with the PHP function ''[[:en:create:functions:html|html()]]''. As you can see in the following example, the HTML code can be spread over several lines for clarity: |
| |
| <code php> | <code php> |
| html(' | html(' |
| <h1> Heading <br> | <h1> Anmeldung zum Proseminar <br> |
| Instruments for online surveys </h1> | Instruments for the online survey </h1> |
| '); | '); |
| </code> | </code> |
| |
| ===== Text formatting ===== | |
| |
| There are two ways to format texts: a wiki-format for simple formatting (e.g. in question texts) and HTML-format for advanced formatting (e.g. in welcome texts). You may mix both notations as desired. | ===== Text Formatting ===== |
| | |
| | If you create a text in the **List of Questions** you can directli in edit in the editor. The formatting is the transaltet in HTML code in the background. But also questions, explanations, items and other desciptions can be formatted. There are two ways to format texts: a wiki-format for simple formatting (e.g. in question texts) and HTML-format for advanced formatting (e.g. in welcome texts). You may mix both notations as desired. |
| |
| ==== Wiki-Notation ==== | ==== Wiki-Notation ==== |
| |
| Use double underscores (''_''), slashes (''/'') and asterisks (''*'') to highlight words or sentences. At some places, use the enter key to break lines. | The Wiki notation allows simple highlights - no matter if in independent texts, questions, items or verbal scale anchors. |
| |
| **Tip:** Use highlighting __very__ sparingly. A homogenous layout looks much more professional. You should not use more than 3 accentuations per page - otherwise the layout will be more confusing than helpful. | **Tip:** Use highlighting __very__ sparingly. A homogenous layout looks much more professional. You should not use more than 3 accentuations per page - otherwise the layout will be more confusing than helpful. |
| | bold | <nowiki>**Text**</nowiki> | <nowiki>What is **your opinion** on this?</nowiki> | What is **your opinion** on this? | | | bold | <nowiki>**Text**</nowiki> | <nowiki>What is **your opinion** on this?</nowiki> | What is **your opinion** on this? | |
| | italic | <nowiki>//Text//</nowiki> | <nowiki>Rate between //never// and //often//</nowiki> | Rate between //never// and //often// | | | italic | <nowiki>//Text//</nowiki> | <nowiki>Rate between //never// and //often//</nowiki> | Rate between //never// and //often// | |
| | | Heading 1 | <nowiki>=== Text ===</nowiki> | <nowiki>=== A. Bulk ===</nowiki> | {{scr.texts.example.h1.png}} | |
| | | Heading 2 | <nowiki>== Text ==</nowiki> | <nowiki>== A.1. Definition ==</nowiki> | {{scr.texts.example.h2.png}} | |
| | | Horizontal ruler, separator | <nowiki>--</nowiki> | Paragraph\\ <nowiki>--</nowiki>\\ Paragraph | {{:de:create:scr.texts.example.hr.png}}| |
| | no line break | <nowiki>$$Text$$</nowiki> | <nowiki>No line break at the hyphen: $$e-mail-</nowiki>\\ <nowiki>address$$</nowiki> | No line break at the hyphen:\\ e-mail-address | | | no line break | <nowiki>$$Text$$</nowiki> | <nowiki>No line break at the hyphen: $$e-mail-</nowiki>\\ <nowiki>address$$</nowiki> | No line break at the hyphen:\\ e-mail-address | |
| | | Tooltip | <nowiki>((*|Content))</nowiki> | <nowiki>Wiki-((Notation|Notation means notation))</nowiki> | |
| | | Link | <nowiki>[[URL|Title]]</nowiki> | <nowiki>[[https://www.soscisurvey.de/|SoSci Survey]]</nowiki> | [[https://www.soscisurvey.de/|SoSci Survey]] | |
| |
| If you want text parts to show in the questionnaire, but not as variable labels in your dataset, use double curly brackets (''{'' and ''}''). Texts marked like this also won't show up using the query [[:en:create:functions:value|value()]] in correspondence with the format code ''label''. | If you want text parts to show in the questionnaire, but not as variable labels in your dataset, use double curly brackets (''{'' and ''}''). Texts marked like this also won't show up using the query [[:en:create:functions:value|value()]] in correspondence with the format code ''label''. |
| |
| Technically, you enter HTML-code at any position in the questionnaire. HTML (HyperText Markup Language) is the standard format for websites in the internet. Don't be afraid - you won't need to know everything about HTML to use it for simple tasks like implementing pictures or texts. It just may be helpful to know the structure. | Technically, you enter HTML-code at any position in the questionnaire. HTML (HyperText Markup Language) is the standard format for websites in the internet. Don't be afraid - you won't need to know everything about HTML to use it for simple tasks like implementing pictures or texts. It just may be helpful to know the structure. |
| | |
| | **Tip:** If you struggle a bit with writing HTML code at first, an online HTML editor such as [[https://html-online.com/editor/|HTML-Online.com]] can be helpful. |
| |
| HTML-Code is made out of two parts: The //actual information// that is to be displayed in the browser and tags around this information that define //how// to display the information. Tags are written in pointy brackets. The following example highlights the tags: | HTML-Code is made out of two parts: The //actual information// that is to be displayed in the browser and tags around this information that define //how// to display the information. Tags are written in pointy brackets. The following example highlights the tags: |
| **HTML-Code** | **HTML-Code** |
| <code html> | <code html> |
| <h1>Hello world</h1> | <h1>Hello World</h1> |
| <p>How are you, world?</p> | <p>How are you, World?</p> |
| </code> | </code> |
| | |
| |
| Translated into human language, this example says nothing else, but: | Translated into human language, this example says nothing else, but: |
| Sometimes, you will need to define additional attributes to tags. The ''<img>''-tag, for example, needs to know where to find the image (''src'', "source") and which text to show in case the image can't be displayed (''alt'', alternative), | Sometimes, you will need to define additional attributes to tags. The ''<img>''-tag, for example, needs to know where to find the image (''src'', "source") and which text to show in case the image can't be displayed (''alt'', alternative), |
| |
| **HTML-Code** | |
| <code html> | <code html> |
| <img src="https://www.soscisurvey.de/help/layout/logo.SoSci-oFb.150.png" alt="Logo"> | <img src="logo.gif" alt="Logo"> |
| </code> | </code> |
| |
