| Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
| en:create:texts [20.10.2013 16:51] – created janisaltherr | en:create:texts [21.12.2014 22:52] – admin |
|---|
| |
| * //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. | * //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. |
| * [[:en:glossary#drag_drop|Dragging and dropping]] text elements into the questionnaire- | * [[:en:glossary#drag_drop|Dragging and dropping]] text elements into the questionnaire. |
| * Implementing text elements using the php function ''[[functions-base#text|text()]]''. | * Implementing text elements using the php function ''[[:en:create:functions:text|text()]]''. |
| * //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 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. |
| * Drag a //HTML-code//-element into the questionnaire and enter your HTML-code. | * Drag a //HTML-code//-element into the questionnaire and enter your HTML-code. |
| * Insert HTML-code using the PHP-function ''[[functions-output#html|html()]]''. The following example shows HTML-code divided into several lines for better legibility. | * 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. |
| |
| <code php> | <code php> |
| | 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 | |
| |
| 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 [[::de:create:functions-base#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''. |
| |
| ^ Description ^ Format-Code ^ Example ^ Output in questionnaire ^ Output in dataset ^ | ^ Description ^ Format-Code ^ Example ^ Output in questionnaire ^ Output in dataset ^ |
| ===== Most important tags to format texts ===== | ===== Most important tags to format texts ===== |
| |
| | Along with texts output trough ''html()'', you can use HTML-tags for Question titles, explanations and scale labels. This is an overview over the most important tags: |
| |
| Neben Texten, die Sie mit html() ausgeben, können Sie auch Frage-Titel, Erklärungen und Beschriftungen von Skalen mit HTML-Tags formatieren. Hier eine Aufstellung einiger wichtiger Tags: | ^ Tag ^ Meaning ^ Example ^ Output ^ |
| | | **<p>** | Paragraph | ''<p>Paragraph 1</p><p>Paragraph 2</p>'' | {{:en:create:scr.texts.example.p.png?nolink}} | |
| | | **<br>** | line break | ''this line will break<br>here'' | {{:en:create:scr.texts.example.br.png?nolink|}} | |
| | | **<strong>** | highlighted (depending on browser, usually bold) | ''Text, now <strong>highlighted</strong>'' | Text, now **highlighted** | |
| | | **<b>** | bold | ''Text, partly <b>bold</b>.'' | Text, partly **bold**. | |
| | | **<i>** | italic | ''This text is <i>italic</i>.'' | This text is //italic//. | |
| | | **<u>** | underlined | ''You can <u>underline</u> texts!'' | You can __underline__ texts! | |
| | | **<small>** | Set text smaller | ''This is a sentence<br> <small>And this could be its explanation</small>'' | {{:en:create:scr.texts.example.small.png?nolink|}} | |
| | | **<h1>** | First-degree headline | ''<h1>A. Main part</h1>'' | {{:en:create:scr.texts.example.h1.png?nolink|}} | |
| | | **<h2>** | Second-degree headline | ''<h2>A.1. Definition</h2>'' | {{:en:create:scr.texts.example.h2.png?nolink|}} | |
| | | **<a>** | Hyperlink to a website | ''%%<a href="https://www.soscisurvey.de" target="_blank">SoSciSurvey</a>%%'' | [[https://www.soscisurvey.de|SoSciSurvey]] | |
| | | **<span>** | Text part that can be formatted using CSS | ''%%This is <span style="color: #FF0000">red Text</span>%%'' | {{:en:create:scr.texts.example.span.png?nolink|}} | |
| | | **<div>** | Text block that can be formatted using CSS | ''%%<div style="border: 2px solid #FF0000; background-color: #FFCCCC">Text in a red box</div>%%'' | {{:en:create:scr.texts.example.div.png?nolink|}} | |
| |
| ^ Tag ^ Bedeutung ^ Beispiel ^ Ergebnis ^ | Tags are better used for textual highlightning than for layouting and design. However, the <span> and the <div> tag are "empty" containers that do not style texts themselves. You can use them to style text (parts) using CSS-formatting. Have a look at [[http://www.w3schools.com/|w3schools]] for further tutorials on this. |
| | **<p>** | Absatz | ''<p>Absatz 1</p><p>Absatz 2</p>'' | {{scr.texts.example.p.png}} | | |
| | **<br>** | Umbruch ("break") | ''stimme ich<br>voll zu'' | {{scr.texts.example.br.png}} | | |
| | **<strong>** | hervorgehoben (normalerweise fett) | ''Text, nun <strong>hervorgehoben</strong>'' | Text, nun **hervorgehoben** | | |
| | **<b>** | fett ("bold") | ''Text, teilweise <b>fett</b>.'' | Text, teilweise **fett**. | | |
| | **<i>** | kursiv ("italic") | ''Klicken Sie auf <i>gar nicht</i>.'' | Klicken Sie auf //gar nicht//. | | |
| | **<u>** | unterstrichen ("underlined") | ''Klicken Sie <u>nicht</u> hier!'' | Klicken Sie __nicht__ hier! | | |
| | **<small>** | Text kleiner setzen | ''Dies ist ein Wort<br>\\ <small>Und dies die Erläuterung dazu</small>'' | {{scr.texts.example.small.png}} | | |
| | **<h1>** | Überschrift ersten Grades | ''<h1>A. Hauptteil</h1>'' | {{scr.texts.example.h1.png}} | | |
| | **<h2>** | Überschrift zweiten Grades | ''<h2>A.1. Definition</h2>'' | {{scr.texts.example.h2.png}} | | |
| | **<a>** | Hyperlink zu einer Website | ''%%<a href="https://www.soscisurvey.de" target="_blank">SoSciSurvey</a>%%'' | [[https://www.soscisurvey.de|SoSciSurvey]] | | |
| | **<span>** | Textabschnitt, der mit CSS zu formatieren ist | ''%%Dies ist <span style="color: #FF0000">roter Text</span>%%'' | {{scr.texts.example.span.png}} | | |
| | **<div>** | Textblock, der mit CSS zu formatieren ist | ''%%<div style="border: 2px solid #FF0000; background-color: #FFCCCC">Text im roten Kasten</div>%%'' | {{scr.texts.example.div.png}} | | |
| |
| Tags dienen eher der inhaltlichen Auszeichnung von Texten (z.B. in Überschriften und Inhalt) und weniger der Gestaltung. Das <span>-Tag ist wie auch das <div>-Tag ein leerer Container, der erst durch so genannte CSS-Styles (Cascading Style Sheets) zum Gestaltungselement werden kann. Bei Bedarf informiert [[http://de.selfhtml.org/|SelfHTML]] ausführlich über solche Möglichkeiten. | In case you need colored text, you can use the color-code in the example and replace it with your color of choice. For example, #FF0000 is FF(=255) red, 00 green, 00 blue, on a scale from 00=none to FF=brightest (the scale goes a little like ''0123456789ABCDEF''). The color calculator can help you with this. You'll find it when editing your **Questionnaire Layout**. |
| |
| Falls Sie farbigen Text benötigen, müssen Sie den den Farb-Code (im Beispiel #FF0000, bedeutet: 255=FF rot, 0 grün, 0 blau) lediglich durch den Code der gewünschten Farbe ersetzen. Dabei kann Ihnen der Farb-Rechner helfen, den Sie finden, wenn Sie ein Layout (unter **Fragebogen-Layouts**) bearbeiten. | "Common" tags like the <p> or <h1> tag don't have a defined appearance. The font-style and -size is being defined by scoscisurvey through a main CSS. Depending on the Questionnaire Layout a headline may be smaller or larger, or have a different color. |
| |
| Auch "normale" Tags wie <p> oder <h1> haben kein festes Erscheinungsbild. Die Schriftart oder -größe wird in SoSci Survey z.B. zentral durch ein CSS im Fragebogen festgelegt. Je nach Layout kann eine Überschrift also einmal größer einmal kleiner ausfallen. | **Example for highlighted Text** |
| | |
| **Beispiel für hervorgehobenen Text** | |
| <code html> | <code html> |
| <h1>Demonstration von HTML-Tags</h1> | <h1>Demonstration of HTML-Tags</h1> |
| <!-- Hervorhebung --> | <!-- Highlightning --> |
| <p>In diesem Absatz wird ein Wort <strong>hervorgehoben</strong>.</p> | <p>This paragraph contains a <strong>highlighted</strong> word.</p> |
| <!-- Farbe --> | <!-- Color --> |
| <p>Hier je eines <span style="color: #00FF00">hell-</span> | <p>This paragraph contains words in several colors: a<span style="color: #00FF00">light</span>, a |
| <span style="color: #009900">mittel-</span> und | <span style="color: #009900">medium</span> and a |
| <span style="color: #006600">dunkelgrün</span> geschrieben</p> | <span style="color: #006600">darker green</span></p> |
| <p> | <p> |
| <!-- Größe, wenn Überschrift nicht reicht --> | <!-- Font size and style--> |
| <p>Hier ist ein <span style="font-size: 32px;">großes</span> Wort,</p> | <p>This is a <span style="font-size: 32px;">large</span> word,</p> |
| <div style="font-size: 24px; color: #FF0000; font-weight: bold;"> | <div style="font-size: 24px; color: #FF0000; font-weight: bold;"> |
| und ein großer, fetter, roter Text | and a large, bold, red text. |
| </div> | </div> |
| <div style="margin-top: 32px; padding: 20px; border: 1px solid #FF9900; "> | <div style="margin-top: 32px; padding: 20px; border: 1px solid #FF9900; "> |
| <p>Mit DIVs lassen sich auch Abstände (z.B. oben) und Rahmen bauen.</p> | <p>Using div's, you can define the margins to the outside of the div (e.g. on the top of the div) and borders </p> |
| <p>Mit padding kann man dann Innenabstände (z.B. überall) definieren.</p> | <p>Using padding, you can define the margins on the inside of the div (e.g. between the border and the text. Here: all around</p> |
| </div> | </div> |
| </code> | </code> |
| |
| **Demonstration des obigen HTML-Code-Beispiels**\\ | **Output demonstration of the example above**\\ |
| {{scr.texts.example4.png}} | {{:en:create:scr.texts.example4.png?nolink&500|}} |
| | |
| | **Tip:** Sometimes a certain text is formatted bold by default. If, at a single point, you need it in standard weight, you can use ''<span style="font-weight: normal">Text</span>''. If you want this element never to be bold, you should edit the questionnaire layout. |
| |
| **Tipp:** Wenn ein Text im Fragebogen standardmäßig fett formatiert wird - Sie den Text aber einmalig nicht fett wünschen, so hilft ''<span style="font-weight: normal">Text</span>''. Falls Sie das entsprechende Element nie fett haben möchten, so sollten Sie das Layout entsprechend ändern. | ===== HTML-Entities ===== |
| ===== HTML-Entitäten ===== | |
| |
| Wie oben beschrieben, werden Tags durch spitze Klammern markiert. Manchmal benötigt man aber spitze Klammern als Inhalt: Dafür gibt es die sog. HTML-Entitäten < (less than, kleiner gleich, <) und > (greater than, größer als, >): | Tags are defined using angle brackets, like explained above. Sometimes you need to use angle brackets in your text. For this case, there are the HTML-Entities: < ('less than', <) and > ('greater than', >): |
| |
| ^ Beispiel ^ Ergebnis ^ | ^ Example ^ Output ^ |
| | <p>C<D und C>E</p> | CE | | | <p>C<D and C>E</p> | CE | |
| | <p>C<D und C>E</p> | C<D und C>E | | | <p>C<D and C>E</p> | C<D and C>E | |
| |
| Weitere HTML-Entitäten sind & (ampersand) für das kaufmännische Und (&) sowie " (quotation mark) für das Anführungszeichen ("). Weitere praktische Entitäten wie • (•) sind in [[http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_pfeile| SelfHTML]] gelistet. | Other HTML-Entities are the ''&'' fort the ampersand (&) and ''"'' for the quotation mark ("). More helpful Entities like ''•'' (•) are listed at [[http://www.w3schools.com/charsets/ref_html_entities_4.asp|w3schools]]. |
