URZ-Workshop „Webseiten erstellen mit TUCAL“
JavaScript
URZ-Workshop „Webseiten erstellen mit TUCAL“ 

JavaScript

Allgemeines

  • Mittels JavaScript bzw. JQuery lassen sich einfach und browserübergreifend dynamische Effekte auf Webseiten programmieren oder Webanwendungen komfortabler gestalten
  • Unsere Webseiten beinhalten bereits jQuery
    Alle Funktionen dieser JavaScript-Bibliothek können genutzt werden
  • Weiterer JavaScript-Code sollte immer über eine separate Datei eingebunden werden (auf Inline-Code verzichten!) – Einbindung erfolgt über Variable $javascript im Seitenkopf
    • $javascript[] = 'beispiel/code.js'
  • Typische Anwendungsgebiete sind u. a.:
    • dynamische Manipulation von Webseiten
    • Plausibilitätsprüfung (Datenvalidierung) von Formulareingaben vor dem Absenden
    • Anzeige von Dialogfenstern und Pop-ups
    • Senden und Empfangen von Daten, ohne Neuladen der Seite im Browser (Ajax)
    • Vorschlagen von Suchbegriffen während der Eingabe
  • Die Möglichkeiten von JavaScript bzw. JQuery sind sehr vielfältig, nutzen Sie daher:
weiter

Anwendungsbeispiel: Umfrage

Möchten Sie gerne ausführlicher in die JavaScript-Programmierung einsteigen?

 

Quellcode zu diesem Beispiel

Um diese Umfrage zu implementieren, wird HTML und JQuery benutzt:

  • HTML-Code 
    <div id="box_start" class="tucbox-tip-info">
    <p>Möchten Sie gerne ausführlicher in die JavaScript-Programmierung einsteigen?</p>
    <p>
        <button id="script_yes" class="btn btn-default">Ja, los geht's!</button> &nbsp;
        <button id="script_no" class="btn btn-primary">Nein, kein Interesse</button>
    </p>
</div>

<div id="box_yes" class="row" style="display:none;">
    <div class="col-md-2">
        <img alt="Fröhlicher Smiley" src="../bilder/js-yes.png" class="img-responsive script_icon">
    </div>
    <div class="col-md-10">
        <h3>Wunderbar!</h3>
        <p>Wenn Sie mit der JavaScript-Programmierung starten möchten, dann bitte hier entlang:</p>
        <ul>
            <li><a href="https://api.jquery.com/" class="linkextern">JQuery Dokumentation</a></li>
            <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript" class="linkextern">Einführung in JavaScript <sup>[en]</sup></a></li>
            <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials" class="linkextern">JavaScript Tutorials</a></li>
        </ul>
        <hr>
        <h3>Befragung neu starten?</h3>
        <p>
            <button class="script_startover btn btn-default">Neu beginnen</button> &nbsp;
            <button class="script_stop btn btn-primary">Befragung beenden</button>
        </p>
    </div>
</div>

<div id="box_no" class="row" style="display:none;">
    <div class="col-md-2">
        <img alt="Enttäuschter Smiley" src="../bilder/js-no.png" class="img-responsive script_icon">
    </div>
    <div class="col-md-10">
        <h3>Wie schade!</h3>
        <p>Wir hätten es Ihnen gern gezeigt.</p>
        <p>Es ist ein sehr spannendes und weites Themenfeld mit vielen Anwendungsmöglichkeiten.</p>
        <hr>
        <h3>Wollen Sie sich noch einmal umentscheiden?</h3>
        <p>
            <button class="script_startover btn btn-default">Ja, neu beginnen</button> &nbsp;
            <button class="script_stop btn btn-primary">Nein, ich will wirklich nicht</button>
        </p>
    </div>
</div>

<div id="box_stop" style="display:none;">
    <h3>Danke für Ihre Teilnahme an unserer Befragung.</h3>
    <div class="tucbox-tip-info">
        <div class="script_emoji">
            <p><strong>Geben Sie uns gern Feedback:</strong><br> Wie fanden Sie die Befragung?</p>
            <div class="slider">
                <input id="emoji_range" type="range" value="0" min="0" max="5" step="1">
            </div>
            <div class="result">
                <span class="emoji_icon">❓</span>
                <span class="emoji_text_de">keine Angabe</span>
            </div>
        </div>
        <p><button class="script_startover btn btn-default">OK</button></p>
    </div>
