====== JavaScript in the Questionnaire ======

PHP code (e.g. for filters) will only be executed when the participant submits a page in the questionnaire to the server after clicking on the Next button, which creates a new page. 

[[:en:glossary#javascript|JavaScript]] is required if the questionnaire should respond immediately when the participant clicks on a button or to user input ([[:en:create:dynamic|Immediately Show Questions when a Certain Option is Selected]]). JavaScript is executed directly in the participant's browser (unless JavaScript has been disabled) and can respond to user input instantly. However, JavaScript cannot access (or only has limited access to) the current interview (e.g. participant's previous responses) with JavaScript.

The JavaScript library ''[[:en:create:soscitools|SoSciTools]]'' is available within the questionnaire. This provides useful functions that make it easier to work with questionnaire content. You can also use the PHP command ''[[:en:create:functions:library|library()]]'' to include standard libraries like jQuery, SCEditor or ChartJS.


===== Tips =====

**Note:** Some question types in SoSci Survey use JavaScript regularly in their display, e.g. rankings, sliders, free mentions, or reaction times measurements.

**Note:** JavaScript cannot be mastered in an afternoon. Several examples of JavaScript are demonstrated in this manual which can be used directly in the questionnaire -- JavaScript can be extremely challenging when going beyond these examples.

**Note:** Using JavaScript can harm the questionnaire's accessibility. People who fill in the questionnaire with a screen reader, for example, depend on being able to fill it in with the keyboard.

**Tip:** If a JavaScript function does not work, the user has to rely on the [[:en:general:browser-tools|browser's error console]]. Potential mistakes in the script can only be seen once the error console is opened. 

**Tip:** If you want to program your own JavaScript, please ensure the questionnaire can still be filled in even if JavaScript has been disabled. 


===== Inserting JavaScript =====

To use JavaScript on a page of the questionnaire, create a new text element
  * either in a section with **Add text**
  * or under **Text Elements and Labels**.

Select the //Formatting// "HTML code" for the text.

The HTML code can then contain the actual JavaScript code within a ''<script>'' tag. For example:

<code javascript>
<script type="text/javascript">
<!--

// Here is the actual JavaScript,
// i.e. functions and function calls
alert("This is a JavaScript notification");

// -->
</script></code>

**Important:** Select the option "HTML code" in the //Formatting// dropdown.

{{:en:create:scr.javascript.layout.png?nolink|Text with HTML or JavaScript content}}

In **Compose Questionnaire**, the text element is dragged & dropped onto one, or multiple pages, in the questionnaire, or the PHP function ''[[:en:create:functions:text|text()]]'' can also be used.

**Note:** JavaScript can only access HTML elements (e.g. questions) that have already been loaded in the HTML page. It therefore makes sense to put JavaScript at the end of the page.  

**Tip:** In principle, HTML/JavaScript code can also be inserted directly into an HTML element of the questionnaire page. However, text elements offer several advantages, which is why inserting the code directly is not recommended.


===== HTML and JavaScript =====

The HTML code of a page defines the content. HTML consists of so-called "tags", recognizable by the angle brackets. A tag has a name, and most opening tags (e.g. ''<div>'' opens a DIV tag) have a closing tag, recognizable by the slash (''</div>''). For more information, see [[:en:create:texts-html#the_most_important_html_tags|The Most Important HTML Tags]].

An HTML tag can contain attributes, i.e. named settings. The following ''<div>'' tag, for example, contains a ''style'' attribute for the display and an ''id'' attribute to assign it the HTML ID "myDIV":

<code html>
<div style="border: 1px solid red; padding: 20px;" id="myDIV">Content</div>
</code>

Such an ID is, so to speak, a name for the element. Using this name, JavaScript can address and modify the element with the function ''document.getElementById()''.

<code javascript>
<script>
// Store the element in the JavaScript variable "block"
var block = document.getElementById("myDIV");

// Hide the element after 2 seconds
function hide() {
    block.style.display = "none";
}
window.setTimeout(hide, 2000);
</script>
</code>

**Note:** JavaScript code can only address HTML elements that already exist when the script is executed. In the example above, the ''<div>'' tag must therefore be placed above the ''<script>'' tag. You can, however, also use ''%%window.addEventListener("load", ...)%%'' so that JavaScript code is only executed once the page has been loaded completely.

**Tip:** The elements that SoSci Survey uses to display questions and items usually have HTML IDs. The quickest way to find them is to open the right menu in your browser: [[:en:general:browser-tools]]


===== Examples =====

A few examples of using JavaScript in the questionnaire can be found in the following chapters in the manual:

  * [[:en:create:timer-submit|Timer: Automatically Forward to Next Page]]
  * [[:en:create:timer-display|Timer: Show the 'Next' Button After a Certain Period of Time]]
  * [[:en:create:dynamic|Immediately Show Questions when a Certain Option is Selected]]
  * [[:en:create:break-counter|Record Changes of Browser Window]]
  * [[:en:create:script-keys]]


===== Troubleshooting =====

If the JavaScript code does not work as it should, there is the [[:en:general:browser-tools|browser's error console]] for debugging.

In the error console of the browser developer tools you can see errors that occured while running the code. You can also display what is stored in a JavaScript variable by using `console.log()`. The following lines identify an input field with the HTML ID "AB01_01" and then use the console to display whether it was found.

<code javascript>
<script type="text/javascript">
<!--
var input = document.getElementById("AB01_01");
console.log(input);
// -->
</script>
</code>


===== Learn JavaScript =====

Didactically prepared is the following 30-hour free course from Duke University: [[https://www.coursera.org/learn/duke-programming-web?#syllabus|Programming Foundations with JavaScript, HTML and CSS]]

In addition, you can find several JavaScript beginner courses on the Internet, e.g. [[https://www.javascript-kurs.de/|JavaScript lernen für Anfänger]] or [[https://lerneprogrammieren.de/javascript/|JavaScript Lernen: So lernst du es schnell & einfach]]

[[http://de.selfhtml.org/javascript/index.htm|SelfHTML]] (German only) combines a compact introduction with an extensive compendium. However, you should already have some basic idea of programming.