[[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
en:create:popup [26.01.2015 15:14] – [Open on Hover] alexander.ritteren:create:popup [13.07.2021 11:19] (current) – [Click to Show Information] sophia.schauer
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 is helpful if the participant can fade in additional information((a short text like this one)) if needed. Depanding on the application there are differnt solutions: 
 + 
 +  - Individual words are most easily explained with a tooltip (see below) 
 +  - When it comes to displaying text passages on a mouse click, use the [[:en:create:accordion|accordion function]] 
 +  - If you want to make an extensive text available as additional information, you can open it using ''[[:en:create:functions:textlink|textlink()]]'' in a separate popup window. 
 + 
 +In addition, you can use [[:en:create:javascript|JavaScript]] to display text, information, items or entire questions at the respondent's click. You can also save if the information got clicked.
  
-**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.  
  
 ===== Hover-Over Tooltip I ===== ===== Hover-Over Tooltip I =====
Line 49: Line 54:
 ===== 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 79:
 </div> </div>
  
-<!-- Javascript code -->+<!-- JavaScript code -->
 <script type="text/javascript"> <script type="text/javascript">
 <!-- <!--
Line 120: Line 125:
 ==== Hover over a Word Instead of Pressing a Button  ==== ==== Hover over a Word Instead of Pressing a Button  ====
  
-By slightly modifying this you can get rid of having to click, and therefore info box will be displayed when the user moves over a word:+By slightly modifying this you can get rid of having to click, and therefore the info box will be displayed when the user moves over a word:
  
 <code html> <code html>
Line 132: Line 137:
 </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 168:
 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 274:
 </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 301:
 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