</div>
  • JavaScript-Code 
    $(document).ready(function() {

    // Ja/Nein-Befragung
    $("#script_yes").on("click", function() {
        $("#box_yes").show();
        $("#box_start").hide();
    });
    $("#script_no").on("click", function() {
        $("#box_no").show();
        $("#box_start").hide();
    });

    $(".script_startover").on("click", function() {
        $("#box_yes").hide();
        $("#box_no").hide();
        $("#box_start").show();
        $("#box_stop").hide();
    });
    $(".script_stop").on("click", function() {
        $("#box_yes").hide();
        $("#box_no").hide();
        $("#box_start").hide();
        $("#box_stop").show();
    });

    // Emoji-Slider
    const range = document.querySelector('#emoji_range');
    const div_icon = document.querySelector('.script_emoji .emoji_icon');
    const div_text_de = document.querySelector('.script_emoji .emoji_text_de');
    const div_text_en = document.querySelector('.script_emoji .emoji_text_en');
    const emojis = ['❓', '☹️', '😑', '😐', '🙂', '😄'];
    const emojis_text_de = ['keine Angabe', 'unzufrieden', 'weniger zufrieden', 'war okay', 'eher gut', 'sehr gut'];
    const emojis_text_en = ['no information', 'dissatisfied', 'less satisfied', 'was okay', 'rather good', 'very good'];

    range.addEventListener('input', (e) => {
        let rangeValue = e.target.value;
        div_icon.textContent = emojis[rangeValue];
        if (div_text_de) {
            div_text_de.textContent = emojis_text_de[rangeValue];
        }
        if (div_text_en) {
            div_text_en.textContent = emojis_text_en[rangeValue];
        }
    });

});
weiter

Anwendungsbeispiel: Checkliste „Passt ein Studium zu mir?“

Interesse und Motivation

Trifft voll zu Trifft eher zu Trifft eher nicht zu Trifft gar nicht zu
Interessiere ich mich für ein bestimmtes Fachgebiet und möchte ich mehr darüber lernen?
Kann ich mich über längere Zeit selbstständig mit einem Thema beschäftigen?
Bin ich bereit, regelmäßig zu lernen und mich auch durch schwierige Themen durchzubeißen?

Lernen und Arbeitsweise

Trifft voll zu Trifft eher zu Trifft eher nicht zu Trifft gar nicht zu
Kann ich meinen Lernalltag weitgehend selbst organisieren?
Lese und verstehe ich gerne längere Texte oder Fachliteratur?
Kann ich mich gut auf eine Aufgabe konzentrieren, auch wenn sie länger dauert?

Alltag und Perspektive

Trifft voll zu Trifft eher zu Trifft eher nicht zu Trifft gar nicht zu
Kann ich mir vorstellen, mehrere Jahre in Ausbildung und Lernen zu investieren?
Passt ein Studium zu meinen beruflichen Vorstellungen und Zielen?

Die Auswertung erfolgt lediglich innerhalb der aktuellen Browser-Sitzung und wird nicht gespeichert oder an Dritte weitergegeben.

Quellcode zu diesem Beispiel

Um eine solche Checkliste zu implementieren, wird HTML und JQuery benutzt:

  • HTML-Code 
    <h3 class="h4 linie">Interesse und Motivation</h3>
<table class="table table-bordered table-striped">
    <colgroup>
        <col style="width: 60%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
    <tr>
        <th></th>
        <th>Trifft voll zu</th>
        <th>Trifft eher zu</th>
        <th>Trifft eher nicht zu</th>
        <th>Trifft gar nicht zu</th>
    </tr>
    <tr class="optionen">
        <td>Interessiere ich mich für ein bestimmtes Fachgebiet und möchte ich mehr darüber lernen?</td>
        <td><label><input type="radio" name="frage1" id="frage1_1" value="trifft voll zu"><span class="sr-only">Trifft voll zu</span></label></td>
        <td><label><input type="radio" name="frage1" id="frage1_2" value="trifft eher zu"><span class="sr-only">Trifft eher zu</span></label></td>
        <td><label><input type="radio" name="frage1" id="frage1_3" value="trifft eher nicht zu"><span class="sr-only">Trifft eher nicht zu</span></label></td>
        <td><label><input type="radio" name="frage1" id="frage1_4" value="trifft gar nicht zu"><span class="sr-only">Trifft gar nicht zu</span></label></td>
    </tr>
    <tr class="optionen">
        <td>Kann ich mich über längere Zeit selbstständig mit einem Thema beschäftigen?</td>
        <td><label><input type="radio" name="frage2" id="frage2_1" value="trifft voll zu"><span class="sr-only">Trifft voll zu</span></label></td>
        <td><label><input type="radio" name="frage2" id="frage2_2" value="trifft eher zu"><span class="sr-only">Trifft eher zu</span></label></td>
        <td><label><input type="radio" name="frage2" id="frage2_3" value="trifft eher nicht zu"><span class="sr-only">Trifft eher nicht zu</span></label></td>
        <td><label><input type="radio" name="frage2" id="frage2_4" value="trifft gar nicht zu"><span class="sr-only">Trifft gar nicht zu</span></label></td>
    </tr>
    <tr class="optionen">
        <td>Bin ich bereit, regelmäßig zu lernen und mich auch durch schwierige Themen durchzubeißen?</td>
        <td><label><input type="radio" name="frage3" id="frage3_1" value="trifft voll zu"><span class="sr-only">Trifft voll zu</span></label></td>
        <td><label><input type="radio" name="frage3" id="frage3_2" value="trifft eher zu"><span class="sr-only">Trifft eher zu</span></label></td>
        <td><label><input type="radio" name="frage3" id="frage3_3" value="trifft eher nicht zu"><span class="sr-only">Trifft eher nicht zu</span></label></td>
        <td><label><input type="radio" name="frage3" id="frage3_4" value="trifft gar nicht zu"><span class="sr-only">Trifft gar nicht zu</span></label></td>
    </tr>
</table>

<h3 class="h4 linie">Lernen und Arbeitsweise</h3>
<table class="table table-bordered table-striped">
    <colgroup>
        <col style="width: 60%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
    <tr>
        <th></th>
        <th>Trifft voll zu</th>
        <th>Trifft eher zu</th>
        <th>Trifft eher nicht zu</th>
        <th>Trifft gar nicht zu</th>
    </tr>
    <tr class="optionen">
        <td>Kann ich meinen Lernalltag weitgehend selbst organisieren?</td>
        <td><label><input type="radio" name="frage4" id="frage4_1" value="trifft voll zu"><span class="sr-only">Trifft voll zu</span></label></td>
        <td><label><input type="radio" name="frage4" id="frage4_2" value="trifft eher zu"><span class="sr-only">Trifft eher zu</span></label></td>
        <td><label><input type="radio" name="frage4" id="frage4_3" value="trifft eher nicht zu"><span class="sr-only">Trifft eher nicht zu</span></label></td>
        <td><label><input type="radio" name="frage4" id="frage4_4" value="trifft gar nicht zu"><span class="sr-only">Trifft gar nicht zu</span></label></td>
    </tr>
    <tr class="optionen">
        <td>Lese und verstehe ich gerne längere Texte oder Fachliteratur?</td>
        <td><label><input type="radio" name="frage5" id="frage5_1" value="trifft voll zu"><span class="sr-only">Trifft voll zu</span></label></td>
        <td><label><input type="radio" name="frage5" id="frage5_2" value="trifft eher zu"><span class="sr-only">Trifft eher zu</span></label></td>
        <td><label><input type="radio" name="frage5" id="frage5_3" value="trifft eher nicht zu"><span class="sr-only">Trifft eher nicht zu</span></label></td>
        <td><label><input type="radio" name="frage5" id="frage5_4" value="trifft gar nicht zu"><span class="sr-only">Trifft gar nicht zu</span></label></td>
    </tr>
    <tr class="optionen">
        <td>Kann ich mich gut auf eine Aufgabe konzentrieren, auch wenn sie länger dauert?</td>
        <td><label><input type="radio" name="frage6" id="frage6_1" value="trifft voll zu"><span class="sr-only">Trifft voll zu</span></label></td>
        <td><label><input type="radio" name="frage6" id="frage6_2" value="trifft eher zu"><span class="sr-only">Trifft eher zu</span></label></td>
        <td><label><input type="radio" name="frage6" id="frage6_3" value="trifft eher nicht zu"><span class="sr-only">Trifft eher nicht zu</span></label></td>
        <td><label><input type="radio" name="frage6" id="frage6_4" value="trifft gar nicht zu"><span class="sr-only">Trifft gar nicht zu</span></label></td>
    </tr>
</table>

<h3 class="h4 linie">Alltag und Perspektive</h3>
<table class="table table-bordered table-striped">
    <colgroup>
        <col style="width: 60%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
    <tr>
        <th></th>
        <th>Trifft voll zu</th>
        <th>Trifft eher zu</th>
        <th>Trifft eher nicht zu</th>
        <th>Trifft gar nicht zu</th>
    </tr>
    <tr class="optionen">
        <td>Kann ich mir vorstellen, mehrere Jahre in Ausbildung und Lernen zu investieren?</td>
        <td><label><input type="radio" name="frage7" id="frage7_1" value="trifft voll zu"><span class="sr-only">Trifft voll zu</span></label></td>
        <td><label><input type="radio" name="frage7" id="frage7_2" value="trifft eher zu"><span class="sr-only">Trifft eher zu</span></label></td>
        <td><label><input type="radio" name="frage7" id="frage7_3" value="trifft eher nicht zu"><span class="sr-only">Trifft eher nicht zu</span></label></td>
        <td><label><input type="radio" name="frage7" id="frage7_4" value="trifft gar nicht zu"><span class="sr-only">Trifft gar nicht zu</span></label></td>
    </tr>
    <tr class="optionen">
        <td>Passt ein Studium zu meinen beruflichen Vorstellungen und Zielen?</td>
        <td><label><input type="radio" name="frage8" id="frage8_1" value="trifft voll zu"><span class="sr-only">Trifft voll zu</span></label></td>
        <td><label><input type="radio" name="frage8" id="frage8_2" value="trifft eher zu"><span class="sr-only">Trifft eher zu</span></label></td>
        <td><label><input type="radio" name="frage8" id="frage8_3" value="trifft eher nicht zu"><span class="sr-only">Trifft eher nicht zu</span></label></td>
        <td><label><input type="radio" name="frage8" id="frage8_4" value="trifft gar nicht zu"><span class="sr-only">Trifft gar nicht zu</span></label></td>
    </tr>
</table>

<p><button class="btn btn-default btn-selfcheck" disabled id="btnAuswertung">Auswertung anzeigen</button></p>
<p><em>Die Auswertung erfolgt lediglich innerhalb der aktuellen Browser-Sitzung und wird nicht gespeichert oder an Dritte weitergegeben.</em></p>

<div id="containerAuswertung" style="display: none;">
    <hr>

    <h3>Meine Evaluation</h3>
    <div class="row">
        <div class="col-xs-3 text-right">
            <p>Trifft voll zu</p>
        </div>
        <div class="col-xs-8">
            <div class="progressText" id="progressText1"></div>
            <div class="progress">
                <div class="progress-bar progress-bar-success" id="progressBar1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="19" style="width: 0%">
                    <span class="sr-only">40% Complete (success)</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3 text-right">
            <p>Trifft eher zu</p>
        </div>
        <div class="col-xs-8">
            <div class="progressText" id="progressText2"></div>
            <div class="progress">
                <div class="progress-bar progress-bar-info" id="progressBar2" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="19" style="width: 0%">
                    <span>20% Complete (info)</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3 text-right">
            <p>Trifft eher nicht zu</p>
        </div>
        <div class="col-xs-8">
            <div class="progressText" id="progressText3"></div>
            <div class="progress">
                <div class="progress-bar progress-bar-warning" id="progressBar3" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="19" style="width: 0%">
                    <span class="sr-only">60% Complete (warning)</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3 text-right">
            <p>Trifft gar nicht zu</p>
        </div>
        <div class="col-xs-8">
            <div class="progressText" id="progressText4"></div>
            <div class="progress">
                <div class="progress-bar progress-bar-danger" id="progressBar4" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="19" style="width: 0%">
                    <span class="sr-only">80% Complete (danger)</span>
                </div>
            </div>
        </div>
    </div>

    <h4>Interpretation der Ergebnisse</h4>
    <div class="tucbox-tip-info area-selfcheck" id="interpretation">
        Die Auswertung zeigt die Verteilung Ihrer Antworten auf die verschiedenen Antwortoptionen. Sie gibt Ihnen einen Überblick darüber, wie gut Ihre Voraussetzungen für das Studium sind.
    </div>

    <p>Die Ergebnisse des Selbstchecks können Sie <a href="javascript:window.print()">drucken bzw. speichern</a> und gemeinsam mit der Studienberatung auswerten.</p>
</div>
  • JavaScript-Code 
    $(document).ready(function() {

    $('input[type="radio"]').change(function() {
        // Auswertung-Button aktivieren, wenn alle Fragen beantwortet sind
        var totalFragen = $('.optionen').length;
        var beantworteteFragen = $('input[type="radio"]:checked').length;
        if (beantworteteFragen === totalFragen) {
            $('#btnAuswertung').prop('disabled', false);
        }
    });

    $('#btnAuswertung').click(function() {
        var auswertung = {};

        // Alle Fragen durchgehen
        var element = 'ol li';
        if ($('table tr.optionen').length > 0) {
            var element = 'table tr.optionen';
        }
        $(element).each(function(index) {
            var frageNummer = index + 1;
            var antwort = $(this).find('input[type="radio"]:checked').val();
            if (antwort) {
                if (!auswertung[antwort]) {
                    auswertung[antwort] = 0;
                }
                auswertung[antwort]++;
            }
        });

        // Container Auswertung anzeigen
        $('#containerAuswertung').show();

        // Progress-Bars aktualisieren
        var totalFragen = $('.optionen').length;
        var percent_value1 = Math.round((auswertung['trifft voll zu'] || 0) / totalFragen * 100);
        var percent_value2 = Math.round((auswertung['trifft eher zu'] || 0) / totalFragen * 100);
        var percent_value3 = Math.round((auswertung['trifft eher nicht zu'] || 0) / totalFragen * 100);
        var percent_value4 = Math.round((auswertung['trifft gar nicht zu'] || 0) / totalFragen * 100);

        var sum_12 = (auswertung['trifft voll zu'] || 0) + (auswertung['trifft eher zu'] || 0);
        var sum_34 = (auswertung['trifft eher nicht zu'] || 0) + (auswertung['trifft gar nicht zu'] || 0);

        $('#progressBar1').css('width', percent_value1 + '%').attr('aria-valuenow', percent_value1).text(percent_value1 + '%');
        $('#progressText1').text(percent_value1 + '% (' + (auswertung['trifft voll zu'] || 0) + 'x geantwortet)');
        $('#progressBar2').css('width', percent_value2 + '%').attr('aria-valuenow', percent_value2).text(percent_value2 + '%');
        $('#progressText2').text(percent_value2 + '% (' + (auswertung['trifft eher zu'] || 0) + 'x geantwortet)');
        $('#progressBar3').css('width', percent_value3 + '%').attr('aria-valuenow', percent_value3).text(percent_value3 + '%');
        $('#progressText3').text(percent_value3 + '% (' + (auswertung['trifft eher nicht zu'] || 0) + 'x geantwortet)');
        $('#progressBar4').css('width', percent_value4 + '%').attr('aria-valuenow', percent_value4).text(percent_value4 + '%');
        $('#progressText4').text(percent_value4 + '% (' + (auswertung['trifft gar nicht zu'] || 0) + 'x geantwortet)');

        // Interpretationstext aktualisieren
        var interpretationText = '';
        if ((percent_value1 + percent_value2) > 60) {
            interpretationText = 'Ihre Antworten deuten auf <strong>sehr gute Voraussetzungen</strong> für ein Studium hin.';
        } else if ((percent_value3 + percent_value4) > 60) {
            interpretationText = 'Die Mehrheit Ihrer Antworten deutet darauf hin, dass ein Studium aktuell <strong>nicht die richtige Wahl</strong> darstellen könnte.';
        } else {
            interpretationText = 'Ihre Antworten zeigen eine ausgewogene Verteilung. Dies deutet darauf hin, dass ein Studium geeignet ist. Es wird empfohlen, über Zeitplanung und Motivation nachzudenken.';
        }
        $('#interpretation').html(interpretationText).addClass('tucbox-tip').removeClass('tucbox-tip-info');
    });

});
weiter