Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Last revision Both sides next revision
en:create:javascript [18.02.2015 17:04]
alexander.ritter [Tips]
en:create:javascript [13.02.2018 09:17]
admin Update
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.  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. ​+[[:​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 (if available on the server) highcharts. 
  
 ===== Tips ===== ===== Tips =====
Line 16: Line 19:
  
 **Tip:** If you want to program your own JavaScript, please ensure the questionnaire can still be filled in even if JavaScript has been disabled. ​ **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 ===== ===== Inserting JavaScript =====
Line 31: Line 35:
 // --> // -->
 </​script></​code>​ </​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. 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 56:
   * [[:​en:​create:​dynamic|Immediately Show Questions when a Certain Option is Selected]]   * [[:​en:​create:​dynamic|Immediately Show Questions when a Certain Option is Selected]]
   * [[:​en:​create:​break-counter|Record Changes of Browser Window]]   * [[:​en:​create:​break-counter|Record Changes of Browser Window]]
 +
 +
 +===== Fehler finden =====
 +
 +If the JavaScript code does not work as it should, there is the browser'​s error console for debugging. These can be found -- depending on the browser -- in different places ([[http://​webmasters.stackexchange.com/​a/​77337/​30902|Stackexchange:​ Shortcuts]],​ [[https://​codex.wordpress.org/​Using_Your_Browser_to_Diagnose_JavaScript_Errors#​Step_3:​_Diagnosis|Wordpress:​ Diagnosis]],​ [[http://​www.stramaxon.com/​2013/​10/​developer-tools-in-browser.html|How to Open Developer Tools]]).
 +
 +In the error console 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>​
  
  
en/create/javascript.txt · Last modified: 13.02.2018 09:17 by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki