====== Click to Show Information ======

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.


===== Hover-Over Tooltip I =====

SoSci Survey recognizes double brackets as an indicator of additional information. Either the mouseover activates a term in the text, or an info icon will be displayed. 


Double brackets are used as follows:

  ((Title|Explanation))
  
If an asterix (''*'')  is entered as the title, an info icon will be displayed. In the following examples, the mouseover activates the words "explanation required", and an info icon is displayed after the sentence. 
  

<code txt>
This is an ((explanation required|By "explanation required" we mean the content is unable to be understood straightaway.)) item.
</code>

<code txt>
This is an item that requires an explanation. ((*|By "explanation required" we mean the content is unable to be understood straightaway.))
</code>

The info icon and the format of the information can be customized in the Questionnaire Layout using CSS statements in the HTML layout. In order to do this, the CSS statements in the field //Tooltip// are overwritten from the questionnaire stylesheet.


===== Hover-Over Tooltip II =====

Another solution is to use the HTML attribute //title// for additional information. In doing so, a brief piece of information is displayed if the participant lingers on a word with the mouse -- however, not until after a short delay. The word itself can visually highlighted using the ''style'' attribute. 


<code html>
<p>Here is the text with a <span title="a word which does not have a clear meaning straightaway" style="border-bottom: 1px dotted">explanation required</span> Wort.</p>
</code>

If the information should not appear directly in an item, just use the ''<span>'' tag in the item text directly in the appropriate place.

<code html>
When the sun is shining I would rather go <span title="By &quot;outside&quot; we mean that you are not in an enclosed space" style="border-bottom: 1px dotted"> </span> than take part in an online survey.
</code>

**Note:** The participant's browser is responsible for displaying the ''title'' information. You do not have any influence over how quickly the information is displayed or how it is formatted.



===== 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.

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.



==== Implementation ====

Save the following HTML code as a text element and drag this into the questionnaire page. You have to enter the actual information yourself. Formatting with HTML is possible.

**Note:** The following code is only suitable for displaying one info button per questionnaire page. See below for the code for multiple buttons.


<code html>
<!-- Button to display info -->
<button type="button" onclick="buttonShow()">More Info</button>

<!-- And then the info box-->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Additional info comes here
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Close</button>
  </p>
</div>

<!-- JavaScript code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // hide box
info.style.position = "absolute";
info.style.zIndex = 999;
// Either in a fixed position on the page
// info.style.left = "50px";
// info.style.top = "100px";
// Or in a defined place below the button
info.style.marginTop = "10px";

function buttonShow() {
  // Display info box
  info.style.display = "";
}
function buttonHide() {
  // Hide the info box again
  info.style.display = "none";
}
//-->
</script>
</code>


==== Place Button Freely ====

The display button (at the end of the code in the example above) can also be positioned anywhere in the questionnaire (e.g. directly in the question title).


<code html>
<!-- The button can be inserted anywhere -->
<button type="button" onclick="buttonShow()">More Info</button>
</code>

An image can also be used instead of text. First of all, the image has to be uploaded into the survey project.

<code html>
<!-- Alternatively, a graphic button is used here -->
<img src="infobutton.png" onclick="buttonShow()">
</code>


==== Hover over a Word Instead of Pressing a Button  ====

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>
<!-- Instead of a button, a word in the text can be used -->
If you need an <span onmouseover="buttonShow()" onmouseout="buttonHide()" style="border-bottom: 1px dotted">explanation</span>, move the mouse over the selected word.
 
<!-- And then the info box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
 Additional information can be seen here
</div>
</code>

The JavaScript code is the same as above and has to be attached to the HTML code or positioned anywhere on the page. 


==== Save Use ====

You can also save whether the information was displayed in the data record. You need an [[:en:create:questions:internal|internal variable]] to be able to do this. Drag the question with the internal variable onto the page above the info text element. 


<code javascript>
var info = document.getElementById("infoBox");
var intVar = document.getElementById("AB01_01"); // the internal variable ID has to be entered here
info.style.display = "none"; // Hide box
intVar.value = "1";

function buttonShow() {
  // Display info box
  info.style.display = "";
  // Save that the button was clicked on
  intVar.value = "2";
}
function buttonHide() {
  // Hide info box again
  info.style.display = "none";
}
</code>


===== More Information on One Page =====

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. 


