[[Click to Show Information]]
You are here: start » Overview » Creating and Designing the Questionnaire » Click to Show Information
 
Trace:

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
en:create:popup [26.01.2015 15:14] – [Open on Hover] alexander.ritteren:create:popup [18.06.2015 14:16] – admin
Line 1: Line 1:
 ====== Click to Show Information ====== ====== Click to Show Information ======
  
-Sometimes it helps if the participant can access additional information ((a short piece of text like this one here)) if needed.+Sometimes it helps if the participant can access additional information((a short piece of text like this one here)) if needed.
  
 **Tip:** More detailed information can also be opened in a separate pop-up window by using ''[[:en:create:functions:textlink|textlink()]]''. However, you can never be sure if the participant will be able find their way back to the questionnaire.  **Tip:** More detailed information can also be opened in a separate pop-up window by using ''[[:en:create:functions:textlink|textlink()]]''. However, you can never be sure if the participant will be able find their way back to the questionnaire. 
Line 49: Line 49:
 ===== Click for Information ===== ===== Click for Information =====
  
-Web content (so the content of a questionnaire page as well) can be changed dynamically by using Javascript. Displaying and hiding content entails very simple changes. Information is integrated regularly, but remains invisible at first.+Web content (so the content of a questionnaire page as well) can be changed dynamically by using JavaScript. Displaying and hiding content entails very simple changes. Information is integrated regularly, but remains invisible at first.
  
-You need [[:en:glossary#javascript|Javascript]] if are using the following solution -- Although implementation is a little bit more demanding, you then get full control as to how and when the information is displayed.+You need [[:en:glossary#javascript|JavaScript]] if are using the following solution -- Although implementation is a little bit more demanding, you then get full control as to how and when the information is displayed.
  
  
Line 74: Line 74:
 </div> </div>
  
-<!-- Javascript code -->+<!-- JavaScript code -->
 <script type="text/javascript"> <script type="text/javascript">
 <!-- <!--
Line 132: Line 132:
 </code> </code>
  
-The Javascript code is the same as above and has to be attached to the HTML code or positioned anywhere on the page. +The JavaScript code is the same as above and has to be attached to the HTML code or positioned anywhere on the page. 
  
  
Line 163: Line 163:
 The code examples above are only able to display one piece of information per page. If you want to put multiple info buttons on a page, use the following code. The code examples above are only able to display one piece of information per page. If you want to put multiple info buttons on a page, use the following code.
  
-Save the first code as a text element. Insert this text element __once__ (anywhere __before__ the other Javascript code) into the questionnaire page. +Save the first code as a text element. Insert this text element __once__ (anywhere __before__ the other JavaScript code) into the questionnaire page. 
  
  
Line 269: Line 269:
 </script> </script>
 </code> </code>
 +
 +
 +==== Enlarge an Image ====
 +
 +Using an image as button, and a larger version of the image as "information", you may create a zoom feature. Simply give the images some HTML ID and take care of the larger version's placement.
 +
 +<code html>
 +<div style="position: relative; left: -100px; top: -100px">
 +  <img src="imageA.large.jpg" id="large1" />
 +</div>
 +<img src="iamgeA.jpg" id="image1" />
 +
 +<script type="text/javascript">
 +<!--
 +var info = new infoButton();
 +info.registerInfo("image1", "large1", "large1");
 +//-->
 +</script>
 +</code>
 +
 +There is no distinct close button in the example, above -- the larger version itself may be clicked to close the zoom.
  
  
Line 275: Line 296:
 If you want to save whether a info button was clicked on, internal variables are needed to begin with. Create a new question with the type [[:en:create:questions:internal|internal variables]] in the List of Questions. Add as many variables (items) in this question as info boxes you want to monitor.  If you want to save whether a info button was clicked on, internal variables are needed to begin with. Create a new question with the type [[:en:create:questions:internal|internal variables]] in the List of Questions. Add as many variables (items) in this question as info boxes you want to monitor. 
  
-Drag this question onto the questionnaire page __before__ the Javascript code.+Drag this question onto the questionnaire page __before__ the JavaScript code.
  
 Modify the third code (see above) by additionally specifying the IDs for the internal variables in which the use will be saved. For example: Modify the third code (see above) by additionally specifying the IDs for the internal variables in which the use will be saved. For example:
en/create/popup.txt · Last modified: 13.07.2021 11:19 by sophia.schauer
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki