Differences

This shows you the differences between two versions of the page.

--- en:create:javascript [18.02.2015 17:04] – [Tips] alexander.ritter
+++ en:create:javascript [12.06.2022 14:00] (current) – [Troubleshooting] christina.treppy
@@ Line 3: / Line 3: @@
 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 (as long as JavaScript has not been disabled,) and can respond to user input instantly. However, the user cannot access (or only has limited access to) the current questionnaire (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 ''[[:de:create:functions:library|library()]]'' to include standard libraries like jQuery, SCEditor or ChartJS.
 ===== Tips =====
@@ Line 13: / Line 16: @@
 **Note:** Using JavaScript can harm the questionnaire's accessibility. People using a screenreader to fill in the questionnaire should keep in mind that the keyboard can be used to fill it in.
-**Tip:** If a JavaScript function does not work, the user has to rely on the browser's error console. Potential mistakes in the script can only be seen once the error console is opened.
+**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 =====
-Create a new text element in **Text Elements and Labels** in order to use JavaScript on a page in the questionnaire. This element will contain HTML code and the actual JavaScript code between the ''<script>'' tags within this.
+In order to use JavaScript on a page of the questionnaire, one puts
+  * either in a section with **Add text**
+  * or under **Text Elements and Labels**
+you create a new text element. Select the //Formating// "HTML code" for the text.
 <code javascript>
@@ Line 31: / Line 38: @@
 // -->
 </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.
@@ Line 48: / Line 59: @@
   * [[:en:create:dynamic|Immediately Show Questions when a Certain Option is Selected]]
   * [[:en:create:break-counter|Record Changes of Browser Window]]
+===== 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 =====
-There are a number of good introductions to JavaScript on the internet. However, basic programming knowledge is needed beforehand.
+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]] is a website that combines a solid introduction with an extensive compendium [[http://de.selfhtml.org/javascript/index.htm|SelfHTML]] (German only).