<file html js_infobox.txt>
<script type="text/javascript">
<!--
function infoButton() {
  var buttons = new Array();
  var boxes = new Array();
  var closes = new Array();
  var stores = new Array();
 
  function clickButton(evt) {
    var sender = SoSciTools.getSender(evt, this);
    for (var i=0; i<buttons.length; i++) {
      if (sender == buttons[i]) {
        // Display selected box 
        boxes[i].style.display = "";
        if (stores[i]) {
          stores[i].value = parseInt(stores[i].value) + 1;
        }
      } else {
        // Close all the others
        boxes[i].style.display = "none";
      }
    }
  }
 
  function clickClose(evt) {
    var sender = SoSciTools.getSender(evt, this);
    var ix = -1;
    for (var i=0; i<closes.length; i++) {
      if (sender == closes[i]) {
        ix = i;
        break;
      }
    }
    if (ix == -1) { return; }
    boxes[ix].style.display = "none";
  }
 
  this.registerInfo = function(buttonID, boxID, closeID, storeID) {
    var button = document.getElementById(buttonID);
    var box = document.getElementById(boxID);
    var close = document.getElementById(closeID);
    var store = document.getElementById(storeID);
    if (!button) { alert("There is no button with ID "+buttonID); return; }
    if (!box) { alert("There is no button with ID "+buttonID); return; }
    if (closeID && !close) { alert("There is no button ID "+closeID); return; }
    if (storeID && (!store || (store.nodeName != "INPUT"))) { alert("There is no data field with ID "+storeID); return; }
    if (store && isNaN(parseInt(store.value))) {
      store.value = 0;
    }
    buttons.push(button);
    boxes.push(box);
    closes.push(close);
    stores.push(store);
 
    // Initialize (hide info)
    box.style.display = "none"; // hide box
    box.style.position = "absolute";
    box.style.zIndex = 999;
    // Either in a fixed position on the page 
    // box.style.left = "50px";
    // box.style.top = "100px";
    // Or in a defined place below the button
    box.style.marginTop = "10px";
 
    // Knopf aktivieren
    SoSciTools.attachEvent(button, "click", clickButton);
    SoSciTools.attachEvent(close, "click", clickClose);
  }
}

//-->
</script>
</file>

Repeat the second code for each button including the info box. You only have to adjust the HTML IDs (''id'') for the button and info box. For example, ''infoButton2'', ''infoBox2'' and ''infoClose2''.


<code html>
<!-- Button to display info -->
<button type="button" id="infoButton1">More Info</button>

<!--Info-Box -->
<div id="infoBox1" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Additional info come here
  <p style="text-align: center; margin-top: 20px">
    <button type="button" id="infoClose1">Close</button>
  </p>
</div>
</code>

Place the third code at the end of the questionnaire page. You only have to repeat the last line here for each info box and use the corresponding IDs.

<code html>
<script type="text/javascript">
<!--
var info = new infoButton();
 
// Repeat the following line for each button
info.registerInfo("infoButton1", "infoBox1", "infoClose1");
//-->
</script>
</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.


==== Save Info Use ====

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.

Modify the third code (see above) by additionally specifying the IDs for the internal variables in which the use will be saved. For example:

<code html>
<script type="text/javascript">
<!--
var info = new infoButton();

// Repeat the following lines for each button (e.g. here for 3 buttons)
info.registerInfo("infoButton1", "infoBox1", "infoClose1", "IV01_01");
info.registerInfo("infoButton2", "infoBox2", "infoClose2", "IV01_02");
info.registerInfo("infoButton3", "infoBox3", "infoClose3", "IV01_03");
//-->
</script>
</code>

The variables then save how often (starting with 0) the info box was opened.

==== Open on Hover ====

To display a more extensive info box -- immediately, instead of after a short amount of time -- modify the code above. To ensure the information is displayed when it is hovered over, rather than by clicking on it, change the following lines at the end of the first code:


<code php>
    // Enable button (open/close by clicking)
    SoSciTools.attachEvent(button, "click", clickButton);
    SoSciTools.attachEvent(close, "click", clickClose);
    
    // Enable button (open/close with a mouseover)
    SoSciTools.attachEvent(button, "mouseover", clickButton);
    SoSciTools.attachEvent(button, "mouseout", clickClose);
</code>

Remove the close button in the second code. In the following example, text is used to display the info box instead of a button:


<code html>
<!-- Button to display info (place in a suitable position in the text) -->
<span id="infoText1" style="border-bottom: 1px dotted">More Info</button>
 
<!--Info box (only a little bit further down, e.g. after the text paragraph with the button) -->
<div id="infoBox1" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Additional info comes here
</div>
</code>

Enter the HTML ID for the button or the text in the third code:

<code html>
<script type="text/javascript">
<!--
var info = new infoButton();
 
// Repeat the following lines for each button
info.registerInfo("infoText1", "infoBox1", "infoText1");
//-->
</script>
</code>