====== Zähler für Beobachtungsstudien ======

SoSci Survey kann man -- zum Beispiel auf einem Tablet -- auch verwenden, um die Beobachter in Beobachtungsstudien oder die Kodierer bei Inhaltsanalysen von Video-Material zu unterstützen.

Die folgende Anleitung erklärt die Programmierung einer Fragebogen-Seite, auf welcher mehrere Knöpfe angeboten werden. Wird einer der Knöpfe angeklickt, wird der Zähler für das entsprechende Ereignis um 1 erhöht.

{{:de:create:exp.observation-counter.png|Ergebnis}}

Die Fragebogen-Seite enthält fünf Elemente, die nachfolgend erklärt werden.


==== JavaScript-Code zum Zählen ====

Für das eigentliche Zählen ist ein wenig JavaScript erforderlich. Dieser Code besteht aus zwei Teilen. Zum einen eine Funktion ''count()'', welche den Wert in dem durch eine HTML-ID spezifizierten Formularfeld initialisiert oder um eins erhöht.

Zum zweiten ein kleines JavaScript-Objekt ''ButtonCounter()'', welches jeweils eine HTML-ID für ein Formularfeld und einen Knopf entgegennimmt. Das Objekt initialisiert mit der vorher definierten ''count()''-Funktion das Formularfeld und registriert den JavaScript Event Handler, welcher auf Klicks reagiert.

Legen Sie in einer Rubrik im Fragebogen (hier im Beispiel "JS") einen **Neuen Text** an, legen Sie als *Darstellung* "HTML-Code" fest und fügen Sie den folgenden JavaScript-Code ein. Nach dem Speichern ziehen Sie das Textelement unter **Fragebogen zusammenstellen** als erstes Element auf die Fragebogen-Seite.

<code javascript>
<script type="text/javascript">
<!--
 
function count(inputID, count) {
  var input = document.getElementById(inputID);
  if (!input) {
    alert("Fehler: Interne Variable " + inputID + " ist auf der Seite nicht verfügbar!");
    return;
  }
  if (typeof count == "undefined") {
    count = 1;
  }
 
  // Initialisierung (Wert: 0)
  if (isNaN(parseInt(input.value))) {
    input.value = 0;
  }
 
  // Zählen
  var val = parseInt(input.value);
  input.value = val + count;
}

// Counter Objekt
function ButtonCounter(inputID, buttonID) {
    // Initialisieren (falls notwendig)
    count(inputID, 0);
    // Zähler aktivieren
    document.getElementById(buttonID).addEventListener("click", function() {
        count(inputID, 1);
    });
}

// -->
</script>
</code>


==== CSS-Code zur Formatierung der Knöpfe ====

Prinzipiell benötigt das ''<button>''-Element keine weitere Formatierung. Aber wenn man auf einem Touch-Display arbeitet, sind größere Knöpfe einfacher zu klicken.

Der folgende PHP-Code fügt ein wenig CSS ein, um die Knöpfe hübscher zu formatieren. Dieser PHP-Code folgt als zweites Element auf der Fragebogen-Seite.

<code php>
pageCSS('
  button.js {
    margin: 1em 1em 1em 0;
    border-radius: 5px;
    padding: 1em;
    max-width: 300px;
    user-select: none;
    background-color: white;
  }
  button.button:hover {
    background-color: #EEEEEE;
  }
');
</code>


==== Knöpfe zum Klicken ====

Die eigentlichen Knöpfe zum Anklicken kann man direkt als "HTML-Code" Element als drittes Element auf der Fragebogen-Seite einbinden. Der Inhalt könnte wie folgt aussehen.

<code html>
<!-- Buttons -->
<button type="button" class="js" id="button01">Person sieht in den Spiegel</button>
<button type="button" class="js" id="button02">Person verlässt den Raum</button>
<button type="button" class="js" id="button03">Person fasst sich ins Gesicht</button>
<button type="button" class="js" id="button04">Person sieht aus dem Fenster</button>

<hr style="margin: 2em 0">
</code>

Wichtig ist die (eindeutige) Kennung im ''id'' Attribut (''button01'', ''button02'', ...), welche frei wählbar  ist und weiter unten benötigt wird.

Die ''%%class="js"%%'' sorgt dafür, dass das CSS von oben angewendet wird.

Das ''<hr>'' sorgt nur für eine grafische Abtrennung von der folgenden Frage.


==== Die Formularelemente ====

Damit SoSci Survey die Zähldaten im Datensatz speichert, legen Sie im **Fragenkatalog** eine Frage vom Typ "Offene Texteingabe" oder "Interne Variablen" an.

Im Beispiel oben wurde eine offene Texteingabe gewählt, damit man den aktuellen Stand der Zählung live verfolgen und ggf. korrigieren kann. Als Breite für die "Eingabespalte" wurde in der Frage unter //Weitere Einstellungen// -> //Darstellung// -> //Texteingabefeld// -> //Spalte// der Wert 60 eingetragen. Weiterhin wurde das Eingabeformat für alle Eingabefelder auf "Ganze Zahlen" eingeschränkt, damit die Variable im Datensatz einen numerischen Datentyp verwendet. Notwendig sind beide Anpassungen nicht, aber durchaus hilfreich.

In der Frage legen Sie bitte für jeden Knopf ein Item bzw. eine Variable an. Im obigen Beispiel sind das 4 Items, welche dieselbe Beschriftung tragen wie die 4 Knöpfe, damit die Beschriftung im Datensatz stimmt.

Diese Frage wird als viertes Element (oder an beliebiger anderer Stelle) auf der Fragebogen-Seite eingefügt.


==== Initialisieren der JavaScript-Objekte ====

Zuletzt müssen noch die eingangs definierten JavaScript-Objekte initialisiert werden. Dabei werden durch das Objekt die HTML-IDs der Formularelemente (Eingabefelder aus der Fragen) mit den HTML-IDs der Knöpfe verbunden. Pro Knopf ist hier ein ''new ButtonCounter()'' erforderlich. Als erster Parameter wird die HTML-ID des Formularelements (Texteingabefeld oder interne Variable) angegeben, als zweiter Parameter die HTML-ID des Knopfes, wie im HTML-Code oben angegeben.

Dieser JavaScript-Code wird in ein Element "HTML-Code" eingefügt, welches als fünftes Element auf der Fragebogen-Seite platziert wird.

<code javascript>
<script type="text/javascript">
new ButtonCounter("JS02_01", "button01");
new ButtonCounter("JS02_02", "button02");
new ButtonCounter("JS02_03", "button03");
new ButtonCounter("JS02_04", "button04");
</script>
</code>